大家好，又见面了，我是你们的朋友全栈君。

电商后台管理系统2

前言

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

后台页面布局

本系统后台将采用Element UI 中的Container布局容器。

基本结构如下：

在这里插入图片描述

代码框架：

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

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

侧边栏美化

侧边栏的目录结构采用Element UI 中的NavMenu导航菜单。

基本效果如下：

代码框架：

<el-menu default-active="2" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>

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

侧边栏数据渲染

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

在加载后台列表前，需通过get方式得到后台响应的数据，才能将数据渲染至侧边菜单栏。

故在模板渲染成HTML页面前，调用created()，在其中完成后台菜单栏数据的获取，即getMenuList()

async getMenuList() { 

const{ 
 data: res } = await this.$http.get('menus')
//若获取数据失败 则返回错误信息
if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
//将获取的数据存放至menulist中
this.menulist = res.data
}

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

axios.interceptors.request.use(config => { 

config.headers.Authorization = window.sessionStorage.getItem('token')
return config
})

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

 <!-- 侧边栏区域 -->
<el-aside width="200px">
<el-menu default-active="1" background-color="#333744" text-color="#fff" active-text-color="#409EFF">
<!-- 一级菜单 -->
<el-submenu v-for="item in menulist" :index="item.id + ''" :key="item.id">
<template slot="title">
<i :class="iconsObj[item.id]"></i>
<span>{
{item.authName}}</span>
</template>
<!-- 二级菜单 -->
<el-menu-item v-for="subItem in item.children" :index="'/' + subItem.path + ''" :key="subItem.id">
<template slot="title">
<i class="el-icon-menu"></i>
<span>{
{subItem.authName}}</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>

设置二级目录路由

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

<el-aside width="200px">
<el-menu default-active="1" background-color="#333744" text-color="#fff" active-text-color="#409EFF" :router="true">
<!-- 一级菜单 -->
<el-submenu v-for="item in menulist" :index="item.id + ''" :key="item.id">
<template slot="title">
<i :class="iconsObj[item.id]"></i>
<span>{
{item.authName}}</span>
</template>
<!-- 二级菜单 -->
<el-menu-item v-for="subItem in item.children" :index="'/' + subItem.path + ''" :key="subItem.id" @click="saveNavState('/'+subItem.path+'')">
<template slot="title">
<i class="el-icon-menu"></i>
<span>{
{subItem.authName}}</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>

优化路由

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

