目录
源码
1.系统功能设计
技术栈:采用前后端分离的开发模式
前端:Vue3、Vue-router、Element-Plus、Axios、Echarts
后端:Node.js、Express、Jwt、Mysql、Sequelize
2.项目初始化
打开cmd,输入vue ui(vue-cli版本要大于3.0,否则更新一下:npm install -g @vue/cli)
进入可视化管理页面开始创建项目,安装babel、Router、Linter/Formatter,并且使用配置文件。
项目创建完,配置Element-Plus(按需求导入)、axios、less和less-load。
在github上托管项目,仓库名为ec-manage-system。
// 本地库和远程库建立关联
git remote add origin git@github.com:yx-Feng/ec-manage-system.git
git add .
git commit -m "初始化项目"
// 推送本地的main分支,带上-u参数其实就相当于记录了push到远端分支的默认值,下次可简写成git push
git push -u origin main
使用phpstudy运行MySQL,在Navicat中导入mydb.sql脚本文件。
安装Node.js,配置后台项目,使用Postman测试后台项目接口是否正常。
// 使用express脚手架初始化项目
npm install express-generator -g
express back-end
3.登录/退出功能
登录业务流程
①在登录页面输入用户名和密码
②调用后台接口进行验证
③通过验证之后,根据后台的响应状态跳转到项目主页
http是无状态的,如果前后端存在跨域,需要通过token方式维持状态。
// 新建一条分支login, 并切换到这条分支
git checkout -b login
git branch