黑马vue电商后台管理系统总结_奥特蛋_黑马电商后台管理系统

irpas 02-07 1826

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-formel-form-itemel-inputel-button字体图标创建登陆组件

在components文件夹中新建Login.vue组件

template，script，style标签,style标签中的scoped可以防止组件之间的样式冲突

<template> <div>   </div> </template> <script> export default { data() { return {} } } </script> <style lang="less" scoped> </style>

配置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'"> <div class="toggle-button" @click="toggleCollapsse">🔺</div> // 点击按钮切换菜单的折叠与展开 toggleCollapsse() { this.isCollapse = !this.isCollapse }, 用户列表功能

用到了以下element ui组件，记得按需导入在element.js中注册

BreadCRUMB面包屑导航Card卡片视图Form表单Table表格DIalog对话框Pagination分页Tooltip文字提示- Switch开关MessageBox element ui 按需导入面包屑导航区域  <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> 卡片视图区域、搜索框、添加按钮  <el-card>  <el-row :gutter="20"> <el-col :span="8"> <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList" > <el-button slot="append" icon="el-icon-search" @click="getUserList" ></el-button> </el-input> </el-col>  <el-col :span="4"> <el-button type="primary" @click="addDialogVisible = true" >添加用户</el-button > </el-col> </el-row> </el-card> 搜索功能的实现

将值利用绑定到queryInfo.query

// 获取用户列表的参数对象 queryInfo: { query: '', // 当前的页数 pagenum: 1, // 当前每页显示多少条数据 pagesize: 2, }, 获取用户列表数据 <script> export default { data() { return { //获取查询用户信息的参数 queryInfo: { query: '', pagenum: 1, pagesize: 2 }, //保存请求回来的用户列表数据 userList:[], total:0 } }, created() { this.getUserList() }, methods: { async getUserList() { //发送请求获取用户列表数据 const { res: data } = await this.$http.get('users', { params: this.queryInfo }) //如果返回状态为异常状态则报错并返回 if (res.meta.status !== 200) return this.$message.error('获取用户列表失败') //如果返回状态正常，将请求的数据保存在data中 this.userList = res.data.users; this.total = res.data.total; } } } </script> 分页 element.js中导入组件Pagination更改组件中的绑定数据 @size-change:监听pagesize改变的事件 @current-change:监听页码值改变的事件 :current-page:当前页 :page-sizes：一页的的信息条数 :page-size:当前的页数 layout:控制显示内容 :total：总共的信息条数代码 <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> 修改用户状态

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循环生成权限下拉列表

<el-table-column type="expand"> <template slot-scope="scope"> <el-row :class="['bdbottom',i1===0?'bdtop':'','vcenter']" v-for="(item1,i1) in scope.row.children" :key="item1.id">  <el-col :span="5"> <el-tag closable @close="removeRightById(scope.row,item1.id)">{{item1.authName}}</el-tag> <i class="el-icon-caret-right"></i> </el-col>  <el-col :span="19"> <el-row :class="[i2===0?'':'bdtop','vcenter']" v-for="(item2,i2) in item1.children" :key="item2.id"> <el-col :span="6"> <el-tag type="success" closable @close="removeRightById(scope.row,item2.id)">{{item2.authName}}</el-tag> <i class="el-icon-caret-right"></i> </el-col> <el-col :span="18"> <el-tag type="warning" v-for="item3 in item2.children" :key="item3.id" closable @close="removeRightById(scope.row,item3.id)">{{item3.authName}}</el-tag> </el-col> </el-row> </el-col> </el-row> </template> </el-table-column> 角色列表

新建组件，创建路由

面包屑导航

卡片视图

在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-card>  <el-row> <el-col> <el-button type="primary" @click="addDialogVisible=true">添加角色</el-button> </el-col> </el-row>   <el-table row-key="id" :data="roleList" border stripe> <el-table-column type="expand"> </el-table-column> <el-table-column label="#" type="index"></el-table-column> <el-table-column label="角色名称" prop="roleName"></el-table-column> <el-table-column label="角色描述" prop="roleDesc"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope" width="300px"> <el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.id)">编辑</el-button> <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeRoleById(scope.row.id)">删除</el-button> <el-button size="mini" type="warning" icon="el-icon-setting" @click="showSetRightDialog(scope.row)">分配权限</el-button> </template> </el-table-column> </el-table> </el-card> 权限删除功能

给每一个权限的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.商品管理模块商品分类

懒得写了，拜拜家人们