工具库

前言

补充一些官方文档中没有的，但是实际开发中最好需要了解的内容

1.axios

1.1 封装

import axios from "axios";
import { Message, MessageBox } from "element-ui";
import { getToken } from "@/util/auth";

// 创建axios实例
let baseURL = "/web-vue2x/";
try {
  baseURL = process ? process.env?.BASE_API : "/web-vue2x/";
} catch (e) {}
const service = axios.create({
  baseURL,
  timeout: 5000, // 请求超时时间
});

// request拦截器
service.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
      // config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    return config;
  },
  (error) => {
    // Do something with request error
    console.log(error); // for debug
    Promise.reject(error);
  }
);

// response 拦截器
service.interceptors.response.use(
  (response) => {
    /**
     * code为非20000是抛错 可结合自己业务进行修改
     */
    const res = response;
    if (res.status !== 200) {
      Message({
        message: res.data.message,
        type: "error",
        duration: 5 * 1000,
      });
      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
      if (
        res.status === 50008 ||
        res.status === 50012 ||
        res.status === 50014
      ) {
        MessageBox.confirm(
          "你已被登出，可以取消继续留在该页面，或者重新登录",
          "确定登出",
          {
            confirmButtonText: "重新登录",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(() => {
          location.reload(); // 为了重新实例化vue-router对象 避免bug
        });
      }
    } else {
      return Promise.resolve(res.data.result);
    }
  },
  (error) => {
    console.log("err" + error); // for debug
    Message({
      message: error.message,
      type: "error",
      duration: 5 * 1000,
    });
    return Promise.reject(error);
  }
);

export default service;

1.2 配置

import axios from "axios"

export default {
  install(Vue) {
    Vue.prototype.$axios = axios
  },
}

1.3 get 请求

刷新

全屏/自适应

1.4 post 请求

后端拿不到数据

axios?.post(url, { id: 1 }) //后台控制器接收到的 id 为 null

原因是：axios 使用 post 携带参数请求默认使用 application/json

• 改进 1:使用 qs

  刷新

  全屏/自适应

  后台接收参数用 req.body

• 改进 2:使用 URLSearchParams

  刷新

  全屏/自适应

  后台接收参数用 req.body（服务器段给接收到的参数加上@requestBody）

• 改进 3：使用请求地址中的参数"id=1&name=2"

  刷新

  全屏/自适应

  后台接收参数用 chunk

1.5 delete 请求

有问题后端拿不到数据

let params = { id: 1 }
axios?.delete(url, params)

• 改进 1:使用 qs

const qs = require("qs")
axios?.delete(url, qs.stringify(params)).then()

axios({
  method: "delete",
  url,
  data: qs.stringify(params),
}).then()

后台接收参数用 req.body

• 改进 2:使用 URLSearchParams

const param = new URLSearchParams()
param.append("id", 1)
axios?.delete(url, param).then()

axios({
  method: "delete",
  url,
  data: param,
}).then()

后台接收参数用 req.body

• 改进 3：使用请求地址中的参数"id=1&name=2"

axios?.delete(url, "id=1")

axios({
    method:"delete",
    url,
    "id=1"
})

后台接收参数用 chunk

1.6 put 请求

有问题后端拿不到数据

let params = { id: 1 }
axios?.put(url, params)

• 改进 1:使用 qs

const qs = require("qs")
axios?.put(url, qs.stringify(params)).then()

axios({
  method: "put",
  url,
  data: qs.stringify(params),
}).then()

后台接收参数用 req.body

• 改进 2:使用 URLSearchParams

const param = new URLSearchParams()
param.append("id", 1)
axios?.put(url, param).then()

axios({
  method: "put",
  url,
  data: param,
}).then()

后台接收参数用 req.body

• 改进 3：使用请求地址中的参数"id=1&name=2"

axios?.put(url, "id=1")

axios({
    method:"put",
    url,
    "id=1"
})

后台接收参数用 chunk

1.7 学生管理系统

刷新

全屏/自适应

2.Moment

刷新

全屏/自适应

格式化参考表格

格式代码	说明	返回值例子
M	数字表示的月份，没有前导零	1 到 12
MM	数字表示的月份，有前导零	01 到 12
MMM	三个字母缩写表示的月份	Jan 到 Dec
MMMM	月份，完整的文本格式	January 到 December
Q	季度	1 到 4
D	月份中的第几天，没有前导零	1 到 31
DD	月份中的第几天，有前导零	01 到 31
d	星期中的第几天，数字表示 0 到 6，	0 表示周日，6 表示周六
ddd	三个字母表示星期中的第几天	Sun 到 Sat
dddd	星期几，完整的星期文本	从 Sunday 到 Saturday
w	年份中的第几周	如 42：表示第 42 周
YYYY	四位数字完整表示的年份	如：2014 或 2000
YY	两位数字表示的年份	如：14 或 98
A	大写的 AM PM	AM PM
a	小写的 am pm	am pm
HH	小时，24 小时制，有前导零	00 到 23
H	小时，24 小时制，无前导零	0 到 23
hh	小时，12 小时制，有前导零	00 到 12
h	小时，12 小时制，无前导零	0 到 12
m	没有前导零的分钟数	0 到 59
mm	有前导零的分钟数	00 到 59
s	没有前导零的秒数	1 到 59
ss	有前导零的描述	01 到 59
X	Unix 时间戳	1411572969

2.DevTools

3.lodash

• isEqual:对象比较

isEqual(newVal,oldVal)

• cloneDeep:深克隆

cloneDeep(obj)

• debounce:防抖

debounce(fn,time)

• throttle:节流

throttle(fn,time)

4.performance

performance API是 Vue 全局配置 API 中的一个，我们可以使用它来进行网页性能的追踪，我们可以在入口文件中添加：

if (process.env.NODE_ENV !== "production") {
  Vue.config.performance = true
}

来开启这一功能，该 API 功能只适用于开发模式和支持performance.mark API 的浏览器上，开启后我们可以下载Vue Performance Devtool这一 chrome 插件来查看各个组件的加载情况

从中我们可以清晰的看到页面组件在每个阶段的耗时情况，而针对耗时比较久的组件，我们便可以对其进行相应优化。

而其在 Vue 源码中主要适用了 window.performance 来获取网页性能数据，其中包含了performace.mark和performance.measure

• performance.mark 主要用于创建标记
• performance.measuer 主要用于记录两个标记的时间间隔

例如：

performance.mark("start") //创建start标记
performance.mark("end") //创建end标记
performance.measuer("output", "start", "ent") //计算两者时间间隔
performace.getEntriesByName("output") //获取标记，返回值是一个数组，包含了间隔时间数据

熟练使用 performance 我们可以查看并分析网页的很多数据，为我们项目优化提供保障。除了上述介绍的两个方法，我们还可以使用performance.timing来计算页面各个阶段的加载情况。

5.粘贴

new clipboard(".element", { text: text })