![ad9037162ddae6a25ebd00909529d73c.png](https://i-blog.csdnimg.cn/blog_migrate/74510a0b5d926c3a3489eb369026b1a2.jpeg)
1. 简介
采用前后端分离开发模式,后端负责写接口,前端负责调接口。
前端项目是一个单页面应用程序(SPA),功能如下:
![2f2bc77d2fd11d6e1a32e33affd17d75.png](https://i-blog.csdnimg.cn/blog_migrate/851c2b5af7cad72cb6c2527f799846f5.png)
前端项目技术栈
- Vue
- Vue-router 路由
- Element-UI UI组件库
- Axios 网络数据请求
- Echarts 图形报表
后端项目技术栈
- Node.js
- Express
- Jwt 状态保持工具,免登陆
- Mysql 数据库
- Sequelize 操作数据库
2. 前端初始化
- 安装 Vue 脚手架
- 通过 Vue 脚手架创建项目
- 配置 Vue 路由
- 配置 Element-UI 组件库
- 配置 axios 库
- 初始化 git 远程仓库
- 将本地项目托管到 Github 或 码云 中
1. Windows+R 打开运行面板
2. 输入cmd 打开终端窗口
3. 执行命令 vue ui 浏览器会弹出vue项目管理器
4. 创建—选择路径—在此创建新项目
![83335d840c29c282882b5436e188b819.png](https://i-blog.csdnimg.cn/blog_migrate/cb4262de7054fe3d5a4af8c5b095f178.png)
5. 输入项目名称—git信息填:init project—下一步
![16928168e9f90b4ec26b5d19fb429e4a.png](https://i-blog.csdnimg.cn/blog_migrate/0459ddeeb28e092be78180049a14bb1a.png)
![29af3c66342f19109a1347ff490f3eda.png](https://i-blog.csdnimg.cn/blog_migrate/12cada1cfa45d453df9b1411e69aa2b3.png)
6. 手动— Babel Router Linter/F 使用配置文件 四项打开 —下一步
![f0eb10fa25d71cdd9e0642a5593fa40e.png](https://i-blog.csdnimg.cn/blog_migrate/d4cce8050d0a9f81521040d3bc6d6dfe.png)
![add83b4f78840f86c92599ed6b489ea3.png](https://i-blog.csdnimg.cn/blog_migrate/82cacd9282ddd8f5163de80c3c421241.jpeg)
7. ESLint + Standard config—Lint on save—保存预设并创建项目
![7e42dfaec0ac2dcdda19edc7fa0b4592.png](https://i-blog.csdnimg.cn/blog_migrate/afb34f9e5cb5b5cd4f04f4dd52aeee20.jpeg)
8. 插件—添加插件—搜索插件—点击安装—设置为import on demand—完成安装
![e1724c669542ba64dc49bfd0e4f323a7.png](https://i-blog.csdnimg.cn/blog_migrate/1a3ffb85d1bb26a16019d504ec5b9036.png)
![06a017a60bafbd06238c2f97ab58d3c4.png](https://i-blog.csdnimg.cn/blog_migrate/e99c22ee64a01b77406627900f929ebe.png)
![5ba2ccbec48d29e70550a32698636d2d.png](https://i-blog.csdnimg.cn/blog_migrate/37e2cb684e723bc97d150109cb7905b1.png)
9. 依赖—安装依赖—搜索axios—安装
![67373227cb7456250d12da29b8f12f74.png](https://i-blog.csdnimg.cn/blog_migrate/3ecfe400476b9b4570e50318d8a2213b.png)
![def2d840e96f37b4c62372ee3697f0aa.png](https://i-blog.csdnimg.cn/blog_migrate/b0ed30c4dfaa3b32a2baa61d941f4f49.png)
10. gitee.com
![47a85c16341cf4ff7dd355b517fad9b0.png](https://i-blog.csdnimg.cn/blog_migrate/4c7edafe16bb6ed546f70ccd37bbe161.png)
![ece511905d5b88f4cb925c2b142b2812.png](https://i-blog.csdnimg.cn/blog_migrate/444e9867801393b1c330c5b6765db5bf.png)
![430e37c920f1612c28700083d0e224c4.png](https://i-blog.csdnimg.cn/blog_migrate/8f1481b3a515a33f531b50ead21ae05f.png)
- 终端执行 ssh-keygen -t rsa -C "274348969@qq.com" ,改为自己邮箱
![d851372f6e3bb065be724ae4421b1f0b.png](https://i-blog.csdnimg.cn/blog_migrate/839257f4c8f43b52ac5bcc7561dffcbf.png)
- 连按三次回车,里面有公钥地址
![dd55874be7b62b87719ca70b4814be65.png](https://i-blog.csdnimg.cn/blog_migrate/760fb8210b12192d80f3b7c16dc0e1be.png)
![44b89dd6c36115619ebb789852cead91.png](https://i-blog.csdnimg.cn/blog_migrate/44d625e3a9ea1fe72a0ad8382c5969a2.png)
- 用编译器打开,复制粘贴到设置公钥中,命名
![28eee1e2f696146d9d77964f567362db.png](https://i-blog.csdnimg.cn/blog_migrate/2bde2afc8b823786cb5f2b270ed9b548.jpeg)
- 执行改邮箱那一步的页面,执行命令 ssh -T git@gitee.com
![db95fee0be3cbd2278cb22065547d5bd.png](https://i-blog.csdnimg.cn/blog_migrate/645856cec7f97e96fb51995fd2e3e6a6.png)
- 输入yes 再执行一次 ssh -T git@gitee.com 出现Hi公钥就添加成功了
![35d59bb67b47b84b08d797e2a9127255.png](https://i-blog.csdnimg.cn/blog_migrate/7b12d7af955ac3b06536474ef0355bae.jpeg)
11. 新建仓库
![ce4d36e50208dda075a95a3de54ed391.png](https://i-blog.csdnimg.cn/blog_migrate/1ad36ff261176d52d41082a4f5ce392d.png)
- 填写仓库名称—去掉勾选—创建
![5924e9a8dd74d7b77a476df4d8cfdde0.png](https://i-blog.csdnimg.cn/blog_migrate/176b0fcdcefd4e96891752648c6057fd.png)
![aca1cf6b2ad1820fce2e21c623ee0949.png](https://i-blog.csdnimg.cn/blog_migrate/9b641cdeeb6f5ea90d5bfadc28fe3a6e.png)
- 终端执行这两行
![f7eddd5730a6500ce5fe6ab82603bd64.png](https://i-blog.csdnimg.cn/blog_migrate/1ef4e40461d35e0cd38ec24ce530bec7.png)
- 文件根目录打开powershell执行:
git status
git add .
git commit -m "add files"
git status
- powershell根目录下执行以下两行,输入邮箱密码
- 刷新网页,看到提交就成功了
![caa010be11c137b13d71c3e0b857ba4b.png](https://i-blog.csdnimg.cn/blog_migrate/73cea5b8afbb4593b4dd185b3364a722.png)
![53d5956724d9d5624920d628e2c4aa4b.png](https://i-blog.csdnimg.cn/blog_migrate/27f08b5fc464be770fa1484d7dead153.png)
3. 后端初始化
- 安装 MySQL 数据库
- 安装 Node.js 环境
- 配置项目相关信息
- 启动项目
- 使用 Postman 测试后台项目接口是否正常
1. 数据库
![6057bc41caf432db2a41f805f25bffb5.png](https://i-blog.csdnimg.cn/blog_migrate/516d02d856eabdaeb71d48f108a6a384.jpeg)
- 这个就是数据
![9719b148be8f4796fff4aa991e5feab5.png](https://i-blog.csdnimg.cn/blog_migrate/8fa3bed84b4bf1a4d43e8450f718f530.png)
![1872f98eec597ff97e475fcd6651f7f6.png](https://i-blog.csdnimg.cn/blog_migrate/b447b31f02467e76796782e6d80e47b9.png)
- 密码root 导入 名称保持一致 导入
- 终端窗口自动关闭 说明导入完成了
![efd09a75b72203ce435871d81e7709e0.png](https://i-blog.csdnimg.cn/blog_migrate/c0d5caad0c0dcb0d09955320fc47d7aa.png)
- 验证,mydb文件夹里就是导入的数据
![69c34f21979c5eec97f015b84fc3eefe.png](https://i-blog.csdnimg.cn/blog_migrate/4b90e2d44d4729a77ae33c6bd08632fa.jpeg)
![1e79e8e5686a4ba0cbab7089d6aa6a3e.png](https://i-blog.csdnimg.cn/blog_migrate/db551fc739b0e64950ee81943e9444a3.png)
2. 测试后台接口是否正常
- 后端文件根目录打开powershell,执行npm install,安装依赖
- 再执行node app.js
- 安装Postman,输入接口文档地址,选择请求方式及地址
- 选择body—xwfu—输入key和value—send
![b4260598a95144dcc63c66286a4629ff.png](https://i-blog.csdnimg.cn/blog_migrate/3776de76780fd41de9bc31e67a01d305.jpeg)
![65b4020c0fe25815ae2d38a708442d19.png](https://i-blog.csdnimg.cn/blog_migrate/09748d1da3637a44936e0c2e3516a0f9.jpeg)