Node.js--(express框架)

互联网 2021/9/14 22:05:04

1. 基本介绍 Express 是一个基于 Node.js 平台,快速、开放、极简的 web 开发框架web 开发: 对不同的请求能够显示页面;提供接口服务; 框架是一个半成品,用来快速解决一类问题;框架:bootstrap, lay-ui, express, vue; 库就是工具集,通过调用api来完成具体的功能。…

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); 
})

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[Node.js--(express框架)]http://www.zyiz.net/tech/detail-228191.html

上一篇:基于node.js的Express框架介绍(前端同学写接口,让后端同学没接口可写)

下一篇:nodejs 框架 express 实现 jsonp跨域请求

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>
扫一扫关注最新编程教程