前言

该文主要记录在项目实战需要用到的一部分知识。以及项目中遇到的问题。

定义别名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 定义路径
const path = require('path')
// resolve函数
function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                '@': resolve('src')
            }
        }
    },
}

api.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 新建 src/api目录
// 先引用
import request from '@/utils/request'
// 查询
export function fetchList(data) {
  return request({
    url: '/articles',
    method: 'get',
    params: data
  });
}
// 查询单条
export function fetchArticle(id) {
  return request({
    url: `/articles/${id}`,
    method: 'get',
  })
}
// 创建
export function createArticle(data) {
  return request({
    url: '/articles',
    method: 'post',
    data
  })
}
// 修改
export function updateArticle(id, data) {
  return request({
    url: `/articles/${id}`,
    method: 'put',
    data
  })
}
// 使用api
// 先引用
import {fetchList} from '@/api/api'
// 查询
fetchList({currentPage:this.page.currentPage,pageSize:this.page.pageSize,
    content:this.form.content,title:this.form.title}).then(res=>{})
// 或者在封装里面写好要查询的，不过在调用时就要传递的就固定了（实参里的对象值就要固定了）
// 推荐上面的，因为只params需要的对象data里面只有一个时，可以直接写this.对象名
export default {fetchList} // 这个可加可不加（目前不清楚）
// 注意这个封装做完后，需要从新启动项目（否者没有用）

Echarts

1
2
3
4
5
6
7
8
9
10
// 安装
yarn add echarts
// 使用
import * as echarts from 'echarts';
// 使用api的名字
import {productsChart as xinmingzi} from "@/api/charts";
// 必须使用id，和要渲染的元素给定宽高次才可以出现图表
<div id="chart" style="width=100%;height=500px"></div>
// js下面Echarts
// （赋值需要放到mounted里面，需要找到当前的Dom）

axios

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import axios from 'axios'
import {MessageBox, Message} from 'element-ui'
// import store from '@/store'
// import { getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  // 接口不用写'/api'了
  baseURL: '/api', // url = base url + request url
  // withCredentials: true, // 当跨域请求时，发送 cookies
  timeout: 5000 // 请求超时时间
})

// request 请求
service.interceptors.request.use(
  config => {
    // do something 在发送请求前
    const token = localStorage.token

    if (token) {
      // 让每个请求携带token
      config.headers['token'] = token
    }
    return config
  },
  error => {
    // do something 当请求错误
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// respone 响应
service.interceptors.response.use(
  /**
   * 如果你想获取 http 信息，例如 headers 或 status
   * 请 return  response => response
   */

  /**
   * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
   * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
   */
  response => {
    const res = response.data

    // 如果返回的自定义code不是20000, 认定为error。
    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // 重新登录
        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 为了重新实例化vue-router对象 避免bug
          localStorage.removeItem('token')
          location.reload()
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 地址（文档表单上传）
// 需要参数
http://up-z2.qiniup.com // 请求地址
key = xxx // 上传的名字
token = uploadToken // 需要带上token
// 测试接口使用post，以及选择from Data,file选择上传图片文件

//安装uuid
yarn add uuid
// 引用
import {v4 as uuidv4} from 'uuid';
// 图片上传
// element ui中:data='xxx'，上传表单

<el-upload
    class="upload-demo"
    :limit="1"
    action="http://up-z2.qiniup.com"
    :before-upload="beforeUpload" // 上传图片之前，判断文件类型，和七牛云参数赋值
    :on-success="handleSuccess" // 图片上传成功，赋值给表单
    :on-error="handleAvatarError" // 图片post上传失败，提示；
    :on-exceed="handleExceed" // 图片上传过载提示；（只上传1个等）
    :before-remove="beforeRemove" // 上传文件后点击删除上传文件，提示是否删除，（注意异步）
    :on-remove="handleRemove" // 删除成功后，表单赋值为空，提示成功；
    :on-preview="handlePreview" // 图片放大（注意使用element ui的放大标签）
    :data="qiniuFrom"
    :file-list="fileList"
    list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

表单重置无效

1
2
3
4
5
6
7
8
9
10
// 将赋值放在mounted后，原因是使用模态框，赋值在Dom生成之前
// 表单重置是在mounted上设置为初始值，在这之前赋值会导致重置无效
// 必须先打开模态框，再赋值没有影响
this.formVisible = true 
// 值会立刻改变，但是 DOM 是异步更新的
// 保险放在上方，异步请求本就是慢一点，并且可以使用nextTick方法保险；
// 使用nextTick方法是在里面等DOM加载完之后，再执行；
this.$nextTick(() => {})
// 里面赋值在外面找不到的bug，在函数里面赋值
this.$nextTick(() => {}) // 外面打印不出结果