本章概要
- 整合案例介绍和接口分析
- 案例功能预览
- 接口分析
- 前端工程导入
- 前端环境搭建
- 导入前端程序
- 启动测试
3.1 整合案例介绍和接口分析
3.1.1 案例功能预览
3.1.2 接口分析
- 学习计划分页查询
/*
需求说明查询全部数据页数据
请求urischedule/{pageSize}/{currentPage}
请求方式 get
响应的json{"code":200,"flag":true,"data":{//本页数据data:[{id:1,title:'学习java',completed:true},{id:2,title:'学习html',completed:true},{id:3,title:'学习css',completed:true},{id:4,title:'学习js',completed:true},{id:5,title:'学习vue',completed:true}], //分页参数pageSize:5, // 每页数据条数 页大小total:0 , // 总记录数currentPage:1 // 当前页码}}
*/
- 学习计划删除
/*
需求说明根据id删除日程
请求urischedule/{id}
请求方式 delete
响应的json{"code":200,"flag":true,"data":null}
*/
- 学习计划保存
/*
需求说明增加日程
请求urischedule
请求方式 post
请求体中的JSON{title: '',completed: false}
响应的json{"code":200,"flag":true,"data":null}
*/
- 学习计划修改
/*
需求说明根据id修改数据
请求urischedule
请求方式 put
请求体中的JSON{id: 1,title: '',completed: false}
响应的json{"code":200,"flag":true,"data":null}
*/
3.2 前端工程导入
3.2.1 前端环境搭建
Node.js是前端程序运行的服务器，类似Java程序运行的服务器Tomcat。
Npm是前端依赖包管理工具，类似maven依赖管理工具软件
- node 安装
此处使用版本 16.16.0。
https://nodejs.org/download/release/v16.16.0/
node安装和测试：
- 打开官网 https://nodejs.org/en/ 下载对应操作系统的 LTS 版本。（16.16.0）https://download.csdn.net/download/GXL_1012/88810188
- 双击安装包进行安装，安装过程中遵循默认选项即可。安装完成后，可以在命令行终端输入 node -v 和 npm -v 查看 Node.js 和 npm 的版本号。
- npm 使用
NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于后端的Maven。
- 配置阿里镜像
npm config set registry https://registry.npmjs.org/
- 更新
npm版本
node16.16.0对应的npm版本过低！需要升级！
npm install -g npm@9.6.6
- npm依赖下载命令
npm install 依赖名 / npm install 依赖名@版本
- 安装 vscode
https://download.csdn.net/download/GXL_1012/88810208
3.2.2 导入前端程序
https://download.csdn.net/download/GXL_1012/88810216
3.3 启动测试
npm install //安装依赖
npm run dev //运行测试
