[JavaScript知识库]常用第三方包汇总（持续更新）

目录

1 前端开发常用第三方包

1.1 moment日期处理

1.2 then-fs读取文件内容

1.3 webpack打包代码

1.3.1 加载器

1.3.2 插件

1.3.3 webpack-dev-server自动刷新

1.4 axios发送ajax请求的库

1.5 bootstrap前端开发框架

1.6 vue-routerr路由系统

1.7 vant组件库,移动端开发框架

1.8 postcss postcss-pxtorem

1.9 移动端REM适配包

1.9.1 amfe-flexible 动态设置 REM 基准值

1.10 dayjs处理相对时间

1.11 lodash JavaScript 实用工具库(防抖优化组件)

1.12 json-bigint处理大数字(超过js精度的数字)问题

1.13 cropperjs 图片裁切

1.14 element-ui 前端开发框架(pc端常用)

1.15 xlsx excel导入

1.16 excel导出 xlsx file-saver 和 script-loader

1.17 cos-js-sdk-v5上传文件(图片上传)

1.18 qrcode生成二维码

1.19 vue-print-nb打印

1.20 echarts可视化图表

1.21 screenfull全屏插件

1.22 vue-i18n 国际化包

2 node.js后端开发第三方包

2.1 ExpressWeb 开发框架

2.2 express-session

2.3 express-jwt

2.4 cors配置跨域

2.5 bcryptjs加密处理

2.6 表单验证第三方包

2.6.1 @hapi/joi表单中携带的每个数据项，定义验证规则

2.6.2 @escook/express-joi实现自动对表单数据进行验证的功能

2.7 multer解析表单数据

1 前端开发常用第三方包

1.1 moment日期处理

(1) 安装 npm install moment

(2) 使用文档 http://momentjs.cn/docs/

1.2 then-fs读取文件内容

(1) 安装 npm install then-fs

(2) 基本使用

?import thenFs from 'then-fs'
?thenFs.readFile('./files/1.txt', 'utf8').then((r1) => {console.log(r1)})

1.3 webpack打包代码

(1) 安装 yarn add webpack webpack-cli -D

(2) 基本功能

• less/sass -> css

• ES6/7/8 -> ES5

• html/css/js -> 压缩合并

(3) 基本使用

• package.json 配置信息:

  • scripts: { "build": "webpack" }

• yarn build(npm run build) 执行打包命令(重复打包相同命令)

(4) webpack-入口和出口配置

• 默认入口: ./src/index.js

• 默认出口: ./dist/main.js

