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可以防止组件之间的样式冲突

<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.dataconsole.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”
>

修改用户状态

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_statereturn 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.dataconsole.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><!-- 角色列表区 --><!-- row-key="id" 是2019年3月提供的新特性，if there's nested data, rowKey is required.如果这是一个嵌套的数据，rowkey 是必须添加的属性 --><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.datathis.$message.success('删除权限成功！')}

5.商品管理模块

商品分类

懒得写了，拜拜家人们

黑马vue电商后台管理系统总结相关推荐

9.1黑马Vue电商后台管理系统商品管理模块完善：编辑商品的功能
在原视频中,老师跳过了这个功能,我觉得自己去实现也可以锻炼自己,于是自己补充了编辑功能同用户管理,权限管理等之前各个模块的编辑功能不同,因为商品具有很多可编辑的选项,所以选择像添加商品一样,单独放在 ...
10.1 黑马Vue电商后台管理系统之完善订单管理模块--加入修改订单模块
效果如下: 实现如下: 1.我仍然保留了添加地址这一个对话框,但只是绑定在另一个按钮上面,而点击左侧第一个按钮就会跳转到"修改订单"模块 <template v-slot=& ...
10.2 黑马Vue电商后台管理系统完善订单模块--搜索订单（修改后端）
效果如下: 搜索时列表动态变化,在我专栏下另一篇文章写了,这篇文章不再讲述,这篇文章只讲述如何从后端(打开vue_api_server这个文件夹,而不是vue_shop)修改代码来实现这个功能我的思 ...
Vue电商后台管理系统（1）
Vue电商后台管理系统(1) 登录在components文件夹下创建登录组件,Login.vue,并快速生成template.script和style骨架. 配置路由,进入router文件夹,导入L ...
Vue电商后台管理系统项目开发实战（一）
前言当下根据不同的应用场景,电商系统一般都提供了PC端,移动APP,移动Web,微信等多种访问方式.如下图. 不同的客户端共用同一个服务器,数据库,API.本次项目着重设计PC后台管理,供电商后台管 ...
关于黑马-Vue电商后台项目管理（2）
2.2 后台项目的环境安装配置安装MySQL数据库关于数据库文件,黑马教程有提供一个叫phpstudy的软件,可以按照视频流程进行配置,但是之后可能会经常出现在该软件无法启动mysql.因此我们这 ...
vue电商后台管理系统--订单管理篇
渲染订单table表格 <el-table :data="orderList" border stripe><el-ta ...
html全局布局 vue_基于Vue+Element的电商后台管理系统
前言 mall项目后台管理系统的前端项目. 项目介绍 mall-admin-web是一个电商后台管理系统的前端项目,基于Vue+Element实现. 主要包括商品管理.订单管理.会员管理.促销管理.运 ...
Vue全家桶 - 电商后台管理系统项目开发实录（详）
目录 1. 项目概述 1.1 电商项目基本业务概述 1.2 电商后台管理系统的功能 1.3 电商后台管理系统的开发模式(前.后端分离) 2. 项目初始化 2.1 前端项目初始化步骤码云相关操作 2. ...
【Vue】实战项目：电商后台管理系统（Element-UI）（一）前后端搭建 - 登录界面 - 主页界面
文章目录 0. 项目介绍电商管理系统(Element-UI) 开发模式前端技术栈后端技术栈 1. 配置--初始化前端项目 ① 安装 Vue 脚手架 ② 通过 Vue 脚手架创建项目 ③ 配置 ...

黑马vue电商后台管理系统总结

vue电商后台管理系统-阶段总结

一、项目技术栈

前端

后端

数据库

二、开发流程

1.项目初始化

2.后台配置

3.登录以及退出

登录的业务流程

登录业务的相关技术点

token原理分析

登陆页面的布局

用到了以下的elment ui组件

创建登陆组件

退出

3.主页面布局、用户列表功能

主页面布局

侧边栏的布局以及渲染请求数据

侧边栏菜单的伸缩

用户列表功能

面包屑导航区域

卡片视图区域、搜索框、添加按钮

搜索功能的实现

获取用户列表数据

分页

修改用户状态

4.权限管理模块

权限列表

角色列表

权限删除功能

5.商品管理模块

商品分类

黑马vue电商后台管理系统总结相关推荐

最新文章

热门文章

黑马vue电商后台管理系统总结

vue电商后台管理系统-阶段总结

一、项目技术栈

前端

后端

数据库

二、开发流程

1.项目初始化

2.后台配置

3.登录以及退出

登录的业务流程

登录业务的相关技术点

token原理分析

登陆页面的布局

用到了以下的elment ui组件

创建登陆组件

退出

3.主页面布局、用户列表功能

主页面布局

侧边栏的布局以及渲染 请求数据

侧边栏菜单的伸缩

用户列表功能

面包屑导航区域

卡片视图区域、搜索框、添加按钮

搜索功能的实现

获取用户列表数据

分页

修改用户状态

4.权限管理模块

权限列表

角色列表

权限删除功能

5.商品管理模块

商品分类

黑马vue电商后台管理系统总结相关推荐

最新文章

热门文章

侧边栏的布局以及渲染请求数据