Node.js--(express框架)

1. 基本介绍

Express 是一个基于 Node.js 平台，快速、开放、极简的 web 开发框架

• web 开发: 对不同的请求能够显示页面；提供接口服务；

• 框架是一个半成品，用来快速解决一类问题；框架：bootstrap, lay-ui, express, vue;

• 库就是工具集，通过调用api来完成具体的功能。 库：zepto.js , jQuery, day.js, , react ，underscore, lodash, art-template, axios, echart.....

要点：

• 对于node.js来说，Express 是一个第三方模块，有丰富的 API 支持，强大而灵活的中间件特性

• Express 不对 Node.js 已有的特性进行二次抽象，只是在它之上扩展了 Web 应用所需的基本功能

• 参考链接：Express 官网 Express 中文文档（非官方） Express GitHub仓库

理解：

• 我们前面用http模块来支持web服务，写接口 ----- 原生js

• 现在要用express来写web服务，写接口 ------ jQuery

 2. 托管静态资源-web服务器

2.1 目标 

用static中间件来托管静态资源，实现web服务器

参考文档

让用户直接访问静态资源是一个web服务器最基本的功能。

http://localhost:3000/1.png
http://localhost:3000/css/style.css
http://localhost:3000/js/index.js

例如，如上url分别是请求一张图片，一份样式文件，一份js代码。我们实现的web服务器需要能够直接返回这些文件的内容给客户端浏览器。

在前面学习http模块时，我们已经实现了这些功能了，但是要写很多代码，现在使用express框架，只需一句代码就可以搞定了，这句代码是 express.static('目录')

2.2 基本使用 

// 加载 Express
const express = require('express')

// 1. 调用 express() 得到一个 app
//    类似于 http.createServer()
const app = express();

// 2. 静态资源托管
app.use(express.static('public'))


// 3. 监听端口号，启动 Web 服务
app.listen(3000, () => console.log('app listening on port 3000!'))

此时，所有放在public下的内容可以直接访问，注意，此时在url中并不需要出现public这级目录

• 在public下新建index.html，可以直接访问到。

2.3 限制前缀 

// 限制访问前缀
app.use('/public', express.static('public'))

 这意味着想要访问public下的内容，必须要在请求url中加上/public

3. 写接口-get接口有参数 

3.1 目标 

学习req.query属性，并能按要求写出带参数的get接口  

3.2 req.query属性 

express框架会自动收集get方式从url地址中传递的查询字符串参数，并自动保存在req对象的query属性中。我们直接来获取即可。  

app.get('/get', function(req, res) {
  // 直接返回对象
  console.log(req.query);
});

 3.3 要求

const express = require('express');
const app = express();
app.get('/get', function(req, res) {
  // 直接返回对象
  console.log(req.query);
  res.send({ name: 'abc' });
});
app.listen('8088', () => {
  console.log('8088');
});

 3.4 小结

req.query属性是express框架额外提供的属性。  

4. post接口--普通键值对参数 

4.1 目标 

用express.urlencoded()来获取请求体的参数。

具体来说当content-type为x-www-form-urlencoded时，表示上传的普通简单键值对 。

4.2 定义后端接口 

// 1. 使用中间件
app.use(express.urlencoded());

app.post("/add",function(req,res){
    //2. 可以通过req.body来获取post传递的键值对	
    res.json(req.body)

})

注意：

• app.use(....)之后，在res.body中就会多出一个属性res.body。

4.3 postman测试 

 

 5. post接口--json格式的参数

5.1 目标

使用express.json()来获取请求体中传递的json数据。

5.2 后端

app.use(express.json());
// 会自动加入req.body属性，这个属性中就包含了post请求所传入的参数

// 用来处理JSON格式的数据
app.post('/postJSON',(req,res)=>{
    // 后端收到post传参
    console.log(req.body);
    
    res.send('/postJSON')
})

 在post传递参数时，如果要传入的参数比较复杂（多级嵌套），则可以使用json格式上传。

