tp和 vue 管理后台管理系统_Vue|电商后台管理系统(2）

点击上方蓝字设为星标

下面开始今天的学习～

本期推文继续完成电商后台管理系统，上期已经实现该系统的登陆界面、路由、登录、退出及导航守卫功能，本期将继续完善该系统的以下功能：从后端获取后台列表数据并渲染到前端页面、用户列表的展示、修改、删除和添加。

后台页面布局

本系统后台将采用Element UI 中的Container布局容器。基本结构如下：

代码框架：

经过简单的HTML+CSS美化后，界面如下：

侧边栏美化

侧边栏的目录结构采用Element UI 中的NavMenu导航菜单。基本效果如下：

代码框架：

稍作更改，变换图标后，界面如下：

侧边栏数据渲染

根据后台API接口知后台菜单列表：

在加载后台列表前，需通过get方式得到后台响应的数据，才能将数据渲染至侧边菜单栏。故在模板渲染成HTML页面前，调用created()，在其中完成后台菜单栏数据的获取，即getMenuList()

设置拦截器，拦截每一次请求：

通过遍历menulist中的数据，将其渲染至前端页面：

设置二级目录路由

通过Element UI 中NavMenu 导航菜单的属性router可设置子目录路由，即启用该模式会在激活导航时以 index 作为 path 进行路由跳转。

优化路由

设置主页路由，即进入后台主页自动跳转至欢迎页面

用户列表绘制

1 头部面包屑 采用Element UI中的Breadcrumb 面包屑进行搭建。

2 底部卡片区域 采用Element UI中的Card

3 卡片内容填充

1.添加搜索框

采用Element UI中的基础组件进行绘制(前文已讲解，此处直接使用)，按钮与搜索框使用layout布局。

2.添加用户列表表格

采用Element UI中的带边框的Table，添加index标号序列，效果如下：

3.填充表格数据

从后台接口文档可知，用户列表请求路径为users，请求方法为get。

在created()时获取后台用户列表数据

渲染至前端表格中

添加状态和操作区域内容

4.用户列表数据分页

采用Element UI中的Pagination 分页，对所获取的用户列表数据进行分页。将前面所获取的页面总数，页码数等进行动态绑定。

实现改变显示条数及切换页数

4 用户状态变更

通过状态栏开关切换，实现状态的启用与禁用。利用开关的change事件，当状态开关发生改变时，后台数据随之改变。根据后台接口文档可知：

5 搜索用户功能 给搜索按钮添加getUserList()事件，并将搜索框内的值与queryInfo.query绑定，通过用户姓名进行搜索。

6 添加用户表单

采用Element UI中的Dialog 对话框，当用户点击添加用户，弹出添加用户的对话框，在对话框内，添加一个表单，供用户进行账号信息的编辑，并进行用户的添加。

对话框显示与关闭状态：addDialogVisible 对话框关闭函数：addDialogClosed() ref=“addFormRef”：注册引用信息 :model=“addForm”：将输入表单数据进行绑定

7 表单信息验证

为减轻服务器压力，在发送添加用户请求前进行数据验证，即验证各项数据是否合法。

采用Element UI中的自定义表单验证，分为定义验证规则对象、自定义验证方法和绑定验证方法(上面已经绑定)三步。

8 添加用户

点击确定按钮，若各项信息均输入无误，则进行用户的添加。

查看后台接口文档可知：

9 修改用户信息

点击修改按钮，弹出修改用户信息对话框，可对相关信息进行修改，并实时显示。

主要操作步骤与添加用户同理。

10  删除用户

在点击删除用户后弹出是否确认删除对话框，若选择删除则删除该用户，否则不进行删除操作。

过程与上述添加、修改用户信息同理，采用Element UI中的confirm进行删除的确认。

——————end——————

图 片 / Cs Max

编 辑 / Liony

在看点这里