前言

可能是这颗星球上唯一一篇使用小白的眼角来调用pure-admin的文章吧

初始化搭建

拉取项目vue-pure-admin精简版（非国际化版本） (opens new window)

如何运行Vue项目

设置API地址

1. 在vite.config.ts文件中找到proxy填入后端地址即可

       proxy: {
       "^/api/.*": {
           // 这里填写后端地址
           target: "http://127.0.0.1:3000",
           changeOrigin: true,
           rewrite: path => path.replace(/^\/api/, "")
       }
       }
   

2. 在src/api目录下新建文件utils.ts

       export const baseUrlApi = (url: string) => `/api/${url}`;
   

3. 在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 });
       };
   

pure-admin登陆联调

1. 在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);
        });
    });

2. 在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" });
        }
    });

pure-admin携带Token请求

    // 现获取token数据
    const data = getToken();
    http.request("post", adminUrlApi("home/consumptionData"), {data})

pure-admin携带参数请求

    let params = {
      state: -99,
      limited: 10
    };
    http
      .request("post", adminUrlApi("home/recentlyOrders"), { data, params })
      .then(result => {
        ...
    }

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>

正确写法

<el-table-column prop="username,realName" label="联系方式">
        <template v-slot="scope">
            {{scope.row.username}}/{{scope.row.realName}}
        </template>
</el-table-column>

pure-admin单元格中内容太多，多余的使用省略号代替

设置属性show-overflow-tooltip

<el-table-column
    show-overflow-tooltip
    prop="content"
    header-align="center"
    align="center"
    label="内容">
</el-table-column>

对后端传回的数据进行转换

<el-table-column label="性别" align="center" prop="cadreSex" :formatter="formatSex" />

// 性别数据转换
formatSex(row){
    return row.cadreSex === 0 ? "男" : row.cadreSex === 1 ? "女" : "未填写";
},

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>

element-ui分页码小记

1. @size-change="handleSizeChange"是用于绑定一页数量改变时调用handleSizeChange()方法，这个方法的作用是用于控件一页数量和声明的变量绑定

    function handleSizeChange(val) {
        limit.value = val
        query()
    }
   

2. @current-change="handleCurrentChange"是用于绑定翻页码调用handleCurrentChange()方法，这个方法的作用时用于控件页码和声明的变量绑定

   function handleCurrentChange(val) {
       pageNum.value = val
       query()
   }