本章概要

• 整合案例介紹和接口分析
  • 案例功能預覽
  • 接口分析
• 前端工程導入
  • 前端環境搭建
  • 導入前端程序
• 啟動測試

3.1 整合案例介紹和接口分析

3.1.1 案例功能預覽

3.1.2 接口分析

1. 學習計劃分頁查詢

/* 
需求說明查詢全部數據頁數據
請求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 // 當前頁碼}}
*/

2. 學習計劃刪除

/* 
需求說明根據id刪除日程
請求urischedule/{id}
請求方式 delete
響應的json{"code":200,"flag":true,"data":null}
*/

3. 學習計劃保存

/* 
需求說明增加日程
請求urischedule
請求方式 post
請求體中的JSON{title: '',completed: false}
響應的json{"code":200,"flag":true,"data":null}
*/

4. 學習計劃修改

/* 
需求說明根據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依賴管理工具軟件

1. 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 的版本號。

2. 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 依賴名@版本

3. 安裝 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 //運行測試