Vue-pure-Admin基础
# 前言
可能是这颗星球上唯一一篇使用小白的眼角来调用pure-admin
的文章吧
# 初始化搭建
拉取项目vue-pure-admin精简版(非国际化版本) (opens new window)
# 设置API
地址
在
vite.config.ts
文件中找到proxy
填入后端地址即可proxy: { "^/api/.*": { // 这里填写后端地址 target: "http://127.0.0.1:3000", changeOrigin: true, rewrite: path => path.replace(/^\/api/, "") } }
1
2
3
4
5
6
7
8在
src/api
目录下新建文件utils.ts
export const baseUrlApi = (url: string) => `/api/${url}`;
1在
src/api
目录下找到user.ts
文件,修改请求方法;下面代码以登陆代码来说明// 原始 /** 登录 */ export const getLogin = (data?: object) => { return http。request<UserResult>("post", "/login", { data }); }; // 改变后 /** 登录 */ export const getLogin = (data?: object) => { return http.request<UserResult>("post", adminUrlApi("login"), { data }); };
1
2
3
4
5
6
7
8
9
10
# pure-admin
登陆联调
- 在
src/store/modules/user.ts
中修改
点击查看详情
// 原始
/** 登入 */
async loginByUsername(data) {
return new Promise<UserResult>((resolve, reject) => {
getLogin(data)
.then(data => {
if (data) {
setToken(data.data);
resolve(data);
}
})
.catch(error => {
reject(error);
});
});
// 改造后
/** 登入 */
async loginByUsername(data) {
return new Promise<UserResult>((resolve, reject) => {
getLogin(data)
.then(data => {
if (data.code != 200) {
resolve(data);
} else {
setToken(data.data);
resolve(data);
}
})
.catch(error => {
reject(error);
});
});
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
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
- 在
src/views/login/index.vue
中修改
点击查看详情
// 原始
useUserStoreHook()
.loginByUsername({ username: ruleForm.username, password: "admin123" })
.then(res => {
if (res.success) {
// 获取后端路由
initRouter().then(() => {
router.push("/");
message("登录成功", { type: "success" });
});
}
});
// 改变后
useUserStoreHook()
.loginByUsername({
username: ruleForm.username,
password: ruleForm.password
})
.then(res => {
if (res.code == 200) {
// 获取后端路由
initRouter().then(() => {
router.push("/");
message("登录成功", { type: "success" });
});
} else {
message(res.message, { type: "error" });
}
});
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
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
# pure-admin
携带Token
请求
// 现获取token数据
const data = getToken();
http.request("post", adminUrlApi("home/consumptionData"), {data})
1
2
3
2
3
# pure-admin
携带参数请求
let params = {
state: -99,
limited: 10
};
http
.request("post", adminUrlApi("home/recentlyOrders"), { data, params })
.then(result => {
...
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# pure-admin
无感刷新token
不生效
目前还没找到
# pure-admin
表格中单元格写入多个数据
eg:
id/用户名 | 描述 |
---|---|
1/abc | 33222 |
2/bbb | 55662 |
主要就是在template
中引用插槽时不要用slot-scope="scope"
,改用v-slot="scope"
# 错误写法
<el-table-column prop="username,realName" label="联系方式">
<template slot-scope="scope">
{{scope.row.username}}/{{scope.row.realName}}
</template>
</el-table-column>
1
2
3
4
5
2
3
4
5
# 正确写法
<el-table-column prop="username,realName" label="联系方式">
<template v-slot="scope">
{{scope.row.username}}/{{scope.row.realName}}
</template>
</el-table-column>
1
2
3
4
5
2
3
4
5
# pure-admin
单元格中内容太多,多余的使用省略号代替
设置属性show-overflow-tooltip
<el-table-column
show-overflow-tooltip
prop="content"
header-align="center"
align="center"
label="内容">
</el-table-column>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 对后端传回的数据进行转换
<el-table-column label="性别" align="center" prop="cadreSex" :formatter="formatSex" />
1
// 性别数据转换
formatSex(row){
return row.cadreSex === 0 ? "男" : row.cadreSex === 1 ? "女" : "未填写";
},
1
2
3
4
2
3
4
# pure-admin
如何使用icon
查询
icon
站点:icones (opens new window)
在vue
页面引用要展示的icon
以这个页面 (opens new window)为例选择
mingcute:fullscreen-fill
import Fullscreen from "@iconify-icons/mingcute/fullscreen-fill";
<el-button >
<IconifyIconOffline :icon="Fullscreen" class="dark:text-white" />
</el-button>
1
2
3
4
5
2
3
4
5
# element-ui
分页码小记
@size-change="handleSizeChange"
是用于绑定一页数量改变时调用handleSizeChange()
方法,这个方法的作用是用于控件一页数量和声明的变量绑定function handleSizeChange(val) { limit.value = val query() }
1
2
3
4@current-change="handleCurrentChange"
是用于绑定翻页码调用handleCurrentChange()
方法,这个方法的作用时用于控件页码和声明的变量绑定function handleCurrentChange(val) { pageNum.value = val query() }
1
2
3
4
更新时间: 2023/3/21 18:51:07