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

)

你可能感兴趣的:(vue.js,node.js,javascript)