SSM - Springboot - MyBatis-Plus 全栈体系（二十五）

第五章 SSM

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

1. 整合案例介绍和接口分析

1.1 案例功能预览

1.2 接口分析

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

1.2.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

1.2.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

1.2.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

2. 前端工程导入

2.1 前端环境搭建

Node.js 是前端程序运行的服务器，类似 Java 程序运行的服务器 Tomcat

Npm 是前端依赖包管理工具，类似 maven 依赖管理工具软件

2.1.1 node 安装

• 版本：16.16.0
• node 安装和测试：
  • 打开官网 https://nodejs.org/en/ 下载对应操作系统的 LTS 版本。（16.16.0）
  • 双击安装包进行安装，安装过程中遵循默认选项即可。安装完成后，可以在命令行终端输入 node -v 和 npm -v 查看 Node.js 和 npm 的版本号。

2.1.2 npm 使用（maven）

NPM 全称 Node Package Manager，是 Node.js 包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是 Node.js 的包管理工具，相当于后端的 Maven 。

2.1.2.1 配置阿里镜像

npm config set registry https://registry.npmjs.org/
1

2.1.2.2 更新 npm 版本

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

npm install -g npm@9.6.6
1

2.1.2.3 npm 依赖下载命令

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

2.1.3 安装 vscode

• 自行官网安装

2.2 导入前端程序

3. 启动测试

npm install //安装依赖
npm run dev //运行测试
1
2

四、《任务列表案例》后端程序实现和测试

1. 准备工作

1.1 准备数据库脚本

CREATE TABLE schedule (
  id INT NOT NULL AUTO_INCREMENT,
  title VARCHAR(255) NOT NULL,
  completed BOOLEAN NOT NULL,
  PRIMARY KEY (id)
);

INSERT INTO schedule (title, completed)
VALUES
    ('学习java', true),
    ('学习Python', false),
    ('学习C++', true),
    ('学习JavaScript', false),
    ('学习HTML5', true),
    ('学习CSS3', false),
    ('学习Vue.js', true),
    ('学习React', false),
    ('学习Angular', true),
    ('学习Node.js', false),
    ('学习Express', true),
    ('学习Koa', false),
    ('学习MongoDB', true),
    ('学习MySQL', false),
    ('学习Redis', true),
    ('学习Git', false),
    ('学习Docker', true),
    ('学习Kubernetes', false),
    ('学习AWS', true),
    ('学习Azure', false);
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
29

1.2 准备 pojo

• 包：com.alex.pojo

/**
 * projectName: com.alex.pojo
 *
 * description: 任务实体类
 */
@Data
public class Schedule {

    private Integer id;
    private String title;
    private Boolean completed;
}
1
2
3
4
5
6
7
8
9
10
11
12

1.3 准备 R

• 包：com.alex.utils

/**
 * projectName: com.alex.utils
 *
 * description: 返回结果类
 */
public class R {

    private int code = 200; //200成功状态码

    private boolean flag = true; //返回状态

    private Object data;  //返回具体数据


    public static R ok(Object data){
        R r = new R();
        r.data = data;
        return r;
    }

    public static R fail(Object data){
        R r = new R();
        r.code = 500; //错误码
        r.flag = false; //错误状态
        r.data = data;
        return r;
    }


    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public boolean isFlag() {
        return flag;
    }

