电商后台管理详情

一、项目结构的搭建

封装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封装请求接口函数，这样可以将异步操作同步化操作，代码更加友好，避免回调地域的出现。

具体封装步骤可以去看axios的封装

多环境变量的配置

在项目根目录中新建.env.*
.env.development本地开发环境配置
.env.staging 测试环境配置
.env.production 正式环境配置
配置对应环境的变量，，用户可以根据需求修改，根据环境不同，变量就会不同了

具体封装步骤可以去看多环境变量

二、开发流程

1. 用户管理模块
   登录/退出、状态切换、编辑、分页、分配角色、面包屑导航切换
2. 权限管理模块
   添加角色、分配权限、权限展示、编辑、删除权限、面包屑导航切换
3. 商品管理模块
   添加商品、编辑、分页、添加参数、添加属性、选择分类、添加分类
4. 订单管理模块
   数据渲染、分页
5. 数据统计模块
   echarts图表、数据渲染

1.登录以及退出

登录的业务流程

• 在登录页面输入用户名和密码
• 调用后台接口进行验证
• 通过验证后，根据后台的响应状态跳转到项目主页

登录业务的相关技术点

• 通过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>

实现登录功能

给登录按钮添加点击事件，当用户点击登录按钮时，如果当前所输入的账号信息合法，则允许向服务器发送登录请求，服务器根据请求信息检查当前账号是否正确，并返回响应信息，客户端通过返回的响应信息做出相应响应，即若账号密码错误则提示登陆失败，反之，登陆成功，将当前的token存储至本地并跳转至后台主页。

退出

• 清空token
• 跳转到登录页

// 给退出的按钮绑定一个logout事件
logout() {
   
   
      // 清空token
      window.sessionStorage.clear()
      // 跳转到登录页
      this.$router.push