三、《任务列表案例》前端程序搭建和运行

本章概要

• 整合案例介绍和接口分析
  • 案例功能预览
  • 接口分析
• 前端工程导入
  • 前端环境搭建
  • 导入前端程序
• 启动测试

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

3.1.1 案例功能预览

3.1.2 接口分析

1. 学习计划分页查询

/* 
需求说明
    查询全部数据页数据
请求uri
    schedule/{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 // 当前页码
        }
    }
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2. 学习计划删除

/* 
需求说明
    根据id删除日程
请求uri
    schedule/{id}
请求方式 
    delete
响应的json
    {
        "code":200,
        "flag":true,
        "data":null
    }
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3. 学习计划保存

/* 
需求说明
    增加日程
请求uri
    schedule
请求方式 
    post
请求体中的JSON
    {
        title: '',
        completed: false
    }
响应的json
    {
        "code":200,
        "flag":true,
        "data":null
    }
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4. 学习计划修改

/* 
需求说明
    根据id修改数据
请求uri
    schedule
请求方式 
    put
请求体中的JSON
    {
        id: 1,
        title: '',
        completed: false
    }
响应的json
    {
        "code":200,
        "flag":true,
        "data":null
    }
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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/
1

• 更新npm版本

node16.16.0对应的npm版本过低！需要升级！

npm install -g npm@9.6.6
1

• npm依赖下载命令

npm install 依赖名 / npm install 依赖名@版本
1

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 //运行测试
1
2