Vue前后端分离的电商后台管理系统项目的概述

（1）该项目是基于前后端分离的开发模式，基于Vue技术栈的SPA单页面项目，

后端主要操作数据库并向前端暴露一些API接口

前端主要负责绘制页面同时，利用Ajax调用后端提供的接口。

这样的开发模式使得项目开发比较高，项目也比较容易维护。

前端项目主要用到的技术栈：vue、vue-router、element-plus前端组件库 、axios发起网络数据请求、echarts绘制相关的图形报表.

后端项目技术栈：node.js、express等。

（2）前端项目初始化：

安装vue脚手架、通过vue脚手架创建项目（通过可视化形式来创建项目）、配置vue路由、配置axios库、将项目托管到git远程仓库、将项目托管到GitHub或者马云中。

手动配置vue项目在功能面板选择的功能有：Babel、Router、Linter/Fomater（通过它可以将我们的代码进行格式校验、将代码风格一致化）、使用配置文件功能打开。

在插件里面安装对应的插件：element-plus（安装好后配置插件按需导入）、在依赖中添加插件axios（运行依赖）

（3）后台项目的环境安装配置：

安装MySQL数据库

安装node.js环境

配置项目相关信息

启动项目（npm install 安装依赖，运行相关API接口项目）

使用postman测试后台接口是否正常

一、登录业务流程：

登录业务相关的技术点：

http是无状态的

通过cookie在客户端的记录状态

通过session在服务器端记录状态

通过token方式维持状态（存在跨域问题则选用token）

（当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域）

通过element-plus组件实现布局，登陆验证使用axios包实现ajax请求.

客户端请求数据,保证后端API正在运行(即启动服务器).

将登陆成功后的的token保存在sessionStorage中，项目中的除了登录之外的其他接口必须要登录之后才能访问，token只应在当前网站期间生效，所以token保存在sessionstorage中。

通过编程式导航跳转到后台主页（this.$router.push('/home')）

通过挂载路由导航守卫来控制页面的访问权限

完成登录功能，提交到远程仓库

git status    //查看当前源代码状态

git checkout -b login  //创建子分支login登录功能，并使用checkout切换到login子分支中

git branch  //查看当前所处的分支

git add .   将项目功能添加到暂存区

git commit -m '完成'  将暂存区代码提交到本地仓库login中

git checkout master 切换到master

git merge login 将login代码合并到master主分支中

git push 将本地最新的master主分支推送到远程仓库中

git checkout login 切换到login分支

git push -u origin login 将该分支功能推送到远程仓库中并命名为login

(

git branch -a查看有没有你需要切换的分支（git branch加上-a可以查看本地和远程所有分支）

git fetch(取回所有更新分支信息)

git branch -a(此时可以查看到dev分支)

git checkout XX

)