Express

为了提高开发效率，我们在开发过程中，都会尽量使用别人已经开发好的第三方模块，而我们想要快速实现服务器端的开发，推荐一个当下比较流行的框架：Express

Express 作为开发框架，因为它是目前最稳定、使用最广泛，而且 Node.js 官方推荐的唯一一个 Web 开发框架。除了为 http 模块提供了更高层的接口外，还实现了许多功能，其中包括：

  • 静态文件服务；
  • 路由控制；
  • 模板解析支持；
  • 动态视图；
  • 用户会话；
  • 错误控制器；
  • 插件支持。

官网：http://www.expressjs.com.cn/

express 是一个基于内置核心 http 模块的，一个第三方的包，专注于 web 服务器的构建。

基本使用

  • 首先创建一个名为 myapp 的目录，在命令行输入并运行 yarn init -y （或者 npm init -y）。
  • 使用 yarn add express （或者 npm install express ）安装 Express 包；
  • 其次在 myapp 目录中，创建一个名为 app.js 的文件，并复制下面示例中的代码。
  1. // 1、引入express模块并创建express对象
  2. const express = require('express');
  3. const app = express();
  5. // 2、书写处理请求的方法，来响应请求
  6. app.get('/', (req, res) => {
  7.     // 这里的代码在浏览器以get请求/的时候执行，  
  8.     // 这个函数就是用来处理浏览器的 对于/的get请求 的
  9.     // 第一个参数req是请求头对象，里面包含请求头信息
  10.     // 第二个参数res用来做响应
  11.     console.log(req);    
  12.     res.send('Hello World!');
  13. });
  15. // 3、监听端口
  16. app.listen(3000, () => {
  17.     //这里的代码服务器刚启动的时候执行1次
  18.     console.log('Example app listening on port 3000!')
  19. });

使用 node app.js 启动应用，访问 http://localhost:3000/ 就可以看到效果。

处理静态资源

exprss中已经帮我们封装好了判断指定url开头，并指定对应文件夹的方法

  1. const express = require('express');
  2. const app = express();
  3. app.listen(3000)
  4. // app.use(url以什么开头,express.static(去哪个路径下获取))
  5. // 如： url以views开头， 让请求去 views目录里面读取资源
  6. app.use('/views',express.static('views'))

处理get请求

在express里面也已经封装好了监听get请求的方法，如果我们希望浏览器以get方式请求数据，操作方法如下：

  1. const express = require('express');
  2. const app = express();
  3. app.listen(3000)
  4. app.use('/views',express.static('views'))
  5. // 使用app.get监听浏览器的get请求
  6. app.get('/getArticles',(req,res)=>{
  7.   // req , res 和我们之前写原生node一样，也是请求对象和响应对象
  8.   // 通过 req.query 得到请求带回的数据
  9.   console.log(req.query)
  10.   // 通过res.send()返回数据
  11.   res.send({
  12.     code:200,msg:'ok',
  13.     data : [ {id:1,title:'标题1'},{id:2,title:'标题2'},{id:3,title:'标题3'}, ]
  14.   })
  15. })

此时我们只需在views目录里面有一个articles.html，并通过 http://127.0.0.1:3000/views/articles.html访问就可以在里面使用ajax发请求并得到数据。

  1. <h1>
  2.   artilces页面
  3. </h1>
  4. <script src="jquery.js"></script>
  5. <script>
  6.     $.ajax({
  7.     url:'http://127.0.0.1:8080/getArticles',
  8.     // 带数据回服务器
  9.     data : {pageIndex:1,pageSize:10},
  10.     success(res){
  11.       console.log(res)
  12.     }
  13.   })
  14. </script>

处理post请求

express里面同样封装好了监听post请求的方法，也是学会如何使用就行了。post监听也很简单，只是对于得到数据的处理会稍微有点和get不同

  1. const express = require('express');
  2. const app = express();
  3. app.listen(3000)
  4. app.use('/views',express.static('views'))
  5. // post请求带回的数据有多种格式，所以我们要先决定好能解决哪种格式
  6. app.use(express.urlencoded({extened:true})) // 这是解析 key=value&key=value格式的
  7. // 使用app.post监听浏览器的post请求
  8. app.get('/login',(req,res)=>{
  9.   // 通过 req.body 得到请求带回的数据,一定是有了上面的app.use才能得到数据
  10.   console.log(req.body)
  11.   // 通过res.send()返回数据
  12.   res.send({
  13.     code:200,msg:'ok',
  14.     data : {
  15.       token: 'apsdiufpsaugipwerkmcasd034lijsdf...'
  16.     }
  17.   })
  18. })

小结： express快速完成服务器开发

  1. 使用 express.static 处理静态资源
  2. 使用 app.get 监听get请求，通过 req.query 得到数据
  3. 使用 app.post 监听 post 请求，通过 express.urlencoded 解析数据，使用 req.body 得到数据

服务器端渲染(了解)

概念

我们现在所掌握的开发模式都是前后端分离的，但是在开发中还会有一种情况也是大家必须知道的，这个方式就是服务器端渲染，简称SSR

SSR（server side render）指的是把页面数据在服务器端的时候就先把动态数据写入返回数据里面，不需要再使用ajax请求回来再渲染。

这样做的好处有：

  1. 减少浏览器请求服务器的次数
  2. 利于SEO

但是相对的也会增加服务器的压力，同时增加了开发成本，所以大家要明白做ssr的主要目的是为了SEO，如果没必要SEO的网站，是没必要做ssr的。

需要SEO的网站：

  • 电商
  • 门户
  • 社区
  • …

不需要SEO的网站

  • 企业内部系统
  • 网站后台
  • …

express中的ssr

express中使模板引擎来实现ssr，而模板也只是已经封装好的第三方模块，我们只要大概结合使用。

express官方推荐使用pug模板引擎来实现ssr，所以我们要先下载

  1. npm i pug   或者  yarn add pug

然后要设置pug为默认的渲染视图引擎

  1. app.set('view engine', 'pug')

然后我们在views里面写一个index.pug,输入下面的代码

  1. html
  2.   head
  3.     title= title
  4.   body
  5.     h1= message

这是pug模板我有的语法，左边是对应的标签，等号后面是对应的js变量，然后我们在请求的时候把数据传入模板引擎，进行渲染

app.get('/', function (req, res) {
  // 参数1是指要去views里面找index.pug
  // 参数2是要传入pug里面解析的数据
  res.render('index', { title: 'Hey', message: 'Hello there!' })
})

此时只要访问http://127.0.0.1:3000/就能看到数据。

如果要继续实现更加复杂的效果，就要继续学习pug的特殊用法，如果有兴趣请点击【pug官方文档】