前端项目开发总结：电商后台管理系统

前言：

这篇文章主要总结自己在学习电商后台管理系统课程中遇到的问题及其解决方法，和学到的知识；页面样式之类的就不做整理了

注：很多模块的添加，编辑删除等功能实现都比较相似，在弹窗之前 调用相应的api拿到数据渲染就行了，就不进行整理了

涉及的前端技术栈：

• Vue
• Vue-router
• Element-UI
• Axios
• Echarts

一、项目主要功能模块划分

• 项目初始化
• 登录/退出功能
• 主页布局
• 用户管理模块
• 权限管理模块
• 分类管理模块
• 参数管理模块
• 商品列表模块
• 订单管理模块
• 数据统计模块

二、各功能模块的实现

2.1 项目初始化

2.1.1 前端项目初始化：

• 通过Vue-cli 创建项目
• 配置Vue路由
• 配置 ElementUi
• 配置 axios
• 初始化git仓库并托管到gitee/github中

2.1.2 配置后台项目环境

• 安装 MySql
• 安装 node.js
• 配置，启动项目
• 使用postman测试接口

2.2 登录/退出功能

相关技术点：

1. 首先http是没有状态的；
2. 通过cookie在客户端记录状态；
3. 通过session在服务器端记录状态；
4. 利用token方式维持状态；

有些功能模块和页面，要求用户必须登录之后才可以查看，在后面的各个功能模块中，我们需要发送大量的请求来获得数据，再进行页面渲染等操作，那么就需要判断用户的登录状态，登录成功后，才可以拿到相应的数据

2.2.1 实现登录功能：

很简单，直接使用axios发送请求并对服务器返回的数据进行处理即可

2.2.2 路由导航守卫控制访问权限：

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to代表 将要访问的路径
  // from 代表从哪个路径跳转而来
  //  next 是一个函数表示放行

  if (to.path === '/login') return next()

  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

2.2.3 基于 ElementUi 表单验证

通过:rules绑定表单验证规则的对象
在表单上通过ref属性绑定之后，通过$refs拿到对应的表单对象，然后调用validate方法进行表单验证

 // 使用validate方法进行登录前的预校验
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return
        const { data: res