目录
1.9.1 amfe-flexible 动态设置 REM 基准值
1.11 lodash JavaScript 实用工具库(防抖优化组件)
1.12 json-bigint处理大数字(超过js精度的数字)问题
1.16 excel导出 xlsx file-saver 和 script-loader
2.6.1 @hapi/joi表单中携带的每个数据项,定义验证规则
2.6.2 @escook/express-joi实现自动对表单数据进行验证的功能
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 只用来表示整数,没有位数的限制,任何位数的整数都可以精确表示。参考链接:
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)