2021 Vue全家桶开发电商管理系统（Element-UI）04- 系统主页和用户列表功能

旧城等待， 2023-01-05 12:58 224阅读 0赞

### 文章目录 ###

*  电商管理系统主页
 *   *  1 主页布局
     *   *  1.1 布局容器的选择
         *  1.2 实现导航菜单的基本结构
         *  1.3 通过接口获取菜单数据
         *  1.4 添加导航分类图标
         *  1.5 每次只能打开一个菜单项
         *  1.6 实现侧边栏的折叠展开效果
         *  1.7 首页路由的重定向和路由链接改造
         *  1.8 通过路由的形式展示用户列表组件
         *  1.9 保存左侧菜单激活状态
         *  1.10 绘制用户列表组件的基本结构布局
         *  1.11 获取用户列表数据
         *  1.12 渲染用户列表
         *  1.13 实现分页效果
         *  1.14 修改用户状态
         *  1.15 实现搜索功能
         *  1.16 渲染添加用户的对话框
         *  1.17 渲染修改用户的对话框
         *  1.18 提交修改之前的预验证和提交表单
         *  1.18 提交修改之前的预验证和提交表单
     *  结尾

# 电商管理系统主页 #

## 1 主页布局 ##

### 1.1 布局容器的选择 ###

这里我们选择ElementUI中的布局容器

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center]

复制代码即可。

### 1.2 实现导航菜单的基本结构 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 1]

### 1.3 通过接口获取菜单数据 ###

通过axios拦截器添加token验证，保证拥有获取数据的权限。

main.js

//axios请求拦截
    axios.interceptors.request.use(config => { 
      // console.log(config);
      config.headers.Authorization = window.sessionStorage.getItem('token');
      return config
    })

在Home.vue中调用Vue生命周期提供的钩子函数created

export default { 
      name: "Home",
      data() { 
        return { 
          menuList: []
        };
      },
      methods: { 
        logout() { 
          window.sessionStorage.clear();
          this.$router.push("/login");
        },
        async getMunuList() { 
          //发送请求
          const {  data: res } = await this.$http.get("menus");
          console.log(res);
          if (res.meta.status !== 200) return this.$messgae.error(res.meta.msg);
          this.menuList = res.data;
        }
      },
      created() { 
        this.getMunuList();
      }
    };
    </script>

通过两层for循环渲染数据

### 1.4 添加导航分类图标 ###

使用字体图标，创建iconList对象，以键值对形式存储，键为当前导航条的id，值为icon的font-class类。

data() { 
        return { 
            menuList: [],
            iconList: { 
                "125": "icon-ziyuan",
                "103": "icon-suo",
                "101": "icon-shangpinchuangjian",
                "102": "icon-danju",
                "145": "icon-baobiao"
            }
        };
    },

### 1.5 每次只能打开一个菜单项 ###

给menu添加unique-opened属性，true为只能开一项，false为无数项

### 1.6 实现侧边栏的折叠展开效果 ###

*  menu的collapse属性，true折叠，false展开，通过动态绑定Boolean实现。
 *  :collapse-transition="false"取消动画效果
 *  动态生成侧边栏宽度
    
        <el-aside :width="isCollapse?'64px': '200px'">

### 1.7 首页路由的重定向和路由链接改造 ###

{ 
        path: '/home',
            component: Home,
                children: [
                    {  path: "", redirect: '/welcome' },
                    {  path: "/welcome", component: Welcome }
                ]
    }

使用Menu的router属性，true启动路由跳转，index设置为item.path作为跳转地址，需要手动添加"/"  
![在这里插入图片描述][20210112204041790.png_pic_center]

<el-menu-item :index="'/'+item2.path" v-for="item2 in item.children" :key="item2.id">

### 1.8 通过路由的形式展示用户列表组件 ###

### 1.9 保存左侧菜单激活状态 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 2]

### 1.10 绘制用户列表组件的基本结构布局 ###

头部为面包屑导航区域  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 3]

卡片视图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 4]

### 1.11 获取用户列表数据 ###

定义查询条件和本地数据

data() { 
        return { 
            queryInfo: { 
                query: "",
                pagenum: 3,
                pagesize: 2
            },
            userList: []
        };
    },
    methods: { 
        async getUserList() { 
            const {  data: res } = await this.$http.get("roles", { 
                params: this.queryInfo
            });
            console.log(res);
            if (res.meta.status !== 200)
                return this.$message.error("获取用户列表失败");
            this.userList = res.data;
        }
    }

### 1.12 渲染用户列表 ###

使用Table

<el-table :data="userList" style="width: 100%" stripe>
        <el-table-column prop="roleName" label="职务" width="180"></el-table-column>
        <el-table-column prop="roleDesc" label="职务描述" width="180"></el-table-column>
    </el-table>

**添加索引列**

<el-table-column type="index" label="#" width="180"></el-table-column>

**自定义状态列显示**

使用作用域插槽，scope.row获取当前行的数据

<el-table-column label="状态" width="180">
        <template v-slot="scope">
            <el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
    </el-table-column>

**操作列显示**

使用button，并使用文字提示，当用户停留在setting时，显示提示文字

