vue2实现电商后台管理的思路
电商后台管理系统分为6大模块
一:用户登录 / 退出
二:用户管理
用户列表:实现用户的增删改查,分页以及分配角色功能
三:权限管理
- 3-1:角色列表:实现角色的增删改以及分配权限功能
- 3-2:权限列表:展示所有权限以及权限等级
四:商品管理
- 4-1:商品列表:实现商品的增删改,分页查询功能
- 4-2:分类参数:实现动态参数和静态参数的增删改
- 4-3:商品分类:实现商品分类的增删改以及查看分类下所有的子分类
五:订单管理
- 订单列表
- 实现修改地址
- 实现查看物流进度
六:数据统计
- 数据报表
前端技术栈:vue,vue-router,element-ui,axios,echarts
项目初始化步骤:
- 安装vue脚手架
- 通过vue脚手架创建项目
- 配置vue路由
- 配置element-ui组件库
- 配置axios
基础配置:对axios进行第一次封装,在src下新建unitils文件夹,里面新建一个request.js文件(名字自定义)
在src下边新建一个api文件夹,在文件夹里新建http.js文件,引入axios,store,element-ui,在axios.create中设置baseURL基础路径,timeout超时时间,声明一个server变量接收,通过server.interceptors.request.use设置请求拦截,如果请求成功,判断vx是否存有token,如果有,就加在请求头中,如果请求失败,通过Promise.reject将失败的信息返回出去
通过server.interceptors.response.use设置响应拦截,可以先从后台返回的状态入手,定义一个code接收后台返回的状态,先判断后台返回的消息是否为‘无效token’(这里一般是和后台对接好了返回40001等等状态),如果是,则给予对应提示,然后让页面跳转到登录页。如果想更细一点,继续判断400,401等,然后给对应的提示
可以对错误信息精确描述,比如后端连接异常或者请求超时,也可以给对应的请求.别忘了把我们定义的server导出
此时我们axios第一次封装结束,我们可以顺带去store中装上固化插件
然后对axios进行二次封装,在与http.js同级再定义一个api.js,然后引入http.js,定义方法请求后台数据,比如这里我们定义请求登
登录的接口
一:登录模块
在views下建一个Login文件夹里面新建index.vue组件,使用element-ui中的form表单
:model绑定成自己定义的表单数据,也就是用户名和密码所在对象
:rules为自己定义的正则
ref是这个表单的dom元素
给登录和重置绑定事件并把绑定的ref属性传递过去
登录页--布局代码
实现页面
登录业务逻辑
表单验证:用户在输入账号和密码后,点击登录时表单会进行预验证,判断用户输入的账号和密码是否符合规范,验证通过后向服务器发送 axios
请求
验证规则:
然后引入我们定义请求登录接口的方法,点击登录后把定义的表单数据作为后端需要的参数传递过去,通过.then进行接下来的操作,我们可以去store中定义一个存储token的方法,顺带也定义了一个移除token 的方法,比如我们退出登录后需要用到,在页面中通过this.$store.commit调用mutations里的方法,把后台返回的token传过去
路由导航守卫:我们可以去router中把路由定义一下,顺带放一个路由前置守卫,在里面我们可以判断如果将要去的路由不是登录页,那我们可以先获取vuex中存的token,如果存有token证明用户登陆过,则让其跳转,反之,返回登录页,如果要去的是登录页,直接放行,注意这里router.beforeEach要放在我们const router的下面写,否则会因为找不到router报错,然后通过this.$router.push('/home‘)跳转到home页面
登录成功后的效果:
登录后的主页(home)部分:
主页路由设置:左侧菜单对应的路由一般在公司大型项目中是动态生成的,这里我们是手写静态路由,后面会再写一遍告诉大家如何用动态路由实现,现在我们可以根据左侧菜单返回的数据定义路由,把home当作父级路由,把左侧菜单栏跳转的路由写成子路由
home主页布局:引入
Element-UI
中的Header
Aside
Main
组件
isCollapse为控制左侧菜单栏的显示隐藏
:default-active为默认显示的路由
router为开启路由模式
菜单的显示使用一个双重for循环,
:index为唯一标识,我们可以设为item.path,因为每个路径也是唯一的
至于内层for循环的:index也是同样的道理设为ele.path
别忘了在右侧的el-main中加入router-view坑,否则显示不了子路由的内容
接下来是逻辑部分,引入我们在api.js中定义的请求左侧菜单接口的方法
isCollapse是控制左侧菜单的显示与隐藏,menusList用来存储后台返回的左侧菜单栏数据,我们在methods中封装一个方法里边发送这个请求,把返回的数据给menusList赋上,然后在created里边调用这个方法。
当我们点击退出时,提示是否退出,如果是,则调用vuex的方法清除token,并退回到登录页,至此,我们home页结束,登录模块完成
二、用户模块
引入我们需要用到的接口,头部是element-ui面包屑导航
userData为返回的表格数据
dialogVisible1为控制点击分配权限时模态框显示与隐藏的变量
title为点击添加,编辑的提示语句,因为我们编辑和添加用的是同一个模态框,所以我们用title来判断是添加还是编辑
dialogVisible为控制点击添加或编辑时模态框显示与隐藏的变量
total后台返回的总数据条数
addForm为绑定后台需要的用户名,密码,邮箱,手机号,
addFormRules正则
roleId为下拉框选择完成后该项的id
region为角色列表
搜索部分,里面有后台需要的关键字query,总条数total,当前页pagenum,每页多少条pagesize,给搜索绑定事件
在methods里面封装一个方法里面是分页的接口数据,发送完请求之后给数据赋值,然后在created调用这个方法,
在页面上搜索按钮那里直接给个点击事件直接调用数据
分页部分
@size-change为每页多少条改变时触发,比如我们一上来每页只让显示两条,当我们切换至4条每页时就会触发
@current-change为每页改变时触发,比如我们一上来为第1页。当我们点击第2页时就会触发
:page-sizes为可供选择每页选则条数的选项
:page-size为每页显示多少条
total就是一共多少条
点击添加,模态框显示,把title改成添加用户
点击编辑把title改成编辑,模态框显示,数据回填
模态框关闭时 ,数据清空
点击确定添加或编辑,先判断title是编辑还是添加用户,然后传入后台对应的参数
分配权限
点击分配权限弹出模态框,数据回填,选择完时通过获取到的数据把id赋值
点击确定添加时,传递需要的数据,完成分配,再渲染页面
效果图:
三:权限管理模块
- 角色列表
请求角色列表数据,渲染到表格,编辑添加可以使用同一个模态框,绑定动态title判断添加还是编辑,传入后台要求数据完成功能,点击删除传入id完成。点击分配权限弹出模态框,发送请求,请求所有权限的列表在树形图中,通过递归方法把该权限自带的权限回填到树形图中,即复选框呈选中状态,因为我们请求所有列表是异步的,点击分配权限是同步的,所以会造成数据闪动情况,我们可以给弹出框加个定时器,让他也是异步执行,最后就是点击每项显示标签,根据样式,我们可以把返回的数据分为左右结构,右边的又可以分为左右结构,遍历到该项下面,点击X时,传入该项id和该权限id完成删除
展示当前角色下的所有权限:当用户点击某个角色的下拉箭头时,该角色的所有权限数据会以类似于树结构的形式展示出来。用户也可以删除该角色下的某个权限。
- 为表格设置 type=“expand” 和
Scoped slot
可以开启展开行功能,el-table-column
的模板会被渲染成为展开行的内容,展开行可访问的属性与使用自定义列模板时的Scoped slot
相同。 - 通过
scope.row
可以获取该行也就是该角色的数据
角色列表效果图:
业务逻辑:
通过 scope.row 获取的数据就是该角色的所有信息,数据是一个对象,每一个对象下都有一个 children 属性,这个 children 属性就是该角色的所有权限了,children 是一个数组,每一个 children 属性下又嵌套这一个 children 属性,一共嵌套三层,这分别就是该角色下的一级、二级、三级权限了。
可以循环 children 下的每个对象,就可以把一级权限渲染出来,在每一个一级权限中又嵌套着二级权限,所以,要想渲染出所有的一级、二级、三级权限需要使用三层 v-for 循环的嵌套。
- 权限列表:请求权限列表数据,渲染页面,权限等级哪里用一个三元表达式,根据返回的level等级渲染对应的样式
权限列表效果图:
三:商品管理
- 商品列表 :
请求商品列表数据,其中一个创建时间,可以引入一个时间格式化工具,在main..js中定义一个全局过滤器,在要格式化数据的通过 | 管道符 调用全局的过滤器方法完成,删除即传一个id给后台,删除对应数据,点击添加时跳进添加的页面,引入组件tab和step,第一级判断级联菜单三级是否都选中,只有都选中才可以进行下一步操作,商品参数则请求参数列表,其sel为many,商品属性sel为only,上传图片也需要引入element一个upload组件,商品内容则需要引入一个富文本插件
分类参数:
在element中引入一个级联菜单,把请求回来的三级分类数据在级联菜单中显示,引入一个tab切换的时候让其对应显示静态属性或者动态参数,通过级联菜单的事件。当我们选择完毕,判断该value绑定的数组长度是否为3,为3则获取对应参数,此时添加参数按钮解除禁用(默认禁用),可以点击添加参数,给对应的数据添加参数,或者属性,当我们点击参数或者属性时显示标签,当我们点击添加标签时,输入想要的内容,失焦或者回车添加该标签
商品分类:
点击添加角色弹出模态框,此时请求2级分类数据,点击完成或者模态框关闭此时请求三级分类数据,编辑添加可以使用同一个模态框,绑定动态title判断添加还是编辑,传入后台要求数据完成功能,点击删除传入id完成,这里用到一个element中的一个table表格,可以多层展开
四、订单管理
请求订单页面数据,其中一个下单时间,可以引入一个时间格式化工具,在main..js中定义一个全局过滤器,在要格式化数据的这里调用全局的方法完成,删除即传一个id给后台,删除对应数据
五、数据统计
报表页面:
引入echarts下载并引入,需要一个具备大小的容器在mounted中初始话这个echarts发送请求,把请求回来的数据配置一下,把这个配置好的数据付给echarts实列,如有需求的话 报表和页面一起缩小可以调用原生的方法window.resize,
至此,后台管理项目结束。
vue2实现电商后台管理的思路相关推荐
- scrm电商后台管理、公司管理、店铺管理、特卖活动、营销活动、订单管理、优惠券管理、商品管理、会员管理、标签管理、会员卡、签到配置、积分、拼团、砍价、快递配置、短信配置、充值、运营活动
scrm电商后台管理.公司管理.店铺管理.特卖活动.营销活动.订单管理.优惠券管理.商品管理.会员管理.标签管理.会员卡.签到配置.积分.拼团.砍价.快递配置.短信配置.充值.运营活动 Axure原型 ...
- 超市百货电商app移动端原型+通用模块全局规则说明+超市电商后台管理web端原型+超市电商产品原型及需求文档+业务后台(商品管理+广告管理+活动管理)
作品介绍:Axure原型内容主要包括:超市百货电商app移动端原型+文档变更记录+名词术语说明+产品业务功能框架+通用模块和全局规则说明(消息推送机制+输入提交规则+图片加载机制+权限类提示说明+搜索 ...
- 电商项目总结java_Vue 电商后台管理项目阶段性总结(推荐)
一.阶段总结 该项目偏向前端更多一点,后端 API 服务是已经搭建好了的,我们只需要用既可以,(但是作为一个 全栈开发人员,它的数据库的表设计,Restful API 的设计是我们要着重学习的!!!) ...
- 电商后台管理---Vue实战
1. 项目概述 1.1 电商项目基本业务概述 根据不同的应用场景,电商系统一般都提供了 PC 端.移动 APP.移动 Web.微信小程序等多种终端访问方式. 1.2 电商后台管理系统的功能 电商后台管 ...
- 电商后台管理---Vue项目运行问题记录
初学vue项目的小白,记录在github下载电商管理项目运行过程中碰到的问题. mysql数据库安装 推荐使用Navicat Premium,可以管理大部分的数据库,推荐使用. 配好mysql数据库环 ...
- 10.4 Vue电商后台管理 完善订单模块--用Tab切换对订单进行分类
1. 效果如下: 2. 实现代码 四个el-tab-pane中,< el-table >是一样的: <el-tab-pane name="all" label=& ...
- Vue+Element-UI 电商后台管理系统详细总结
一.概述 基于 Vue 和 Element-UI 的电商后台管理系统 1.1 实现功能 用户登录/退出 用户管理 用户列表 实现用户的增删改查.分页查询以及分配角色功能 权限管理 角色列表 实现角色的 ...
- 计算机毕业设计SSM电商后台管理系统【附源码数据库】
项目运行 环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
- 计算机毕业设计node.js+vue+Element电商后台管理系统
项目介绍 网络的广泛应用给生活带来了十分的便利.所以把电商后台管理与现在网络相结合,利用node技术建设电商后台管理系统,实现电商后台管理的信息化.则对于进一步提高电商后台管理发展,丰富电商后台管理经 ...
- Vue电商后台管理系统项目开发实战(一)
前言 当下根据不同的应用场景,电商系统一般都提供了PC端,移动APP,移动Web,微信等多种访问方式.如下图. 不同的客户端共用同一个服务器,数据库,API.本次项目着重设计PC后台管理,供电商后台管 ...
最新文章
- sap Bydesign 中解决添加元素或者字段时,多语言翻译的问题
- 使用宝塔面板安装Rocket.Chat多功能团队聊天室
- sql server2008系统表详细说明sys.开头的表
- 海量特征按照缺失值null/NAN数量异同进行分组归类
- LeetCode 161. 相隔为 1 的编辑距离(DP/遍历)
- NBU计算机专业期末考试记录
- 实战GraphQL+express+mysql项目完整demo
- “我来管管看”系列:如何消除报工数据与入库数据的差异?
- NOI2019游记 —— 夏花般绚烂,繁星般璀璨
- hive collect_set mysql group_concat
- 使用Duilib做的程序封装成DLL的显示加载与卸载问题
- stm32 OV7670摄像头模块的介绍以及应用(SCCB的使用)
- 如何计算加权和及矩阵乘法运算回顾
- SourceTree - 学习/使用
- 云图雅集—优美的文章段落
- 抖音限流概念及如何避免限流?
- 计算机防火墙不能更改,win7无法更改防火墙设置提示系统报错怎么办
- day09-1 列表,元祖的内置方法
- 联想天逸310-15ikb装固态内存和重装系统
- 可信云最高级认证 百度飞桨企业版BML就是这么飒!