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

柠檬小帽2023-10-14 0:39

第五章 SSM

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

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

1.1 案例功能预览
1.2 接口分析
1.2.1 学习计划分页查询
java 复制代码 
/*
需求说明
    查询全部数据页数据
请求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.2 学习计划删除
java 复制代码 
/*
需求说明
    根据id删除日程
请求uri
    schedule/{id}
请求方式
    delete
响应的json
    {
        "code":200,
        "flag":true,
        "data":null
    }
*/
1.2.3 学习计划保存
java 复制代码 
/*
需求说明
    增加日程
请求uri
    schedule
请求方式
    post
请求体中的JSON
    {
        title: '',
        completed: false
    }
响应的json
    {
        "code":200,
        "flag":true,
        "data":null
    }
*/
1.2.4 学习计划修改
java 复制代码 
/*
需求说明
    根据id修改数据
请求uri
    schedule
请求方式
    put
请求体中的JSON
    {
        id: 1,
        title: '',
        completed: false
    }
响应的json
    {
        "code":200,
        "flag":true,
        "data":null
    }
*/

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 配置阿里镜像
bash 复制代码 
npm config set registry https://registry.npmjs.org/
2.1.2.2 更新 npm 版本

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

bash 复制代码 
npm install -g npm@9.6.6
2.1.2.3 npm 依赖下载命令
bash 复制代码 
npm install 依赖名 / npm install 依赖名@版本
2.1.3 安装 vscode
  • 自行官网安装
2.2 导入前端程序

3. 启动测试

bash 复制代码 
npm install //安装依赖
npm run dev //运行测试

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

1. 准备工作

1.1 准备数据库脚本
sql 复制代码 
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 准备 pojo
  • 包：com.alex.pojo
java 复制代码 
/**
 * projectName: com.alex.pojo
 *
 * description: 任务实体类
 */
@Data
public class Schedule {

    private Integer id;
    private String title;
    private Boolean completed;
}
1.3 准备 R
  • 包：com.alex.utils
java 复制代码 
/**
 * 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.4 准备 PageBean
  • 包：com.alex.utils
java 复制代码 
@Data
@NoArgsConstructor
@AllArgsConstructor
public class PageBean<T> {
    private int currentPage;   // 当前页码
    private int pageSize;      // 每页显示的数据量
    private long total;    // 总数据条数
    private List<T> data;      // 当前页的数据集合
}

2. 功能实现

2.1 分页查询
2.1.1 controller
java 复制代码 
/*
    @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);
    }
}
2.1.2 service
java 复制代码 
@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;
    }

}
2.1.3 mapper
  • mapper 接口
java 复制代码 
public interface ScheduleMapper {

    List<Schedule> queryPage();
}
  • mapperxml 文件
xml 复制代码 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- namespace等于mapper接口类的全限定名,这样实现对应 -->
<mapper namespace="com.alex.mapper.ScheduleMapper">

    <select id="queryPage" resultType="schedule">
        select * from schedule
    </select>
</mapper>
2.2 计划添加
2.2.1 controller
java 复制代码 
@PostMapping
public R saveSchedule(@RequestBody Schedule schedule){
    scheduleService.saveSchedule(schedule);
    return R.ok(null);
}
2.2.2 service
java 复制代码 
/**
 * 保存学习计划
 *
 * @param schedule
 */
@Override
public void saveSchedule(Schedule schedule) {
    scheduleMapper.insert(schedule);
}
2.2.3 mapper
  • mapper 接口
java 复制代码 
void insert(Schedule schedule);
  • mapperxml 文件
xml 复制代码 
<insert id="insert">
    insert into schedule (title, completed)
    values
    (#{title}, #{completed});
</insert>
2.3 计划删除
2.3.1 controller
java 复制代码 
@DeleteMapping("/{id}")
public R removeSchedule(@PathVariable Integer id){
    scheduleService.removeById(id);
    return R.ok(null);
}
2.3.2 service
java 复制代码 
/**
 * 移除学习计划
 *
 * @param id
 */
@Override
public void removeById(Integer id) {
    scheduleMapper.delete(id);
}
2.3.3 mapper
  • mapper 接口
java 复制代码 
void delete(Integer id);
  • mapperxml 文件
xml 复制代码 
<delete id="delete">
    delete from schedule where id = #{id}
</delete>
2.4 计划修改
2.4.1 controller
java 复制代码 
@PutMapping
    public R changeSchedule(@RequestBody Schedule schedule){
    scheduleService.updateSchedule(schedule);
    return R.ok(null);
}
2.4.2 service
java 复制代码 
/**
 * 更新学习计划
 *
 * @param schedule
 */
@Override
public void updateSchedule(Schedule schedule) {
    scheduleMapper.update(schedule);
}
2.4.3 mapper
  • mapper 接口
java 复制代码 
void update(Schedule schedule);
  • mapperxml 文件
xml 复制代码 
<update id="update">
    update schedule set title = #{title} , completed = #{completed}
         where id = #{id}
</update>

3. 前后联调

3.1 后台项目根路径设计
3.2 启动测试即可
相关推荐
Moment13 小时前
作为前端，如果使用 Langgraph 实现第一个 Agent
前端·javascript·后端
神奇小汤圆13 小时前
高并发接口总被打崩？我用 ArrayBlockingQueue + 底层源码深度剖析搞定流控
后端
木易 士心13 小时前
MyBatis Plus 核心功能与用法
java·后端·mybatis
Victor35613 小时前
MongoDB（93）如何使用变更流跟踪数据变化？
后端
用户67570498850213 小时前
全网都在推 Claude Code，但只有这篇文章教你如何“真正”能用
后端·aigc·claude
Victor35613 小时前
MongoDB（94）什么是MongoDB Atlas？
后端
苏三说技术13 小时前
为什么越来越多的大厂抛弃MCP，转向CLI？
后端
Rust研习社13 小时前
Rust 写时克隆智能指针 Cow
后端·rust·编程语言
董董灿是个攻城狮13 小时前
库克不再担任苹果 CEO，附全员信
后端
伞伞悦读13 小时前
Docker 安装 Redis 教程（重点避坑版）
后端
热门推荐
012026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点032026 年 AI 编程助手全面对比评测：Cursor vs Copilot vs Claude Code vs GitHub Copilot Free042026年4月AI大事件深度解读：大模型竞争进入“深水区“05Claude Code Windows 兼容性问题：指定版本 2.1.112 可解决06AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析07UBUNTU Claude Code 报错 claude native binary not installed08近期有什么ai的新消息，新动态？ 2026.4月09从限购到畅通：GLM-5.1 Coding Plan接入攻略10从零部署 Hermes Agent：一只"会成长的 AI 马"保姆级安装教程