第五章 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.2 学习计划删除
/*
需求说明
根据id删除日程
请求uri
schedule/{id}
请求方式
delete
响应的json
{
"code":200,
"flag":true,
"data":null
}
*/
1.2.3 学习计划保存
/*
需求说明
增加日程
请求uri
schedule
请求方式
post
请求体中的JSON
{
title: '',
completed: false
}
响应的json
{
"code":200,
"flag":true,
"data":null
}
*/
1.2.4 学习计划修改
/*
需求说明
根据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 配置阿里镜像
npm config set registry https://registry.npmjs.org/
2.1.2.2 更新 npm 版本
node16.16.0 对应的 npm 版本过低！需要升级！
npm install -g npm@9.6.6
2.1.2.3 npm 依赖下载命令
npm install 依赖名 / npm install 依赖名@版本
2.1.3 安装 vscode
- 自行官网安装
2.2 导入前端程序
3. 启动测试
npm install //安装依赖
npm run dev //运行测试
四、《任务列表案例》后端程序实现和测试
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 准备 pojo
- 包：com.alex.pojo
/**
* projectName: com.alex.pojo
*
* description: 任务实体类
*/
@Data
public class Schedule {
private Integer id;
private String title;
private Boolean completed;
}
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.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; // 当前页的数据集合
}
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);
}
}
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;
}
}
2.1.3 mapper
- mapper 接口
public interface ScheduleMapper {
List<Schedule> queryPage();
}
- mapperxml 文件
<?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
@PostMapping
public R saveSchedule(@RequestBody Schedule schedule){
scheduleService.saveSchedule(schedule);
return R.ok(null);
}
2.2.2 service
/**
* 保存学习计划
*
* @param schedule
*/
@Override
public void saveSchedule(Schedule schedule) {
scheduleMapper.insert(schedule);
}
2.2.3 mapper
- mapper 接口
void insert(Schedule schedule);
- mapperxml 文件
<insert id="insert">
insert into schedule (title, completed)
values
(#{title}, #{completed});
</insert>
2.3 计划删除
2.3.1 controller
@DeleteMapping("/{id}")
public R removeSchedule(@PathVariable Integer id){
scheduleService.removeById(id);
return R.ok(null);
}
2.3.2 service
/**
* 移除学习计划
*
* @param id
*/
@Override
public void removeById(Integer id) {
scheduleMapper.delete(id);
}
2.3.3 mapper
- mapper 接口
void delete(Integer id);
- mapperxml 文件
<delete id="delete">
delete from schedule where id = #{id}
</delete>
2.4 计划修改
2.4.1 controller
@PutMapping
public R changeSchedule(@RequestBody Schedule schedule){
scheduleService.updateSchedule(schedule);
return R.ok(null);
}
2.4.2 service
/**
* 更新学习计划
*
* @param schedule
*/
@Override
public void updateSchedule(Schedule schedule) {
scheduleMapper.update(schedule);
}
2.4.3 mapper
- mapper 接口
void update(Schedule schedule);
- mapperxml 文件
<update id="update">
update schedule set title = #{title} , completed = #{completed}
where id = #{id}
</update>
3. 前后联调
3.1 后台项目根路径设计
