vue实战项目：电商管理系统实现步骤笔记(一)

视频地址以及项目文件

这个是跟着B站的学习视频记下的实现步骤笔记
vue实战项目：电商管理系统
视频中使用到的文件工具等
链接：https://pan.baidu.com/s/11up4_D1Fldi0APSbhoqvFg
提取码：a1q2

一、项目概述

1.1电商项目基本业务概述

根据不同的应用场景，电商系统一般都提供了pc端、移动APP、移动Web、微信小程序等多种终端访问方式。

1.2电商后台管理系统的功能

电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等功能业务

1.3电商后台管理系统的开发模式（前后端分离）

电商后台管理系统整体采用前后端分离的开发模式，其中前端项目是基于Vue技术栈的SPA项目。

1.4电商后台管理系统的技术选型

1.4.1前端项目技术栈

Vue、vue-router、Element-UI、Axios、Echarts

1.4.2后端项目技术栈

Node.js、Express、Jwt(状态保持工具，登录记录)、Mysql、Sequelize（操作数据库的框架）

二、项目初始化

2.1前端项目初始化步骤

1. 安装vue脚手架 vue -V@vue/cli验证是否安装vue-cli
2. Vue ui 通过vue脚手架创建项目 （中途卡住了，安装了淘宝镜像，然后把项目已生成的文件夹删除了重新来了一次，项目就创建成功npm install -g cnpm
   –registry=https://registry.npm.taobao.org）
3. 配置Vue路由
4. 配置Element-UI组件库 Vue-cli-plugin-element然后进行配置 import on demond
5. 配置axios库 安装axios依赖
6. 初始化git远程仓库
7. 将本地项目托管到GitHub或码云中

2.2后台项目的环境安装配置

1. 安装Mysql数据库 PHPstudy，我未下载，我使用的是Navicat
2. 安装Node.js环境
3. 配置项目相关信息
4. 启动项目
5. 使用postman测试后台项目接口是否正常

三、登录/退出功能

3.1登录概述

3.1.1登录业务流程

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

3.1.2登录业务的相关技术点

• HTTP是无状态的
• 通过cookie在客户端记录状态（不存在跨域问题）
• 通过session在服务器端记录状态（不存在跨域问题）
• 通过token方式维持状态（存在跨域问题）

3.2登录-token原理分析

3.3登录功能实现

3.3.1登录页面的布局

通过Element-UI组件实现布局

• el-form
• el-form-item
• el-input
• el-button
• 字体图标

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

如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面

// 为路由对象，添加beforeEach导航守卫
router.beforeEach((to, from, next) => {
  // 如果用户访问的登录页，直接放行
  if (to.path === '/login') return next()
  // 从sessionStorage中获取到保存的token值
  const tokenStr = window.sessionStorage.getItem('token')
  //没有token，强制跳转到登录页
  if (!tokenStr) return next('/login')
  next()
})

3.3.3退出功能

退出功能实现原理：
基于token的方式实现退出比较简单，只需要销毁本地的token即可，这样，后续的请求就不会携带token，必须重新登录生成一个新的token之后才可以访问页面。

// 清空token
window.sessionStorage.clear()
// 跳转到登录页
this.$router.push('/login')

四、解决ESLint报错问题

可以把报错的语法复制到
文件的rule中，后面冒号：0即可

五、主页布局

5.1整体布局

整体布局：先上下划分，再左右划分

• el-container

• el-header

• el-aside

• el-main

进UI组件查看container布局容器

5.2左侧菜单布局

菜单分为二级，并且可以折叠

• el-menu

• el-submenu

• el-menu-item

5.3通过接口获取菜单数据

通过axios请求拦截器添加token，保证拥有获取数据的权限。

// axios请求拦截
axios.interceptors.request.use(config => {
  // 为请求头对象，添加Token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})