IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 常用第三方包汇总(持续更新) -> 正文阅读

[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 只用来表示整数,没有位数的限制,任何位数的整数都可以精确表示。参考链接:

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) 参数介绍

参数

参数说明类型可选值默认值
header导出数据的表头Array/[]
data导出的具体数据Array/[[]]
filename导出文件名String/excel-list
autoWidth单元格是否要自适应宽度Booleantrue / falsetrue
bookType导出文件类型Stringxlsx, csv, txt, morexlsx

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)
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-08-13 11:55:09  更:2021-08-13 11:58:09 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/26 16:49:04-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计