常用第三方包汇总（持续更新）

目录

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 国际化包

1.23 vue-ls

1.24 antV

1.24.1 G2可扩展的可视化图形语法

1.24.2 移动端的可视化解决方案

1.25 viser-vue

1.26 vue-apexcharts

1.27 vue-photo-preview

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 moment日期处理

(1) 安装 npm install moment

(2) 使用文档 文档 | Moment.js 中文网

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" // 出口文件名 } }

    官网地址: 概念 | webpack 中文文档

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还集成了其余很多功能,具体可见其官网地址: Lodash 简介 | Lodash 中文文档 | Lodash 中文网

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

• BigInt - JavaScript | MDN

• 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) 具体使用 详见官网:Element - The world's most popular Vue UI framework

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	单元格是否要自适应宽度	Boolean	true / false	true
bookType	导出文件类型	String	xlsx, csv, txt, more	xlsx

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表示语言包中的属性名

1.23 vue-ls

Vue插件，用于从Vue上下文中使用本地Storage，会话Storage和内存Storage

（1）安装

NPM
npm install vue-ls --save

YARN
yarn add vue-ls

（2）使用

import Storage from 'vue-ls';
 
options = {
  namespace: 'vuejs__', // key键前缀
  name: 'ls', // 命名Vue变量.[ls]或this.[$ls],
  storage: 'local', // 存储名称: session, local, memory
};
 
Vue.use(Storage, options);
// 或 Vue.use(Storage);
 
new Vue({
    el: '#app',
    mounted: function() {
        Vue.ls.set('foo', 'boo');
        // 设置有效期
        Vue.ls.set('foo', 'boo', 60 * 60 * 1000); //有效1小时
        Vue.ls.get('foo');
        Vue.ls.get('boo', 10); // 如果没有设置boo返回默认值10 
        
        let callback = (val, oldVal, uri) => {
          console.log('localStorage change', val);
        } 
        
        Vue.ls.on('foo', callback) //侦查改变foo键并触发回调 
        Vue.ls.off('foo', callback) //不侦查
        
        Vue.ls.remove('foo'); // 移除
    }
});

上下文使用this.$ls

全局使用Vue.ls 

（3）api使用

• Vue.ls.get(name, def)  // name: 需要返回的storage的值， def默认为null，未设置则返回name
• Vue.ls.set(name, value, expire) // name: 需要设置的属性名，需要设置的属性值，value会转为JSON，expire默认为null，表示设置时间
• Vue.ls.remove(name)
• Vue.ls.clear() 清除storage
• Vue.ls.on(name, callback) 持续监听 name 在其他标签上的更改，更改时触发 callback , 传递以下参数：
  • newValue: 当前storage中 name , 从持久化的JSON中解析
  • oldValue: 旧的storage中 name , 从持久化的JSON中解析
  • url: 修改来自选项卡的URL

• Vue.ls.off(name, callback)

  • 删除以前的侦听器 Vue.ls.on(name, callback)

1.24 antV

蚂蚁集团数据可视化

1.24.1 G2可扩展的可视化图形语法

（1）安装

npm install @antv/g2 --save

（2） 引入

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'c1',
  width: 600,
  height: 300,
});

（3）基本使用

创建div图标容器

<div class="container"></div>

 编写图标绘制代码

• new Chart() 创建 Chart 图表对象，指定图表所在的容器 id、图表的宽高、边距等信息；
• chart.data() 载入图表数据源；
• 使用图形语法进行图表的绘制；
• chart.render() 渲染图表。

示例：

import { Chart } from '@antv/g2';

const data = [
  { year: '1951 年', sales: 38 },
  { year: '1952 年', sales: 52 },
  { year: '1956 年', sales: 61 },
  { year: '1957 年', sales: 145 },
  { year: '1958 年', sales: 48 },
  { year: '1959 年', sales: 38 },
  { year: '1960 年', sales: 38 },
  { year: '1962 年', sales: 38 },
];
const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

chart.data(data);
chart.scale('sales', {
  nice: true,
});

chart.tooltip({
  showMarkers: false
});
chart.interaction('active-region');

chart.interval().position('year*sales');

chart.render();

在图表容器被销毁时，总是应调用 chart.destroy() 以销毁实例释放资源，避免内存泄漏。 

1.24.2 F2移动端的可视化解决方案

（1）安装

npm install @antv/f2 --save

（2）引入

import F2 from '@antv/f2';

 （3）基本使用

在页面上创建一个 <canvas> 并指定 id：

<canvas id="myChart" width="400" height="260"></canvas>

创建 <canvas> 标签后，我们就可以进行简单的图表绘制:

