vue-element-admin的使用总结

LinvKey in 移动智地

2021-04-29

预计阅读时间：4.43 min

共计：1329 字

最后修改时间：7 months ago

关于后台系统这一块，一直用的都是vue-element-admin，这一套模板是基于 vue 和 element-ui实现的，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

1619662923651

1619662936726

# 文件1-user.js 登录登出

在src目录下的api文件夹中会用到user.js

user.js中有三个方法，分别是

login登录方法，

getInfo获取登录信息的方法，

以及logout登出的方法

它们是基于utils/request.js文件的

# 文件2-request.js设置baseURL

在utils/request.js这个文件中需要注意

1619662946024

2.1

第一个红框对应的文件是baseURL

env.development和.env.production

它对应的文件是项目根目录下的

1619662954053

.env.development和.env.production

这两个文件中

唯一的区别就是

1619662963801

一个对应上线，一个对应开发

而VUE_APP_BASE_API熟不熟悉？

是的，就是文件2-utils/request.js文件中的第一个红框

用于配置baseURL的

VUE_APP_BASE_API = "路径值"

路径值就是后端给的baseURL

2.2

第二个红框是在请求拦截器中

给请求投添加token

注意这个 "X-Token" 是可以和后端商量配合前端来命名的

2.3

1619662971664

这个状态码，框架里给的是20000 而后端返回的大都是200所以要自己改一下

# 文件3-auth.js设置token

在utils/auth.js这个文件中需要注意

1619662982576

这个项目用的是cookie来存储token

我在做项目的过程中使用同一个名字 TokenKey（当时都叫token）

结果出现一个项目登录之后，另一个项目无法登录的情况

所以在utils/auth.js这个文件中最好还是改一下 TokenKey 比较好

# 文件4-get-page-title.js设置标题

在utils/get-page-title.js这个文件中需要注意

这个文件是设置网页标题的

而具体设置是在红框处，按住ctrl键

1619662990738

点进去

1619662998245

就可以修改网页标题了

1619663048668

把data中的数据改掉，以防日后出现

# 文件6-在layout中的components中AppMain.vue

transition标签的name属性，默认提供了fade和fade-transform两个转场动画

但是没啥区别

可以设置下拉

1619663057347

这里注释掉还剩最后一个退出按钮

1619663066209

# 文件8-router

在src的router文件夹的index.js中

有两种路由，

一种是不需要权限，所有人都能访问的页面constantRoutes

一种是需要权限，必须是指定的角色才能访问的页面asyncRoutes

1619663073523

constantRoutes无需权限的路由配置

1619663081036

asyncRoutes需要权限的路由配置

1619663089294

# 文件9-store

在store/modules/user.js这个文件中需要注意

在定义的actions里有三个方法分别对应api/user.js下的

login登录方法，

getInfo获取登录信息的方法，

以及logout登出的方法。

1.login登录方法：

1619663108953

这里需要修改红框处，由后端返回的账号密码两个字段，（有的时候，第二行结构赋值出的username和password也需要改成后端返回的账号密码字段）

2.getInfo获取登录信息的方法：

1619663147879

在登录时后端一般会返回三个常用的值，分别是昵称，头像和token

token在login登录方法已经保存了

这里保存的是昵称和头像

3.登出方法

4.消除token方法

这里不需要修改

# 文件10-view

这个文件夹是存放页面的

要注意的有404页面和login页面

404页面只要注意到模板框架会有广告性的文字，改掉即可

在login页面

有

1.标题要修改

1619663155422

2.登录表单的校验规则

还要留意handleLogin登录事件

# 文件11-axios

只需要保证请求头中的X-Token和后端一致就行了

import axios from "axios";
import { getToken } from '@/utils/auth'
// 创建axios实例 
const service = axios.create({});
// request拦截器 
service.interceptors.request.use(
    config => {
        // config.headers["tokenid"] = "435065970"; 
        // 请求头中添加tokenid     
        config.headers["X-Token"] = getToken();
        // 请求头中添加X-Token     
        return config;
    },
    error => {
        Promise.reject(error);
    }
);
// response拦截器 
service.interceptors.response.use(
    response => {
        if (response) {
            return response.data;
        } else {
            Promise.reject(new Error("error"));
        }
    }, error => {
        if (JSON.stringify(error).includes("401")) {
            alert("登录已过期，请重新登录！");
        } else {
            alert(error);
        }
        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
31
32
33
34
35

# 文件12-main.js

在main.js中

1619663164642

1619663177298

1.配置axios

2.设置全局样式类

3.定义自定义的过滤器用于更改字符格式

# 封装方法

1.统一在项目的src的api文件夹下创建JS文件

第一步就要引入

import request from '@/utils/request'

然后导出方法

我这里封装的方法需要三个参数

//指令列表/{pageNo}/{pageSize}/{did}
export function requst_instructions(uri) {
    return request({
        url: '/manage/command-list'+uri,
        method: 'get',
    })
}

1
2
3
4
5
6
7

2.使用

1619663186524

亲测有效，奔走相告！

- 全文完 -