var data = {
 name:"abc",
 address:{
     "a":1,
     "b":2,
     "info":"c"
 }
}

 5.3 postman操作

 

6. post接口--form-data文件上传 

6.1 目标

学习使用multer这个第三方包，来实现文件上传功能

6.2 multer

Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件。

涉及文件上传操作，则需要在服务器端额外使用第三方multer这个包（不属于express）来获取上传的信息。

6.3 后端 

1.安装

npm install multer

2.使用

// 1. 引入包
const multer = require('multer');
// 2. 配置
const upload = multer({dest:'uploads/'}) // 上传的文件会保存在这个目录下
// uploads表示一个目录名，你也可以设置成其它的

// 3. 使用
// 这个路由使用第二个参数 .upload.single表示单文件上传， 'cover' 表示要上传的文件在本次上次数据中的键名。对应于前端页面上的：
//  <input type="file" name='cover'/>

app.post("/postfile", upload.single('cover'), function(req,res){
    // req.file 记录了文件上传的信息
    // req.body 记录了其它普通参数（非文件）的信息
	// 其它操作
})

说明：

• 如果当前目录下没有uploads，它会自动创建uploads这个文件夹

• upload.single只是处理了文件的上传。你仍可以通过req.body来获取其它参数

6.4 postman 测试 

对应postman的操作如下：  

 

7. 理解接口传参 

 

7.1 请求报文 ：行、头、体

我们一般使用ajax技术请求接口，按http协议的约定，每个请求都有三个部分：

• 请求行： 保存了请求方式，地址，可以以查询字符串的格式附加小部分数据。

• 请求头：它可以附加很多信息，其中content-type用来约定请求体中保存的数据格式。

  content-type常见有三种取值：

 

• 请求体: 本次请求携带的参数。至于这些参数到了后端应该如何解析出来，由请求头中的content-type来决定。  

8. RESTful风格的接口 

是一种设计的接口的方式。RESTful设计是：

• 通过URL设计资源。接口名一般都是名词，不包含动词。

• 请求方式（get,post,delete,put）决定资源的操作类型

8.1 普通的接口设计

• 只用到get和post接口

• 接口的地址一般由动词+名词构成

• 每个接口的地址都不一样

例如：

接口名：localhost:8080/getarticle类型：get功能：获取文章信息

接口名：localhost:8080/addarticle类型：post功能：添加新文章

接口名：localhost:8080/delarticle类型：post功能：删除文章

接口名：localhost:8080/updatearticle类型：post功能：编辑文章

//------------下面是普通的api设计---------------

app.get('/getarticle',(req,res)=>{
    res.send('获取')
})

app.post('/addarticle',(req,res)=>{
    res.send('添加')
})

app.post('/delarticle',(req,res)=>{
    res.send('删除')
})
app.post('/updatearticle',(req,res)=>{
    res.send('编辑')
})

 8.1 RESTful接口设计

区别上述功能,主要依靠接口名称和请求类型而在restful设计中，它们应该是这样的：

接口名：localhost:8080/articles类型：get功能：获取文章信息

接口名：localhost:8080/articles类型：post功能：添加新文章

接口名：localhost:8080/articles类型：delete功能：删除文章

接口名：localhost:8080/articles类型：put功能：编辑文章

RESTful设计是：

• 通过URL设计资源。接口名一般都是名词，不包含动词。

• 请求方式（get,post,delete,put）决定资源的操作类型

8.3 参考代码 

const express = require('express')

const app = express();

app.get('/articles',(req,res)=>{
    res.send('获取')
})

app.post('/articles',(req,res)=>{
    res.send('添加')
})

app.delete('/articles',(req,res)=>{
    res.send('删除')
})
app.put('/articles',(req,res)=>{
    res.send('编辑')
})

app.listen(8080,()=>{
    console.log(8080); 
})