<el-tooltip effect="dark" content="设置用户权限" placement="top" :enterable="false">
        <el-button type="warning" icon="el-icon-setting" size="small"></el-button>
    </el-tooltip>

### 1.13 实现分页效果 ###

页面布局：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 5]

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1,2,5,10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" ></el-pagination>

*  @size-change 每页显示记录条数变化触发事件
 *  @current-change 当前页变化触发事件
 *  :current-page 当前页 绑定请求参数
 *  :page-sizes 可选择的每页显示条数
 *  :page-size 当前显示条数 绑定请求参数
 *  layout分页布局显示 总条数、选择条数器等等…
 *  :total 总条数 绑定data数据

### 1.14 修改用户状态 ###

步骤：

1.  监听状态
2.  状态改变时，发出请求，改变状态
3.  更新失败，提示用户，状态取反；更新成功，提示用户。

<el-table-column label="状态" width="160">
        <template v-slot="scope">
            <el-switch v-model="scope.row.mg_state" active-color="#13ce66" @change="userStateChange(scope.row)" ></el-switch>
        </template>
    </el-table-column>

async userStateChange(userinfo) { 
        console.log(userinfo);
        const {  data: res } = await this.$http.put(
            `users/${ userinfo.id}/state/${ userinfo.mg_state}`
        );
        if (res.meta.status !== 200) { 
            return this.$message.error("更新用户列表失败");
            this.userinfo.mg_state = !this.userinfo.mg_state;
        }
        this.$message.success("更新用户状态成功");
    }
    }

### 1.15 实现搜索功能 ###

1.  搜索框双向绑定queryInfo.query查询参数
2.  搜索按钮的处理函数为getUserList

> 这个方法是真的厉害，没想到

需求：在搜索框输入文字后，自动出现X 点击清空自动显示所有用户列表  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 6]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 7]

clear的处理函数：

clearSearch() { 
        this.queryInfo.query = "";
        this.getUserList();
    }

### 1.16 渲染添加用户的对话框 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 8]

**渲染添加用户的表单**

内容与之前的表单验证类似

新增：自定义表单验证validator

<el-form-item label="手机号" prop="phone">
        <el-input v-model="newUser.phone"></el-input>
    </el-form-item>

phone: [{ validator: validatorPhone,trigger: "blur"}],

data() { 
        var validatorPhone = (rule, value, callback) => { 
            //手机号验证规则
            var reg = /^1[3|4|5|7|8][0-9]{9}$/;
            if (!reg.test(value)) { 
                callback(new Error("手机号输入错误"));
            } else { 
                callback();
            }
        };
        return { .....}

自定义表单验证步骤：

1.  data中自定义一个箭头函数
2.  验证规则中使用该函数

正则表达式复习链接：

### 1.17 渲染修改用户的对话框 ###

将信息填充到对应的表单项中，在修改点击事件中将用户id以参数形式传递出去，并使用请求查询用户信息。

<el-button type="primary" icon="el-icon-edit" size="small" @click="showEditDialog(scope.row.id)" ></el-button>

async showEditDialog(id) { 
        console.log(id);
        this.editDialogVisible = true;
        const {  data: res } = await this.$http.get(`users/${ id}`);
        if (res.meta.status !== 200)
            return this.$message.error("获取用户信息失败");
        this.editUser = res.data;
        console.log(res.data);
    }

每次点击修改按钮，表单重置：

给dialog添加close事件，给Form表单添加引用，在事件处理函数中调用表单的reset方法

CloseEdit() { 
          this.$refs.editFormRef.resetFields();
        }

### 1.18 提交修改之前的预验证和提交表单 ###

await this. h t t p . g e t ( ‘ u s e r s / http.get(\`users/ http.get(‘users/\{id\}\`);  
if (res.meta.status !== 200)  
return this.$message.error(“获取用户信息失败”);  
this.editUser = res.data;  
console.log(res.data);  
\}

每次点击修改按钮，表单重置：
    
    给dialog添加close事件，给Form表单添加引用，在事件处理函数中调用表单的reset方法
    
    ```js
      CloseEdit() {
          this.$refs.editFormRef.resetFields();
        }

### 1.18 提交修改之前的预验证和提交表单 ###

与登录相同，不赘述了。

## 结尾 ##

至此，我们电商管理系统的主页和用户列表功能就彻底做完了~下篇博客，我们将继续实现电商管理系统的权限管理和角色管理页面，如果感兴趣，那就关注我继续看下去吧！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/8c003ecfb3ac4432b95095a23f1375a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221119/5fab7d89f5bc42abbd9346747ca22a85.png
[20210112204041790.png_pic_center]: /images/20221119/544c474e4c5e4d31a0ff9f438775daab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221119/dc0e1311d9134ad08914167b069a1940.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221119/44a265345b8c4fbba062912d6ae9334a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/202101122041142.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20210112204126646.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/2021011220414068.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 7]: https://img-blog.csdnimg.cn/20210112204150899.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 8]: https://img-blog.csdnimg.cn/20210112204202308.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng==,size_16,color_FFFFFF,t_70#pic_center