vue2实现电商后台管理的思路

电商后台管理系统分为6大模块

一：用户登录 / 退出

二：用户管理

• 用户列表：实现用户的增删改查，分页以及分配角色功能

三：权限管理

• 3-1：角色列表：实现角色的增删改以及分配权限功能
• 3-2：权限列表：展示所有权限以及权限等级

四：商品管理

• 4-1：商品列表：实现商品的增删改，分页查询功能
• 4-2：分类参数：实现动态参数和静态参数的增删改
• 4-3：商品分类：实现商品分类的增删改以及查看分类下所有的子分类

五：订单管理

• 订单列表
  • 实现修改地址
  • 实现查看物流进度        

六：数据统计

• 数据报表

                                                                                                                                                           

前端技术栈：vue，vue-router，element-ui，axios，echarts

项目初始化步骤：

1. 安装vue脚手架
2. 通过vue脚手架创建项目
3. 配置vue路由
4. 配置element-ui组件库
5. 配置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属性传递过去

登录页--布局代码