const routes = [
// 重定向首页为登录页面
{ 
 path: '/', redirect: '/login' },
// 配置login路由
{ 
 path: '/login', component: Login },
// 配置home路由
{ 

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

用户列表绘制

头部面包屑

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

<template>
<!-- 面包屑导航区域 -->
<div>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>

底部卡片区域

采用Element UI中的Card

<!-- 卡片视图区 -->
<el-card>
<!-- 内容区域 -->
</el-card>

卡片内容填充

添加搜索框

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

<el-row>
<el-col :span="7">
<el-input placeholder="请输入内容">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="12">
<el-button type="primary" style="margin-left:15px;">添加用户</el-button>
</el-col>
</el-row>

添加用户列表表格

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

<!-- 用户列表区 -->
<el-table :data="tableData" border stripe>
<el-table-column type="index"></el-table-column>
<el-table-column prop="date" label="姓名"></el-table-column>
<el-table-column prop="date" label="邮箱"></el-table-column>
<el-table-column prop="date" label="电话"></el-table-column>
<el-table-column prop="date" label="角色"></el-table-column>
<el-table-column prop="date" label="状态"></el-table-column>
<el-table-column prop="date" label="操作"></el-table-column>
</el-table>

填充表格数据

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

{ 
// 响应数据
"data": { 

"total": 5,
"pagenum": 4,
"users": [
{ 

"id": 25,
"username": "tige117",
"mobile": "13888888888",
"type": 1,
"email": "tige112@163.com",
"create_time": "2019-11-09T20:36:26.000Z",
"mg_state": true, // 当前用户的状态
"role_name": "超级管理员"
}
]
},
"meta": { 

"msg": "获取成功",
"status": 200
}
}

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

created () { 

this.getUserList()
},
methods: { 

async getUserList () { 

const { 
 data: res } = await this.$http.get('users', { 
 params: this.queryInfo })
if (res.meta.status !== 200) return this.$message.error('获取用户列表失败')
this.userlist = res.data.users
this.total = res.data.total
console.log(res)
}
}

渲染至前端表格中

<!-- 用户列表区 -->
<el-table :data="userlist" border stripe style="margin-top:15px">
<el-table-column type="index"></el-table-column>
<el-table-column prop="username" label="姓名"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column prop="mobile" label="电话"></el-table-column>
<el-table-column prop="role_name" label="角色"></el-table-column>
<el-table-column label="状态"></el-table-column>
<el-table-column label="操作"></el-table-column>
</el-table>

添加状态和操作区域内容

<el-table-column label="状态">
<template>
<el-switch></el-switch>
</template>
</el-table-column>
<el-table-column label="操作">
<template>
<!-- 修改 -->
<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
<!-- 删除 -->
<el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
<!-- 分配角色 -->
<el-tooltip effect="dark" content="分配角色" placement="top" :enterable='false'>
<el-button type="warning" icon="el-icon-setting" size="mini" ></el-button>
</el-tooltip>
</template>
</el-table-column>

用户列表数据分页

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

<!-- 分页区域 -->
<el-pagination style="margin-top:15px" @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>

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

// 监听pagesize改变的事件
handleSizeChange (newSize) { 

this.queryInfo.pagesize = newSize
this.getUserList()
},
// 监听页码值改变的事件
handleCurrentChange (newPage) { 

this.queryInfo.pagenum = newPage
this.getUserList()
}

用户状态变更

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

// 监听switch开关状态的改变
async userStateChanged (userinfo) { 

const { 
 data: res } = await this.$http.put(`users/${ 
userinfo.id}/state/${ 
userinfo.mg_state}`)
if (res.meta.status !== 200) { 

userinfo.mg_state = !userinfo.mg_state
return this.$message.error('更新用户状态失败')
}
this.$message.success('更新用户状态成功')
}

搜索用户功能

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

<el-input placeholder="请输入姓名" v-model="queryInfo.query" clearable @clear="getUserList">
<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
</el-input>

添加用户表单

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

对话框显示与关闭状态：addDialogVisible

对话框关闭函数：addDialogClosed()

ref=“addFormRef”：注册引用信息

:model=“addForm”：将输入表单数据进行绑定

<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
<el-form ref="addFormRef" :model="addForm" label-width="70px">
<el-form-item label="用户名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="addForm.password"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="电话" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
<!-- 底部区域 -->
<span slot="footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addUser">确 定</el-button>
</span>
</el-dialog>

表单信息验证

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

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

// 定义验证规则对象
addFormRules: { 

username: [
{ 
 required: true, message: '请输入用户名', trigger: 'blur' },
{ 
 min: 3, max: 10, message: '用户名的长度在3-10位之间', trigger: 'blur' }
],
password: [
{ 
 required: true, message: '请输入密码', trigger: 'blur' },
{ 
 min: 6, max: 16, message: '密码的长度在6-16位之间', trigger: 'blur' }
],
email: [
{ 
 required: true, message: '请输入邮箱', trigger: 'blur' },
{ 
 validator: checkEmail, trigger: 'blur' },
{ 
 min: 6, max: 16, message: '邮箱的长度在6-16位之间', trigger: 'blur' }
],
mobile: [
{ 
 required: true, message: '请输入电话号', trigger: 'blur' },
{ 
 validator: checkMobile, trigger: 'blur' },
{ 
 min: 11, max: 11, message: '电话的长度应为11位', trigger: 'blur' }
]
}
// 自定义规则
// 验证邮箱的规则
var checkEmail = (rule, value, cb) => { 

// 验证邮箱的正则表达式
const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
if(regEmail.test(value)) { 

// 合法邮箱
return cb()
}
cb(new Error('请输入正确的邮箱'))
}
// 验证手机号的规则
var checkMobile = (rule, value, cb) => { 

const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
if(regMobile.test(value)) { 

return cb()
}
cb(new Error('请输入正确的手机号'))
}

添加用户

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

查看后台接口文档可知：

// 监听添加用户对话框的关闭事件
addDialogClosed () { 

// 关闭对话框后自动清空输入框内容
this.$refs.addFormRef.resetFields()
},
addUser () { 

this.$refs.addFormRef.validate(async valid => { 

if (!valid) return
// 可以发送用户的添加请求
const { 
 data: res } = await this.$http.post('users', this.addForm)
if (res.status !== 201) this.$message.error('添加用户失败')
this.$message.success('添加用户成功')
// 隐藏对话框
this.addDialogVisible = false
// 重新获取用户列表数据
this.getUserList()
})
}

修改用户信息

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

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

<!-- 修改 -->
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
<!-- 修改用户信息对话框 -->
<el-dialog title="修改信息" :visible.sync="editDialogVisible" width="50%" @click="editDialogClosed">
<el-form ref="editFormRef" :model="editForm" :rules="editFormRules" label-width="70px">
<el-form-item label="用户名">
<el-input v-model="editForm.username" disabled></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="editForm.email"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="editForm.mobile"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editUserInfo">确 定</el-button>
</span>
</el-dialog>

// 展示编辑用户的对话框
async showEditDialog (id) { 

const { 
 data: res } = await this.$http.get('users/' + id)
if (res.meta.status !== 200) return this.$message.error('查询用户信息失败')
this.editForm = res.data
this.editDialogVisible = true
},
// 监听修改用户对话框的关闭事件
editDialogClosed () { 

this.$refs.editFormRef.resetFields()
},
// 修改用户信息并提交
editUserInfo () { 

this.$refs.editFormRef.validate(async valid => { 

if (!valid) return this.$message.error('修改用户信息失败')
// 发起修改用户信息的网络请求
const { 
 data: res } = await this.$http.put('users/' + this.editForm.id, { 

email: this.editForm.email,
mobile: this.editForm.mobile
})
if (res.meta.status !== 200) return this.$message.error('修改用户信息失败')
// 关闭对话框
this.editDialogVisible = false
// 刷新数据列表
this.getUserList()
// 提示修改成功
this.$message.success('修改用户信息成功')
})
}

删除用户

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

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

// 根据id删除对应的用户信息
async removeUserById (id) { 

// 弹框询问用户是否删除数据
const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', { 

confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err => err)
// 如果用户确认删除 则返回字符串confirm 否则返回cancel
// console.log(confirmResult)
if (confirmResult !== 'confirm') { 

return this.$message.info('已经取消删除')
}
const { 
 data: res } = await this.$http.delete('users/' + id)
if (res.meta.status !== 200) return this.$message.error('删除用户失败')
this.$message.success('已成功删除')
this.getUserList()
}

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/132019.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...

基于Vue的电商后台管理系统（2）

电商后台管理系统2

前言

后台页面布局

侧边栏美化

侧边栏数据渲染

设置二级目录路由

优化路由

用户列表绘制

头部面包屑

底部卡片区域

卡片内容填充

添加搜索框

添加用户列表表格

填充表格数据

用户列表数据分页

用户状态变更

搜索用户功能

添加用户表单

表单信息验证

添加用户

修改用户信息

删除用户

发表回复

基于Vue的电商后台管理系统（2）

电商后台管理系统2

前言

后台页面布局

侧边栏美化

侧边栏数据渲染

设置二级目录路由

优化路由

用户列表绘制

头部面包屑

底部卡片区域

卡片内容填充

添加搜索框

添加用户列表表格

填充表格数据

用户列表数据分页

用户状态变更

搜索用户功能

添加用户表单

表单信息验证

添加用户

修改用户信息

删除用户

相关推荐

运维shel小编（2）

谷歌的api_谷歌浏览器添加搜索引擎

mac怎么上传文件到服务器_linux传输文件到linux

AJAX常见面试问题[通俗易懂]

conn.setRequestProperty_session.getattribute获取的值为空

ubuntu16.04怎么改成中文(ubuntu更改语言为英文)

发表回复