黑马vue电商后台管理系统总结
vue电商后台管理系统-阶段总结
上个月把这个项目做完简单整理了一下文档，和大家交流分享一下
一、项目技术栈
前端
-
前端采用 vue cli 脚手架搭建框架，使用 element UI 美化项目结构
-
环境依赖（开发依赖，运行依赖）
- 富文本编辑器
- nprogress加载进度条
- echarts图表展示
- 第三方http库 axios
后端
后端是已经写好了的，采用 express 搭建的 API 服务，返回的数据是 JSON 格式的数据，只需要导入数据库，并配置一下数据库信息，就可以跑起来了，也有对应的api文档
数据库
数据库采用 MySQL 5.7存储，我们只需要将项目的 sql 文件导入即可
二、开发流程
1.项目初始化
项目初始化
- 打开cmd运行vue ui
- 选择工作目录创建项目文件夹
- 安装element ui插件选择按需加载(如果添加全部会导致文件的体积过大)
- 安装axios依赖以发起Ajax请求
- 初始化git仓库
2.后台配置
- 把数据库的文件导入mysql的数据库中
- powershell运行node .app.js 启动后台的api接口
3.登录以及退出
登录的业务流程
- 在登录页面输入用户名和密码
- 调用后台接口进行验证
- 通过验证后，根据后台的响应状态跳转到项目主页
登录业务的相关技术点
- 通过cookie在客户端记录状态
- 通过session在服务器端记录状态
- 通过token方式维持状态
token原理分析
登陆页面的布局
用到了以下的elment ui组件
- el-form
- el-form-item
- el-input
- el-button
- 字体图标
创建登陆组件
在components文件夹中新建Login.vue组件
template，script，style标签,style标签中的scoped可以防止组件之间的样式冲突
配置less、less-loader依赖
退出
-
清空token
-
跳转到登录页
// 给退出的按钮绑定一个logout事件
logout() {
// 清空token
window.sessionStorage.clear()
// 跳转到登录页
this.$router.push(’/login’)
},
3.主页面布局、用户列表功能
主页面布局
- 结构布局采用了element ui里的container组件
侧边栏的布局以及渲染 请求数据
在element-ui中也提供了相应的组件，在NavMenu导航菜单中可以找到相应的组件对应的区域
data中定义一个数组menulist来接收左侧菜单数据
// 获取所有菜单
async getMenuList() {
const {data: res} = await this.$http.get('menus')
if (res.meta.status !== 200) return this.this.$message.error(res.meta.msg)
this.menulist = res.data
console.log(res);
},
侧边栏菜单的伸缩
定义isCollapse属性默认false，点击切换状态
el-aside :width="isCollapse ? '64px' : '200px'">
// 点击按钮 切换菜单的折叠与展开
toggleCollapsse() {
this.isCollapse = !this.isCollapse
},
用户列表功能
用到了以下element ui组件，记得按需导入在element.js中注册
- BreadCRUMB面包屑导航
- Card卡片视图
- Form表单
- Table表格
- DIalog对话框
- Pagination分页
- Tooltip文字提示- Switch开关
- MessageBox
element ui 按需导入
面包屑导航区域
首页
用户管理
用户列表
卡片视图区域、搜索框、添加按钮
添加用户
搜索功能的实现
将值利用绑定到queryInfo.query
// 获取用户列表的参数对象
queryInfo: {
query: '',
// 当前的页数
pagenum: 1,
// 当前每页显示多少条数据
pagesize: 2,
},
获取用户列表数据
分页
-
element.js中导入组件Pagination
-
更改组件中的绑定数据
@size-change:监听pagesize改变的事件
@current-change:监听页码值改变的事件
:current-page:当前页
:page-sizes：一页的的信息条数
:page-size:当前的页数
layout:控制显示内容
:total：总共的信息条数 -
代码
@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”
>
修改用户状态
swich开关
发送put请求时携带一个用户id和用户状态，请求失败将按钮重置并提示报错，请求成功消息提示
// 监听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('更新用户状态成功！')
},
4.权限管理模块
权限列表
使用三重嵌套for循环生成权限下拉列表
{{item1.authName}}
{{item2.authName}}
{{item3.authName}}
角色列表
-
新建组件，创建路由
-
面包屑导航
-
卡片视图
-
在data中添加一个rightsList数据，在methods中提供一个getRightsList方法发送请求获取权限列表数据，在created中调用这个方法获取数据,同时在页面上写出卡片的视图区域
-
export default { data(){ return { roleList:[] } },created(){ this.getRoleList(); },methods:{ async getRoleList(){ const {data:res} = await this.$http.get('roles') //如果返回状态为异常状态则报错并返回 // if (res.meta.status !== 200) // return this.$message.error('获取角色列表失败') // //如果返回状态正常，将请求的数据保存在data中 // this.roleList = res.data console.log(res.data) this.roleList = res.data; } }-
卡片视图的区域
添加角色 编辑 删除 分配权限
-
-
权限删除功能
给每一个权限的el-tag添加closable属性，是的权限右侧出现“X”图标
再给el-tag添加绑定close事件处理函数removeRightById(scope.row,item1.id)
removeRightById(scope.row,item2.id)
removeRightById(scope.row,item3.id)
//根据Id删除对应的权限
async removeRightById(role,rightId){
//弹框提示用户是否删除
const confirmRes=await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
//如果用户点击确认，则confirmResult 为'confirm'
//如果用户点击取消, 则confirmResult获取的就是catch的错误消息'cancel'
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err => err)
if(confirmRes!=='confirm'){
return this.$message.info('取消了删除！')
}
//用户点击了确定表示真的要删除
//当发送delete请求之后，返回的数据就是最新的角色权限信息
const {data:res}=await this.$http.delete(`roles/${role.id}/rights/${rightId}`)
if(res.meta.status!==200){
return this.$message.error('删除权限失败！')
}
//无需再重新加载所有权限
//只需要对现有的角色权限进行更新即可
role.children=res.data
this.$message.success('删除权限成功！')
}
5.商品管理模块
商品分类
懒得写了，拜拜家人们