电商后台管理项目业务概述

• 客户使用的业务服务：PC端，小程序，移动web，移动app
• 管理员使用的业务服务：PC后台管理端。
• PC后台管理端的功能：管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计
• 电商后台管理系统采用前后端分离的开发模式
• 前端项目是基于Vue的SPA（单页应用程序）项目
• 前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts
• 后端技术栈：Node.js,Express,Jwt(模拟session),Mysql,Sequelize(操作数据库的框架)

项目初始化

• 安装Vue脚手架
• .通过脚手架创建项目
• 配置路由
• 配置Element-UI:在插件中安装，搜索vue-cli-plugin-element
• 配置Axios：在依赖中安装,搜索axios(运行依赖)
• 初始化git仓库
• 将本地项目托管到github或者码云中

码云相关操作

• 注册登录码云账号
• 安装git
• 点击网站右上角“登录”，登录码云，并进行账号设置
• 将本地代码托管到码云中

配置后台项目

• 安装phpStudy并导入mysql数据库数据
• 安装nodeJS，配置后台项目,从终端打开后台项目vue_api_server
• 使用postman测试api接口

实现登录功能

• 登录状态保持
• 如果服务器和客户端同源，建议可以使用cookie或者session来保持登录状态如果客户端和服务器跨域了，建议使用token进行维持登录状态。
• 登录逻辑
• 在登录页面输入账号和密码进行登录，将数据发送给服务器，服务器返回登录的结果，登录成功则返回数据中带有token
  客户端得到token并进行保存，后续的请求都需要将此token发送给服务器，服务器会验证token以保证用户身份。
• 添加新分支login，在login分支中开发当前项目vue_shop：

登录成功之后的操作

• 登录成功之后，需要将后台返回的token保存到sessionStorage中，操作完毕之后，需要跳转到/home
• 添加路由守卫
• 如果用户没有登录，不能访问/home,如果用户通过url地址直接访问，则强制跳转到登录页面
• 实现退出功能
• 在Home组件中添加一个退出功能按钮,给退出按钮添加点击事件，添加事件处理代码如下：
• logout(){ window.sessionStorage.clear(); this.$router.push('/login'); }

处理ESLint警告

-打开脚手架面板，查看警告信息

• 默认情况下，ESLint和vscode格式化工具有冲突，需要添加配置文件解决冲突。在项目根目录添加 .prettierrc 文件
• { "semi":false, "singleQuote":true }
• 打开.eslintrc.js文件，禁用对 space-before-function-paren 的检查代码添加规则如下：
• 'space-before-function-paren' : 0