express框架
express框架相当于再http模块加上一个中间件合集。中间件的含义就相当于处理http请求的处理函数,而express相当于调用多个中间件,这么一个框架。
参考:
相关文档:
项目下载使用:
cnpm install express --save
express路由结构化
https://expressjs.com/zh-cn/guide/routing.html
express里http.createServer
const app = express() app.use(bodyParser.json({ limit: '10mb' })) app.use( bodyParser.urlencoded({ extended: false, }) ) const server = http.createServer(app)
第9行代码这样写好处有:
用http封装不但可以使用express的属性和方法,而且还可以使用http的属性和方法
具体可以参考这段讨论:express里http.createServer和app.listen有什么区别?
express 常用API
use方法和中间件
- 注册中间件,返回的是函数。注意第三个参数next,如果写
next()
语句则执行完该中间件,前往下一个中间件执行下一个中间件,如果不写,则执行完该中间件,就停止运行中间件。 - 中间件,如果注册了路由,则只显示路由内容,所以使用的时候,中间件的url不应该是具体路由,而是一层路由,其他的二层路由则是具体内容路由。
let express = require('express') let app = express() // 路由 app.get('/', function (req, res) { res.send('Hello world') }) app.get('/customer', function (req, res) { res.send('customer page') }) // app.get('/admin', function (req, res) { // console.log('----------------------------') // res.send('admin page') // }) // 中间件 // 如果注册了路由,则只显示路由内容 app.use('/admin', function (request, response, next) { response.writeHead(200, { 'Content-Type': 'text/plain' }) response.end('Welcome to the admin page!\n') }) app.listen(3000) console.log('to http://localhost:3000/')
get方法
- 注册路由,用于指定不同的访问路径所对应的回调函数。由于get方法没有next回调函数,所以按照执行顺序,当地一个get方法执行了(根据匹配成功参数路径),后续的都不会执行了
put()post()put()del()类似get()使用(delete是JavaScript保留字,所以改叫del)
对于第一个参数,也就是路径参数,有不同的匹配规则
app.get('/customer/:who', function (req, res) { res.send('都能访问 /' + req.params.who + ' 该路径') })
访问 http://localhost:3000/customer/fa 返回 都能访问 /fa 该路径
访问http://localhost:3000/customer/ad 返回 都能访问 /ad 该路径
不能访问http://localhost:3000/customer
如果是:who? 则成为可选路径
set方法
- 指定变量的值
// 告诉express框架模板的位置 app.set('views', path.join(__dirname, 'views')) // 告诉express框架模板的默认后缀是什么 app.set('view engine', 'art');
response对象
response.redirect方法允许网址的重定向。
response.sendFile方法用于发送文件。
response.render方法用于渲染网页模板。
request对象
搭建HTTPS环境
上传crt和key文件
var fs = require('fs'); var options = { key: fs.readFileSync('E:/ssl/myserver.key'), cert: fs.readFileSync('E:/ssl/myserver.crt'), passphrase: '1234' }; var https = require('https'); var express = require('express'); var app = express(); app.get('/', function(req, res){ res.send('Hello World Expressjs'); }); var server = https.createServer(options, app); server.listen(8084); console.log('Server is running on port 8084');
express写API接口
References
response对象json方法写接口
内置json响应的方式:
/* * @Author: wztlink1013 * @Date: 2022-01-11 11:04:38 * @LastEditTime: 2022-01-11 11:21:17 * @Description: */ let obj = { 1: { id: 1234, name: '张三', college: '计算机科学与工程学院', grade: 2018, classes: 2, age: 21, }, 2: { id: 5678, name: '李四', college: '计算机科学与工程学院', grade: 2018, classes: 2, age: 21, }, } exports.index = function (req, res) { res.status(200).json(obj) }
// 接口的使用 let userinfo = require('./api/userinfo.js') app.get('/api/userinfo', userinfo.index)
js使用接口的一些方法
跨域问题的解决
解法一:手写(但是有看到网上说会有设备(iPhone6)不兼容等问题)
// 跨域设置 app.all("*", function(req, res, next) { res.header("Access-Control-Allow-Credentials", true); res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); res.header("Content-Type", "application/json;charset=utf-8"); next(); });
解法二:直接使用npm里面的cors包
<!-- * @Descripttion: learn axios * @Date: 2021-12-21 09:40:36 * @LastEditTime: 2022-01-11 11:25:28 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <script> // 配置公共的请求头 axios.defaults.baseURL = 'http://localhost:3000/' // 配置 超时时间 axios.defaults.timeout = 2500 // 配置公共的请求头 // axios.defaults.headers.common["Authorization"] = // "token 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" // axios.defaults.headers.common["Accept"] = "application/vnd.github.v3+json" // 配置公共的 post 的 Content-Type axios.defaults.headers.post['Content-Type'] = 'application/json' // 请求/响应 拦截器的配置 axios.interceptors.request.use( config => { console.log('请求拦截器: ') config.headers.Accept = 'application/vnd.github.v3+json' config.headers.Authorization = 'token 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' console.log(config) return config }, err => { console.log(err) } ) axios.interceptors.response.use( data => { console.log('响应拦截器: ') console.log(data.data) return data.data }, err => { console.log(err) } ) // 请求数据 axios.get('api/userinfo').then(data => { console.log(data) }) </script> </body> </html>
Postman 测试API工具
如果是本地写的接口,也就是localhost类的,在web postman上是不能测试的,只能下载Postman PC应用来测试。
body-parser模块
body-parser为express框架的中间件,其作用就是对post请求的请求体进行解析。
下载使用:
cnpm install body-parser
bodyParser.json( )与bodyParser.urlencoded( )
- limit参数(json):控制请求体最大尺寸
- extended参数(urlencoded):
extended: false
:表示使用系统模块querystring来处理,也是官方推荐的
extended: true
:表示使用第三方模块qs来处理
从功能性来讲,qs比querystring要更强大,所以这里可以根据项目的实际需求来考虑
详见:https://github.com/expressjs/body-parser/#extended
References
express-session模块
设置Cookie,app.use(session({secret: 'secret key'}));
当参数为secret时候,通过设置的secret字符串,来计算hash值并放在cookie中,使产生的signedCookie防篡改
还有其他的参数:
- name: 设置cookie中,保存session的字段名称,默认为connect.sid
- store: session的存储方式,默认为存放在内存中,我们可以自定义redis等
- genid: 生成一个新的session_id时,默认为使用uid2这个npm包
- rolling: 每个请求都重新设置一个cookie,默认为false
- resave: 即使session没有被修改,也保存session值,默认为true
- saveUninitialized:强制未初始化的session保存到数据库
- secret: 通过设置的secret字符串,来计算hash值并放在cookie中,使产生的signedCookie防篡改
- cookie : 设置存放sessionid的cookie的相关选项
评论区