• webpack配置更改入口和出口webpack.config.js(默认):

  • 新建src并列处, webpack.config.js

  • 填入配置项

  • const path = require("path")

    module.exports = { entry: "./src/main.js", // 入口 output: { path: path.join(__dirname, "dist"), // 出口路径 filename: "bundle.js" // 出口文件名 } }

    官网地址: https://webpack.docschina.org/concepts/

1.3.1 加载器

(1) style-loader 和 css-loader

• 基本使用: 可让webpack处理其他类型的文件, 打包到js中

• 安装 yarn add style-loader css-loader -D

• webpack.config.js配置

• ?const HtmlWebpackPlugin = require('html-webpack-plugin')
  ??
  ?module.exports = {
  ? ? ?// ...其他代码
  ? ? ?module: { 
  ? ? ? ? ?rules: [ // loader的规则
  ? ? ? ? ?  {
  ? ? ? ? ? ? ?test: /\.css$/, // 匹配所有的css文件
  ? ? ? ? ? ? ?// use数组里从右向左运行
  ? ? ? ? ? ? ?// 先用 css-loader 让webpack能够识别 css 文件的内容并打包
  ? ? ? ? ? ? ?// 再用 style-loader 将样式, 把css插入到dom中
  ? ? ? ? ? ? ?use: [ "style-loader", "css-loader"]
  ? ? ? ? ?  }
  ? ? ? ?  ]
  ? ?  }
  ?}

(2) less 和 less-loader 处理less文件

• 安装 yarn add less less-loader -D

• webpack.config.js 配置:

• ?module: {
  ? ?rules: [ // loader的规则
  ? ? ?// ...省略其他
  ? ?  {
  ? ?      test: /\.less$/,
  ? ?      // 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
  ? ? ? ? ?use: [ "style-loader", "css-loader", 'less-loader']
  ? ?  }
  ?  ]
  ?}

(3) url-loader 和 file-loader处理图片文件(webpack5版本不需要安装第三方包)

• 安装 yarn add url-loader file-loader -D

• webpack.config.js 配置:

• ?{
  ? ?test: /\.(png|jpg|gif|jpeg)$/i,
  ? ?use: [
  ? ?  {
  ? ? ? ?loader: 'url-loader', // 匹配文件, 尝试转base64字符串打包到js中
  ? ? ? ?// 配置limit, 超过8k, 不转, file-loader复制, 随机名, 输出文件
  ? ? ? ?options: {
  ? ? ? ? ?limit: 8 * 1024,
  ? ? ?  },
  ? ?  },
  ?  ],
  ?}

(4) babel-loader @babel/core @babel/preset-env让webpack对高版本 的js代码, 降级处理后打包

• 安装 yarn add -D babel-loader @babel/core @babel/preset-env

• 配置规则

• ?module: {
  ? ?rules: [
  ? ?  {
  ? ? ? ? ?test: /\.js$/,
  ? ? ? ? ?exclude: /(node_modules|bower_components)/,
  ? ? ? ? ?use: {
  ? ? ? ? ? ? ?loader: 'babel-loader',
  ? ? ? ? ? ? ?options: {
  ? ? ? ? ? ? ? ? ?presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
  ? ? ? ? ? ?  }
  ? ? ? ?  }
  ? ?  }
  ?  ]
  ?}

1.3.2 插件

(1) html-webpack-plugin插件, 让webpack打包后生成html文件并自动引入打包后的js

• 安装 yarn add html-webpack-plugin -D

• webpack.config.js配置:

• ?// 引入自动生成 html 的插件
  ?const HtmlWebpackPlugin = require('html-webpack-plugin')
  ??
  ?module.exports = {
  ? ? ?// ...省略其他代码
  ? ? ?plugins: [
  ? ? ? ? ?new HtmlWebpackPlugin({
  ? ? ? ? ? ? ?template: './public/index.html' // 以此为基准生成打包后html文件
  ? ? ? ?  })
  ? ?  ]
  ?}

1.3.3 webpack-dev-server自动刷新

(1) 基本使用: 启动本地服务, 可实时更新修改的代码, 打包变化代码到内存中, 然后直接提供端口和网页访问

(2) 安装 yarn add webpack-dev-server -D

(3) 配置(package.json)

?scripts: {
?        "build": "webpack",
?        "serve": "webpack serve"
?    }

配置(webpack.config.js)

?module.exports = {
? ? ?// ...其他配置
? ? ?devServer: {
? ? ? ?open: true,
? ? ? ?port: 3000 // 端口号
? ?  }
?}

1.4 axios发送ajax请求的库

(1) 安装 npm install axios

(2) 基本使用

axios({
  method: '请求方式', // get post
  url: '请求地址',
  data: {    // 拼接到请求体的参数,  post请求的参数
    xxx: xxx,
  },
  params: {  // 拼接到请求行的参数, get请求的参数
   	xxx: xxx 
  }
}).then(res => {
  console.log(res.data) // 后台返回的结果
}).catch(err => {
  console.log(err) // 后台报错返回
})

1.5 bootstrap前端开发框架

(1) 安装 yarn add bootstrap

(2) main.js引入

import "bootstrap/dist/css/bootstrap.css"

(3) 具体使用: 详见文档

1.6 vue-routerr路由系统

(1) 安装 yarn add vue-router

(2) 基本使用(main.js或单独router文件)

• 导入路由 import VueRouter from 'vue-router'

• 使用路由插件 Vue.use(VueRouter)

• 创建路由规则数组

• const routes = [
    {
      path: "/find",
      component: Find
    },
    {
      path: "/my",
      component: My
    },
    {
      path: "/part",
      component: Part,
      redirect: "/find" // 重定向
    }
  ]
  

• 创建路由对象 - 传入规则 const router = new VueRouter({ routes, mode: "history" }) // mode为路由模式,也可以是hash

• 关联到vue实例 new Vue({ router })

• components换成router-view(路由模块显示标签) <router-view></router-view>

1.7 vant组件库,移动端开发框架

(1) 安装 npm i vant -D

(2) 导入使用(全局导入)

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

(3) 具体使用: 详见文档

1.8 postcss postcss-pxtorem

(1) 介绍

postcss(配合webpack翻译css代码) postcss-pxtorem(配合webpack, 自动把px转成rem)

(2) 安装 yarn add postcss postcss-pxtorem@5.1.1

(3) 配置

• 新建postcss.config.js – 设置相关配置

• module.exports = {
    plugins: {
      'postcss-pxtorem': {
        // 能够把所有元素的px单位转成Rem
        // rootValue: 转换px的基准值。
        // 例如一个元素宽是75px，则换成rem之后就是2rem。
        rootValue: 37.5,
        propList: ['*']
      }
    }
  }
  

• 重启服务器, 再次观察Vant组件是否适配

1.9 移动端REM适配包

1.9.1 amfe-flexible 动态设置 REM 基准值

(1) 安装 yarn add amfe-flexible / npm i amfe-flexible

(2) 导入(main.js) import 'amfe-flexible'

1.9.2 postcss-pxtorem 将 px 转为 rem

(1) 安装 yarn add -D postcss-pxtorem / npm install postcss-pxtorem -D

(2) 配置(项目根目录创建.postcssrc.js文件)

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

(3) 注意 该插件**不能转换行内样式中的 `px

1.10 dayjs处理相对时间

(1) 安装 npm i dayjs

(2) 基本使用

import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'

dayjs.locale('zh-cn')
console.log(dayjs().format('YYYY-MM-DD'))

(3) 导入(main.js) import './utils/dayjs'

(4) 定义过滤器

import Vue from 'vue'
import dayjs from 'dayjs'

// 加载中文语言包
import 'dayjs/locale/zh-cn'

import relativeTime from 'dayjs/plugin/relativeTime'

// 配置使用处理相对时间的插件
dayjs.extend(relativeTime)

// 配置使用中文语言包
dayjs.locale('zh-cn')

// 全局过滤器：处理相对时间
Vue.filter('relativeTime', value => {
    return dayjs().to(dayjs(value))
})

1.11 lodash JavaScript 实用工具库(防抖优化组件)

(1) 安装 yarn add lodash / npm i lodash

(2) 防抖按需导入 import { debounce } from "lodash"

(3) 基本使用

// debounce 函数
// 参数1：函数
// 参数2：防抖时间
// 返回值：防抖之后的函数，和参数1功能是一样的
handler: debounce(function (val) {
    this.loadSearchSuggestion(val)
}, 1000)

(4) lodash还集成了其余很多功能,具体可见其官网地址: https://www.lodashjs.com/

1.12 json-bigint处理大数字(超过js精度的数字)问题

(1) 安装 npm i json-bigint

(2) 基本使用

const jsonStr = '{ "art_id": 1245953273786007552 }'

console.log(JSON.parse(jsonStr)) // 1245953273786007600
// JSON.stringify()

// JSONBig 可以处理数据中超出 JavaScript 安全整数范围的问题
console.log(JSONBig.parse(jsonStr)) // 把 JSON 格式的字符串转为 JavaScript 对象

// 使用的时候需要把 BigNumber 类型的数据转为字符串来使用
console.log(JSONBig.parse(jsonStr).art_id.toString()) // 1245953273786007552

console.log(JSON.stringify(JSONBig.parse(jsonStr)))

console.log(JSONBig.stringify(JSONBig.parse(jsonStr))) // 把 JavaScript 对象 转为 JSON 格式的字符串转

(3) 处理服务器返回的大数字(axios为例)

import axios from 'axios'

import jsonBig from 'json-bigint'

var json = '{ "value" : 9223372036854775807, "v2": 123 }'

console.log(jsonBig.parse(json))

const request = axios.create({
  baseURL: 'http://ttapi.research.itcast.cn/', // 接口基础路径

  // transformResponse 允许自定义原始的响应数据（字符串）
  transformResponse: [function (data) {
    try {
      // 如果转换成功则返回转换的数据结果
      return jsonBig.parse(data)
    } catch (err) {
      // 如果转换失败，则包装为统一数据格式并返回
      return {
        data
      }
    }
  }]
})

export default request

(4) 扩展 ES2020 BigInt ES2020 引入了一种新的数据类型 BigInt（大整数），来解决这个问题。BigInt 只用来表示整数，没有位数的限制，任何位数的整数都可以精确表示。参考链接:

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt

• http://es6.ruanyifeng.com/#docs/number#BigInt-%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B

1.13 cropperjs 图片裁切

(1) 安装 npm install cropperjs

(2) 引入css js(main.js)

import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'

(3) 在mounted中初始化(vue生命周期)

const image = this.$refs.img
const cropper = new Cropper(image, {
    aspectRatio: 16 / 9,
    crop (event) {
        console.log(event.detail.x)
        console.log(event.detail.y)
        console.log(event.detail.width)
        console.log(event.detail.height)
        console.log(event.detail.rotate)
        console.log(event.detail.scaleX)
        console.log(event.detail.scaleY)
    }
})
console.log(cropper)

(4) 配置cropperjs

const cropper = new Cropper(image, {
    viewMode: 1, // 只能在裁剪的图片范围内移动
    dragMode: 'move', // 画布和图片都可以移动
    aspectRatio: 1, // 裁剪区默认正方形
    autoCropArea: 1, // 自动调整裁剪图片
    cropBoxMovable: false, // 禁止裁剪区移动
    cropBoxResizable: false, // 禁止裁剪区缩放
    background: false // 关闭默认背景
})

(5) 裁切方式一:服务端

• 获取cropper实例

• this.cropper = new Cropper(image, {
  ? ? ? viewMode: 1, // 只能在裁剪的图片范围内移动
  ? ? ? dragMode: 'move', // 画布和图片都可以移动
  ? ? ? aspectRatio: 1, // 裁剪区默认正方形
  ? ? ? autoCropArea: 1, // 自动调整裁剪图片
  ? ? ? cropBoxMovable: false, // 禁止裁剪区移动
  ? ? ? cropBoxResizable: false, // 禁止裁剪区缩放
  ? ? ? background: false // 关闭默认背景
  ? ? })

• 给确定注册点击事件，在事件函数中获取参数

• <span @click="confirm">完成</span>
  
  confirm () {
      console.log(this.cropper.getData())
  }
  

(6) 裁切方式二:客户端

confirm () {
      // console.log(this.cropper.getData())
      this.cropper.getCroppedCanvas().toBlob(blob => {
        console.log(blob)
      })
    }

1.14 element-ui 前端开发框架(pc端常用)

(1) 安装 npm i element-ui -S

(2) 全局引入(main.js)

import ElementUI from 'element-ui'
// 引入css样式
import 'element-ui/lib/theme-chalk/index.css'

// 全局注册组件
Vue.use(ElementUI)

(3) 按需引入

• 安装 babel-plugin-component 第三方包 npm install babel-plugin-component -D

• 配置 .babelrc

{

"presets": [["es2015", { "modules": false }]],
"plugins": [
		[
			"component",
			{
			"libraryName": "element-ui",
			"styleLibraryName": "theme-chalk"
			}
		]
	]
}

• 引入使用 import { Button, Select } from 'element-ui'

(4) 具体使用 详见官网:https://element.eleme.cn/#/zh-CN/

1.15 xlsx excel导入

(1) 安装 npm i xlsx

(2) 具体使用

<template>
??<div?class="upload-excel">
????<div?class="btn-upload">
?      <el-button :loading="loading" size="mini" type="primary" @click="handleUpload">
?        点击上传
?      </el-button>
?    </div>
?    <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
????<div?class="drop"?@drop="handleDrop"?@dragover="handleDragover"?@dragenter="handleDragover">
?      <i class="el-icon-upload" />
?      <span>将文件拖到此处</span>
?    </div>
  </div>
</template>

<script>
// script内容详见 https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/UploadExcel/index.vue
</script>

<style?scoped?lang="scss">
.upload-excel {
  display: flex;
  justify-content: center;
   margin-top: 100px;
   .excel-upload-input{
?       display: none;
?        z-index: -9999;
?     }
   .btn-upload , .drop{
?      border: 1px dashed #bbb;
?      width: 350px;
?      height: 160px;
?      text-align: center;
?      line-height: 160px;
   }
   .drop{
?       line-height: 80px;
?       color: #bbb;
?      i {
?        font-size: 60px;
?        display: block;
?      }
   }
}
</style>

(3) 外部引用组件

<upload-excel :on-success="success" />

async success({ header, results }) { 具体逻辑 }

1.16 excel导出 xlsx file-saver 和 script-loader

(1) 安装

npm install xlsx file-saver -S npm install script-loader -S -D

(2) 基本使用

import('@/vendor/Export2Excel').then(excel => {
  excel.export_json_to_excel({
    header: tHeader, //表头 必填
    data, //具体数据 必填
    filename: 'excel-list', //非必填
    autoWidth: true, //非必填
    bookType: 'xlsx' //非必填
  })
})

(3) 参数介绍

参数

1.17 cos-js-sdk-v5上传文件(图片上传)

(1) 安装 npm i cos-js-sdk-v5 --save

(2) 具体使用 参见element-ui upload组件

1.18 qrcode生成二维码

(1) 安装 npm i qrcode

(2) 基本用法 QrCode.toCanvas(dom, info)

(3) 具体使用

<canvas ref="myCanvas" />

QrCode.toCanvas(this.$refs.myCanvas, url)

1.19 vue-print-nb打印

(1) 安装 npm i vue-print-nb

(2) 导入(main.js)

import Print from 'vue-print-nb'
Vue.use(Print)

(3) 基本使用

  <el-row type="flex" justify="end">
          <el-button v-print="printObj" size="small" type="primary">打印</el-button>
  </el-row>
   printObj: {
        id: 'myPrint'
   }

1.20 echarts可视化图表

(1) 安装 npm i echarts

(2) 全局引入 import * as echarts from 'echarts'

(3) 基本使用

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});

1.21 screenfull全屏插件

(1) 安装 npm i screenfull

(2) 导入 import ScreenFull from 'screenfull'

(3) 基本使用

<template>
  <!-- 放置一个图标 -->
  <div>
    <!-- 放置一个svg的图标 -->
    <svg-icon icon-class="fullscreen" style="color:#fff; width: 20px; height: 20px" @click="changeScreen" />
  </div>
</template>

<script>
import ScreenFull from 'screenfull'
export default {
  methods: {
    //   改变全屏
    changeScreen() {
      if (!ScreenFull.isEnabled) {
        // 此时全屏不可用
        this.$message.warning('此时全屏组件不可用')
        return
      }
      // document.documentElement.requestFullscreen()  原生js调用
      //   如果可用 就可以全屏
      ScreenFull.toggle()
    }
  }
}
</script>

1.22 vue-i18n 国际化包

(1) 安装 npm i vue-i18n

(2) 新建lang/index.js

import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的包
import Cookie from 'js-cookie' // 引入cookie包
import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包
Vue.use(VueI18n) // 全局注册国际化包
export default new VueI18n({
  locale: Cookie.get('language') || 'zh', // 从cookie中获取语言类型 获取不到就是中文
  messages: {
    en: {
      ...elementEN // 将饿了么的英文语言包引入
    },
    zh: {
      ...elementZH // 将饿了么的中文语言包引入
    }
  }
})

(3) main.js 挂载

// 设置element为当前的语言
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

(4) 具体使用$t(key) key表示语言包中的属性名

2 node.js后端开发第三方包

2.1 ExpressWeb 开发框架

(1) 官网地址 http://www.expressjs.com.cn/

(2) 作用: 快速搭建搭建web网站服务器和api接口服务器

(3) 基本使用

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

2.2 express-session

(1) 基本使用(中间件在Express中使用 Session认证)

// 导入 express 模块
const express = require('express')
// 创建 express 的服务器实例
const app = express()
const session = require('express-session')

// 配置session中间件
app.use(session({
	secret: 'keyboard', // secret属性的值可以是任意字符串
	resave: false, // 固定写法
	saveUninitialized: true // 固定写法
}))

// 向session中存数据(登陆api接口)
app.post('/api/login', (req, res) => {
  // 判断用户提交的登录信息是否正确
  if (req.body.username !== 'admin' || req.body.password !== '000000') {
    return res.send({ status: 1, msg: '登录失败' })
  }

  // TODO_02：请将登录成功后的用户信息，保存到 Session 中
  // 注意：只有成功配置了 express-session 这个中间件之后，才能够通过 req 点出来 session 这个属性
  req.session.user = req.body // 用户的信息
  req.session.islogin = true // 用户的登录状态

  res.send({ status: 0, msg: '登录成功' })
})

// 从session中取数据
app.get('/api/username', (req, res) => {
  // TODO_03：请从 Session 中获取用户的名称，响应给客户端
  if (!req.session.islogin) {
    return res.send({ status: 1, msg: 'fail' })
  }
  res.send({
    status: 0,
    msg: 'success',
    username: req.session.user.username,
  })
})

// 退出登录的接口
app.post('/api/logout', (req, res) => {
  // TODO_04：清空 Session 信息
  req.session.destroy()
  res.send({
    status: 0,
    msg: '退出登录成功',
  })
})

// 调用 app.listen 方法，指定端口号并启动web服务器
app.listen(80, function () {
  console.log('Express server running at http://127.0.0.1:80')
})

2.3 express-jwt

(1) 基本使用(在Express中使用 JWT)

(2) 安装 npm install jsonwebtoken express-jwt

// jsonwebtoken生成token字符串包

// 导入 express 模块
const express = require('express')
// 创建 express 的服务器实例
const app = express()

// TODO_01：安装并导入 JWT 相关的两个包，分别是 jsonwebtoken 和 express-jwt
const jwt = require('jsonwebtoken')
const expressJWT = require('express-jwt')

// 允许跨域资源共享
const cors = require('cors')
app.use(cors())

// 解析 post 表单数据的中间件
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))

// TODO_02：定义 secret 密钥，建议将密钥命名为 secretKey
const secretKey = 'itheima No1 ^_^'

// TODO_04：注册将 JWT 字符串解析还原成 JSON 对象的中间件
// 注意：只要配置成功了 express-jwt 这个中间件，就可以把解析出来的用户信息，挂载到 req.user 属性上
app.use(expressJWT({ secret: secretKey }).unless({ path: [/^\/api\//] }))

// 登录接口
app.post('/api/login', function (req, res) {
  // 将 req.body 请求体中的数据，转存为 userinfo 常量
  const userinfo = req.body
  // 登录失败
  if (userinfo.username !== 'admin' || userinfo.password !== '000000') {
    return res.send({
      status: 400,
      message: '登录失败！',
    })
  }
  // 登录成功
  // TODO_03：在登录成功之后，调用 jwt.sign() 方法生成 JWT 字符串。并通过 token 属性发送给客户端
  // 参数1：用户的信息对象
  // 参数2：加密的秘钥
  // 参数3：配置对象，可以配置当前 token 的有效期
  // 记住：千万不要把密码加密到 token 字符中
  const tokenStr = jwt.sign({ username: userinfo.username }, secretKey, { expiresIn: '30s' })
  res.send({
    status: 200,
    message: '登录成功！',
    token: tokenStr, // 要发送给客户端的 token 字符串
  })
})

// 这是一个有权限的 API 接口
app.get('/admin/getinfo', function (req, res) {
  // TODO_05：使用 req.user 获取用户信息，并使用 data 属性将用户信息发送给客户端
  console.log(req.user)
  res.send({
    status: 200,
    message: '获取用户信息成功！',
    data: req.user, // 要发送给客户端的用户信息
  })
})

// TODO_06：使用全局错误处理中间件，捕获解析 JWT 失败后产生的错误
app.use((err, req, res, next) => {
  // 这次错误是由 token 解析失败导致的
  if (err.name === 'UnauthorizedError') {
    return res.send({
      status: 401,
      message: '无效的token',
    })
  }
  res.send({
    status: 500,
    message: '未知的错误',
  })
})

// 调用 app.listen 方法，指定端口号并启动web服务器
app.listen(8888, function () {
  console.log('Express server running at http://127.0.0.1:8888')
})

2.4 cors配置跨域

(1) 安装 npm i cors@2.8.5

(2) 导入并配置 cors 中间件

// 导入 cors 中间件 
const cors = require('cors') 
// 将 cors 注册为全局中间件 
app.use(cors())

2.5 bcryptjs加密处理

(1) 安装 npm i bcryptjs@2.4.3

(2) 导入const bcrypt = require('bcryptjs')

(3) 使用

// 对用户的密码,进行 bcrype 加密，返回值是加密之后的密码字符串

userinfo.password = bcrypt.hashSync(userinfo.password, 10)

2.6 表单验证第三方包

2.6.1 @hapi/joi表单中携带的每个数据项，定义验证规则

(1) 安装 npm install @hapi/joi@17.1.0

(2) 导入 const joi = require('@hapi/joi')

(3) 常用校验方法

• string() 值必须是字符串

• alphanum() 值只能是包含 a-zA-Z0-9 的字符串

• min(length) 最小长度

• max(length) 最大长度

• required() 值是必填项，不能为 undefined

• pattern(正则表达式) 值必须符合正则表达式的规则

(4) 使用

const username = joi.string().alphanum().min(1).max(10).required()

2.6.2 @escook/express-joi实现自动对表单数据进行验证的功能

(1) 安装 npm i @escook/express-joi

(2) 导入 const expressJoi = require('@escook/express-joi')

(3) 使用 router.post('/reguser', expressJoi(reg_login_schema), userHandler.regUser)

// reg_login_schema为@hapi/joi校验规则模组,userHandler.regUser为导入用户路由处理函数模块

2.7 multer解析表单数据

(1) 安装 npm i multer

(2) 基础使用

 // 导入解析 formdata 格式表单数据的包 
const multer = require('multer') 

// 导入处理路径的核心模块 
const path = require('path') 

// 创建 multer 的实例对象，通过 dest 属性指定文件的存放路径 
const upload = multer({ dest: path.join(__dirname, '../uploads') }) 
// 发布新文章的路由 
// upload.single() 是一个局部生效的中间件，用来解析 FormData 格式的表单数据 
// 将文件类型的数据，解析并挂载到 req.file 属性中 
// 将文本类型的数据，解析并挂载到 req.body 属性中 
router.post('/add', upload.single('cover_img'), article_handler.addArticle)