• 创建 Chart 图表对象，指定图表 ID、指定图表的宽高、边距等信息；
• 载入图表数据源；
• 使用图形语法进行图表的绘制；
• 渲染图表。

示例：

// F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

// Step 1: 创建 Chart 对象
const chart = new F2.Chart({
  id: 'myChart',
  pixelRatio: window.devicePixelRatio // 指定分辨率
});

// Step 2: 载入数据源
chart.source(data);

// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart.interval().position('genre*sold').color('genre');

// Step 4: 渲染图表
chart.render();

1.25 viser-vue

基于antV-G2的可视化引擎

（1）安装

$ npm install viser-vue

（2）引入

import { Chart, Tooltip, Edge, View, Polygon, Coord } from 'viser-vue'; 

（3）使用

数据处理

数据处理完全沿用 data-set.js 的处理。data-set 有丰富的数据处理方法，具体请参考 g2 官网的 data-set 部分.

const DataSet = require('@antv/data-set');

const ds: any = new DataSet();
const dv = ds.createView().source(data, {
  type: 'graph',
  edges: d => d.links
});

dv.transform({
  type: 'diagram.arc',
  sourceWeight: e => e.sourceWeight,
  targetWeight: e => e.targetWeight,
  weight: true,
  marginRatio: 0.3
});

图标实现

图表实现完全沿用 g2 对于图形语法的表达。

我们观察原生 g2 的语法：

const chart = new G2.Chart({
  container: 'mountNode',
  forceFit: true,
  height: window.innerHeight
});
chart.legend(false);
chart.tooltip({
  showTitle: false
});

chart.scale({
  x: {
    sync: true
  },
  y: {
    sync: true
  }
});

const edgeView = chart.view();
edgeView.source(dv.edges);
edgeView.coord('polar').reflect('y');
edgeView.axis(false);
edgeView.edge()
  .position('x*y')
  .shape('arc')
  .color('source')
  .opacity(0.5)
  .tooltip('source*target*value');

const nodeView = chart.view();
nodeView.source(dv.nodes);
nodeView.coord('polar').reflect('y');
nodeView.axis(false);
nodeView.polygon()
  .position('x*y')
  .color('id')
  .label('name', {
    labelEmit: true,
    textStyle: {
      fill: '#8c8c8c'
    }
  });

chart.render();

1.26 vue-apexcharts

Apexcharts是一个现代的JavaScript图表库/可通过简单的API构建交互式图表和可视化。

Vue Apexcharts是ApexCharts的Vue.js组件。

 （1）安装

npm i apexcharts
npm i vue-apexcharts

（2）引入并注册

import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)

Vue.component('apexchart', VueApexCharts)

 （3）使用

Template

<template>
   <div>
     <apexchart width="500" type="bar" :options="chartOptions" :series="series"></apexchart>
   </div>
</template>

data

export default {
    data: function() {
      return {
        chartOptions: {
          chart: {
            id: 'vuechart-example'
          },
          xaxis: {
            categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
          }
        },
        series: [{
          name: 'series-1',
          data: [30, 40, 35, 50, 49, 60, 70, 91]
        }]
      }
    },
};

官网地址（外文网，速度较慢）：ApexCharts.js - Open Source JavaScript Charts for your website 

1.27 vue-photo-preview

多图预览插件

（1）安装

npm install vue-photo-preview --save

（2）引入

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)

（3）配置（可选）

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
var option = {
  maxSpreadZoom: 1, // 控制预览图最大的倍数，默认是2倍，我这里改成了原图
  fullscreenEl: false, //控制是否显示右上角全屏按钮
  closeEl: false, //控制是否显示右上角关闭按钮
  tapToClose: true, //点击滑动区域应关闭图库
  shareEl: false, //控制是否显示分享按钮
  zoomEl: false, //控制是否显示放大缩小按钮
  counterEl: false, //控制是否显示左上角图片数量按钮
  arrowEl: true,  //控制如图的左右箭头（pc浏览器模拟手机时）
  tapToToggleControls: true, //点击应切换控件的可见性
  clickToCloseNonZoomable: true //点击图片应关闭图库，仅当图像小于视口的大小时
}
Vue.use(preview, option)

（4）使用

<img src="xxx.jpg" large="xxx_2x.jpg" preview="1" preview-text="描述">
// preview相同表示同一组

 mounted () {
    this.$previewRefresh()
    this.$preview.on('close', () => {
      this.isShow = false
    })
  }

如果图片是异步生成的，在图片数据更新后调用,其实就是后台的图片获取的时候添加,图片如果是异步获取，那么在获取之后要使用this.$previewRefresh()

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

2.1 ExpressWeb 开发框架

(1) 官网地址 Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网

(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)