(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
)