Node.js--(express框架)
2021/9/14 22:05:04
本文主要是介绍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); })
这篇关于Node.js--(express框架)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程
- 2024-12-20Vuex4课程:新手入门到上手实战全攻略