    public void setFlag(boolean flag) {
        this.flag = flag;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

1.4 准备 PageBean

• 包：com.alex.utils

@Data
@NoArgsConstructor
@AllArgsConstructor
public class PageBean<T> {
    private int currentPage;   // 当前页码
    private int pageSize;      // 每页显示的数据量
    private long total;    // 总数据条数
    private List<T> data;      // 当前页的数据集合
}
1
2
3
4
5
6
7
8
9

2. 功能实现

2.1 分页查询

2.1.1 controller

/*
    @CrossOrigin 注释在带注释的控制器方法上启用跨源请求
 */
@CrossOrigin
@RequestMapping("schedule")
@RestController
public class ScheduleController
{

    @Autowired
    private ScheduleService scheduleService;

    @GetMapping("/{pageSize}/{currentPage}")
    public R showList(@PathVariable(name = "pageSize") int pageSize, @PathVariable(name = "currentPage") int currentPage){
        PageBean<Schedule> pageBean = scheduleService.findByPage(pageSize,currentPage);
        return  R.ok(pageBean);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.1.2 service

@Slf4j
@Service
public class ScheduleServiceImpl  implements ScheduleService {

    @Autowired
    private ScheduleMapper scheduleMapper;

    /**
     * 分页数据查询,返回分页pageBean
     *
     * @param pageSize
     * @param currentPage
     * @return
     */
    @Override
    public PageBean<Schedule> findByPage(int pageSize, int currentPage) {
        //1.设置分页参数
        PageHelper.startPage(currentPage,pageSize);
        //2.数据库查询
        List<Schedule> list = scheduleMapper.queryPage();
        //3.结果获取
        PageInfo<Schedule> pageInfo = new PageInfo<>(list);
        //4.pageBean封装
        PageBean<Schedule> pageBean = new PageBean<>(pageInfo.getPageNum(),pageInfo.getPageSize(),pageInfo.getTotal(),pageInfo.getList());

        log.info("分页查询结果:{}",pageBean);

        return pageBean;
    }

}
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
29
30
31

2.1.3 mapper

• mapper 接口

public interface ScheduleMapper {

    List<Schedule> queryPage();
}
1
2
3
4

• mapperxml 文件

DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "https://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.alex.mapper.ScheduleMapper">

    <select id="queryPage" resultType="schedule">
        select * from schedule
    select>
mapper>
1
2
3
4
5
6
7
8
9
10
11

2.2 计划添加

2.2.1 controller

@PostMapping
public R saveSchedule(@RequestBody Schedule schedule){
    scheduleService.saveSchedule(schedule);
    return R.ok(null);
}
1
2
3
4
5

2.2.2 service

/**
 * 保存学习计划
 *
 * @param schedule
 */
@Override
public void saveSchedule(Schedule schedule) {
    scheduleMapper.insert(schedule);
}
1
2
3
4
5
6
7
8
9

2.2.3 mapper

• mapper 接口

void insert(Schedule schedule);
1

• mapperxml 文件

<insert id="insert">
    insert into schedule (title, completed)
    values
    (#{title}, #{completed});
insert>
1
2
3
4
5

2.3 计划删除

2.3.1 controller

@DeleteMapping("/{id}")
public R removeSchedule(@PathVariable Integer id){
    scheduleService.removeById(id);
    return R.ok(null);
}
1
2
3
4
5

2.3.2 service

/**
 * 移除学习计划
 *
 * @param id
 */
@Override
public void removeById(Integer id) {
    scheduleMapper.delete(id);
}
1
2
3
4
5
6
7
8
9

2.3.3 mapper

• mapper 接口

void delete(Integer id);
1

• mapperxml 文件

<delete id="delete">
    delete from schedule where id = #{id}
delete>
1
2
3

2.4 计划修改

2.4.1 controller

@PutMapping
    public R changeSchedule(@RequestBody Schedule schedule){
    scheduleService.updateSchedule(schedule);
    return R.ok(null);
}
1
2
3
4
5

2.4.2 service

/**
 * 更新学习计划
 *
 * @param schedule
 */
@Override
public void updateSchedule(Schedule schedule) {
    scheduleMapper.update(schedule);
}
1
2
3
4
5
6
7
8
9

2.4.3 mapper

• mapper 接口

void update(Schedule schedule);
1

• mapperxml 文件

<update id="update">
    update schedule set title = #{title} , completed = #{completed}
         where id = #{id}
update>
1
2
3
4

3. 前后联调

3.1 后台项目根路径设计

3.2 启动测试即可