电商后台管理详情

后台管理项目介绍

• 一、项目结构的搭建
• • • 封装axios
    • 多环境变量的配置
• 二、开发流程
• • • 1.登录以及退出
    • • 登录的业务流程
      • 登录业务的相关技术点
      • • token原理分析
      • 登陆页面的布局
      • • 用到了以下的elment ui组件
      • 创建登陆组件
      • 实现登录功能
      • 退出
    • 2.主页面布局、用户列表功能
    • • 主页面布局
      • 侧边栏的布局以及渲染 请求数据
      • 侧边栏菜单的伸缩
      • 用户列表功能
      • 面包屑导航区域
      • 卡片视图区域、搜索框、添加按钮
      • 搜索功能的实现
      • 获取用户列表数据
      • 分页
    • 3.权限管理模块
    • • 权限列表
      • 角色列表
    • 4.商品管理
    • • 商品分类
    • 5.订单管理
    • 6.数据统计
• 打包

一、项目结构的搭建

封装axios

首先要安装axios，一般我会在项目的src目录中，新建一个network文件夹,作为我们的网络请求模块，然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口url

在request.js中添加请求拦截和响应拦截。在请求拦截中，会给请求头添加token字段，还有loading动画的开启。在响应拦截中，可以做一些loading动画的关闭，还有可以根据后端返回的状态码，做一些检验token是否有效或者过期的操作。接着就是做一些axios进行的api接口的封装，这里我用到了async，await封装请求接口函数，这样可以将异步操作同步化操作，代码更加友好，避免回调地域的出现。

具体封装步骤可以去看