尼采般地抒情

公告栏

此网站主题为本人手写主题, 主题待开源···

站点信息

文章总数目: 305
已运行时间: 1063
目录
  1. express框架
    1. express路由结构化
    2. express里http.createServer
    3. express 常用 API
      1. use 方法和中间件
      2. get 方法
      3. set 方法
      4. response 对象
      5. request 对象
      6. 搭建 HTTPS 环境
    4. express 写 API 接口
      1. References
      2. response 对象 json 方法写接口
      3. js 使用接口的一些方法
      4. 跨域问题的解决
      5. Postman 测试API工具
    5. body-parser模块
      1. bodyParser.json( )与bodyParser.urlencoded( )
      2. References
    6. express-session模块

尼采般地抒情

尼采般地抒情

公告栏

此网站主题为本人手写主题, 主题待开源···

站点信息

文章总数目: 305
已运行时间: 1063

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的相关选项

评论区

Twikoo giscus