tlias智能学习辅助系统-学习笔记Part03

YangeIT大约 21 分钟tlias智能学习辅助系统MysqlApifoxSpringBootNginxHTTPGETPOST

tlias智能学习辅助系统-学习笔记Part03

今日目标

  • 项目介绍🍐
    • 阅读需求文档✏️
    • 前后端分离架构搭建 ✏️
    • 导入数据库
  • 部门管理
    • 部门查询 ✏️
    • 删除部门 ✏️
    • 新增部门 ✏️
    • 修改部门 🔫
  • 员工管理
    • 列表查询(含条件) 🔫
    • 分页查询(含条件) ✏️ ❤️
    • 删除员工 ✏️ 🔫

知识储备

  1. 了解Web前端开发的基础知识（了解异步请求、get和post请求方式）
  2. Web后端开发的基础(HTTP协议（特点）、请求响应（组成）)
  3. 数据库MySQL，以及通过Mybatis框架如何来完成数据库的基本操作

1. 需求分析和环境搭建

需求分析和环境搭建

🎯 将前端开发(已经提供)、后端开发、数据库整合起来

项目原型效果：

点击查看项目原型效果open in new window

点击查看完成后的成品效果展示open in new window 👈

点我查看接口信息 👈

环境搭建的步鄹：

  1. 准备数据库表(dept部门表、emp员工表)
  2. 创建springboot工程，引入对应的起步依赖（web、mybatis、mysql驱动、lombok）
  3. 配置文件application.properties中引入mybatis的配置信息，准备对应的实体类
  4. 准备对应的Mapper、Service(接口、实现类)、Controller基础结构

点击查看完成后项目工程结构open in new window 👈 👈

第1步：准备数据库表

创建tlias数据库，配置格式为utf8mb4。并执行下列语句，创建部门表和用户表，以及准备一些假数据。

1.点击查看数据库创建图解步骤open in new window

2.点击查看数据库sql执行图解步骤open in new window

-- 部门管理
create table dept(
    id int unsigned primary key auto_increment comment '主键ID',
    name varchar(10) not null unique comment '部门名称',
    create_time datetime not null comment '创建时间',
    update_time datetime not null comment '修改时间'
) comment '部门表';
-- 部门表测试数据
insert into dept (id, name, create_time, update_time) values(1,'学工部',now(),now()),(2,'教研部',now(),now()),(3,'咨询部',now(),now()), (4,'就业部',now(),now()),(5,'人事部',now(),now());



-- 员工管理(带约束)
create table emp (
  id int unsigned primary key auto_increment comment 'ID',
  username varchar(20) not null unique comment '用户名',
  password varchar(32) default '123456' comment '密码',
  name varchar(10) not null comment '姓名',
  gender tinyint unsigned not null comment '性别, 说明: 1 男, 2 女',
  image varchar(300) comment '图像',
  job tinyint unsigned comment '职位, 说明: 1 班主任,2 讲师, 3 学工主管, 4 教研主管, 5 咨询师',
  entrydate date comment '入职时间',
  dept_id int unsigned comment '部门ID',
  create_time datetime not null comment '创建时间',
  update_time datetime not null comment '修改时间'
) comment '员工表';
-- 员工表测试数据
INSERT INTO emp
	(id, username, password, name, gender, image, job, entrydate,dept_id, create_time, update_time) VALUES
	(1,'jinyong','123456','金庸',1,'1.jpg',4,'2000-01-01',2,now(),now()),
	(2,'zhangwuji','123456','张无忌',1,'2.jpg',2,'2015-01-01',2,now(),now()),
	(3,'yangxiao','123456','杨逍',1,'3.jpg',2,'2008-05-01',2,now(),now()),
	(4,'weiyixiao','123456','韦一笑',1,'4.jpg',2,'2007-01-01',2,now(),now()),
	(5,'changyuchun','123456','常遇春',1,'5.jpg',2,'2012-12-05',2,now(),now()),
	(6,'xiaozhao','123456','小昭',2,'6.jpg',3,'2013-09-05',1,now(),now()),
	(7,'jixiaofu','123456','纪晓芙',2,'7.jpg',1,'2005-08-01',1,now(),now()),
	(8,'zhouzhiruo','123456','周芷若',2,'8.jpg',1,'2014-11-09',1,now(),now()),
	(9,'dingminjun','123456','丁敏君',2,'9.jpg',1,'2011-03-11',1,now(),now()),
	(10,'zhaomin','123456','赵敏',2,'10.jpg',1,'2013-09-05',1,now(),now()),
	(11,'luzhangke','123456','鹿杖客',1,'11.jpg',5,'2007-02-01',3,now(),now()),
	(12,'hebiweng','123456','鹤笔翁',1,'12.jpg',5,'2008-08-18',3,now(),now()),
	(13,'fangdongbai','123456','方东白',1,'13.jpg',5,'2012-11-01',3,now(),now()),
	(14,'zhangsanfeng','123456','张三丰',1,'14.jpg',2,'2002-08-01',2,now(),now()),
	(15,'yulianzhou','123456','俞莲舟',1,'15.jpg',2,'2011-05-01',2,now(),now()),
	(16,'songyuanqiao','123456','宋远桥',1,'16.jpg',2,'2007-01-01',2,now(),now()),
	(17,'chenyouliang','123456','陈友谅',1,'17.jpg',NULL,'2015-03-21',NULL,now(),now());

2. 部门管理 🚩

开发的部门管理功能包含：

  1. 查询部门
  2. 删除部门
  3. 新增部门
  4. 更新部门（不讲解，自己独立完成）🚩

1️⃣2.1 查询部门 ✏️

需求：查询部门列表，不需要分页

image-20221213234154699
image-20221213234154699

点击查看项目原型效果open in new window

查询的部门的信息：部门ID、部门名称、修改时间

通过页面原型以及需求描述-->部门查询，是不需要考虑分页操作的。

功能开发 👇 👇

image-20221213235157345
image-20221213235157345

DeptController

@Slf4j
@RestController
public class DeptController {
    @Autowired
    private DeptService deptService;

    //@RequestMapping(value = "/depts" , method = RequestMethod.GET)
    @GetMapping("/depts")
    public Result list(){
        log.info("查询所有部门数据");
        List<Dept> deptList = deptService.list();
        return Result.success(deptList);
    }
}

2️⃣2.2 前后端联调🚀

前后端联调(部署前端项目)

完成了查询部门的功能，我们也通过postman工具测试通过了，下面我们再基于前后端分离的方式进行接口联调。具体操作如下： 👇 👇

1、将资料中提供的"前端环境"文件夹中的压缩包，拷贝到一个没有中文不带空格的目录下

image-20221214100230484
image-20221214100230484

点击我下载前端环境open in new window 👈 👈

课堂作业

🎻 1.完成查询部门案例并且完成前后端联调案例，体会前后端开发的流程

3️⃣2.3 部门管理-删除部门

接下来完成`删除部门`的功能开发。

点击部门列表后面操作栏的 "删除" 按钮，就可以删除该部门信息。 此时，前端只需要给服务端传递一个ID参数就可以了。 我们从接口文档中也可以看得出来。

接口文档规定：

  • 前端请求路径：/depts/
  • 前端请求方式：DELETE

问题1：怎么在controller中接收请求路径中的路径参数？ 

@PathVariable

问题2：如何限定请求方式是delete？ 

@DeleteMapping

功能开发 👇 👇

image-20221214102705490
image-20221214102705490

DeptController

@Slf4j
@RestController
public class DeptController {
    @Autowired
    private DeptService deptService;

    @DeleteMapping("/depts/{id}")
    public Result delete(@PathVariable Integer id) {
        //日志记录
        log.info("根据id删除部门");
        //调用service层功能
        deptService.delete(id);
        //响应
        return Result.success();
    }
    
    //省略...
}



 
 

 
 



 






4️⃣2.4 部门管理-新增部门 ✏️

`新增部门`功能

点击 "新增部门" 按钮，弹出新增部门对话框，输入部门名称，点击 "保存" ，将部门信息保存到数据库。

接口文档规定：

  • 前端请求路径：/depts
  • 前端请求方式：POST
  • 前端请求参数 (Json格式)：{ "name": "教研部" }

问题1：如何限定请求方式是POST？ 

@PostMapping

问题2：怎么在controller中接收json格式的请求参数？ 

@RequestBody  //把前端传递的json数据填充到实体类中

功能开发 👇 👇

image-20221214115519648
image-20221214115519648

DeptController

@Slf4j
@RestController
public class DeptController {
    @Autowired
    private DeptService deptService;

    @PostMapping("/depts")
    public Result add(@RequestBody Dept dept){
        //记录日志
        log.info("新增部门：{}",dept);
        //调用service层添加功能
        deptService.add(dept);
        //响应
        return Result.success();
    }

    //省略...
}

6️⃣2.5 修改部门 实战 🔫

修改部门

image
image

点击我查看原型图open in new window

  1. 点击编辑，发送请求，获得部门信息接口：根据ID查询
  2. 点击确认，发送请求，发送修改后的部门信息接口：修改部门

点我查看接口信息

根据ID查询

  1. 控制层代码
image
image

修改部门

点我查看接口信息

  1. 控制层代码
image
image

3. 员工管理

1️⃣3.1 条件分页查询

条件分页查询

image-20221215175639974
image-20221215175639974

通过员工管理的页面原型我们可以看到:

  1. 员工列表页面的查询，不仅仅需要考虑分页，还需要考虑查询条件。

我们看到页面原型及需求中描述，搜索栏的搜索条件有三个，分别是：

  • 姓名：模糊匹配
  • 性别：精确匹配
  • 入职日期：范围匹配

对应的数据库sql语句

select * 
from emp
where 
  name like concat('%','张','%')   -- 条件1：根据姓名模糊匹配
  and gender = 1                   -- 条件2：根据性别精确匹配
  and entrydate = between '2000-01-01' and '2010-01-01'  -- 条件3：根据入职日期范围匹配
order by update_time desc;

上述的三个条件，都是可以传递，也可以不传递的，也就是动态的。 我们需要使用前面学习的Mybatis中的动态SQL

代码开发： 👇👇

编码流程图
编码流程图
  1. 前端给后端传递参数：当前页、每页条数、条件参数、日期
  2. 后台返回给前端的数据：总条目数，当前页的数据集合需要封装成一个对象

点击插件详细步骤图解open in new window

PageBean类放到domain包中

@Data
@NoArgsConstructor
@AllArgsConstructor
public class PageBean {

    private Long total;//总记录数
    private List rows;//数据列表

}
  1. 分页功能的实现，可以使用PageHelper分页插件
<!--PageHelper分页插件-->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.4.2</version>
</dependency>
  1. 在resources文件加下创建cn.itcast.mapper接口的同名文件夹，以及EmpMapper接口的同名xml文件。点击查看详细图解步骤open in new window 👈
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="cn.itcast.mapper.EmpMapper">
<!-- 此处写sql语句 -->

</mapper>

作业

  1. 🚩 独自完成分页查询以及PageHelper的插件的使用，并通过文字写出分页查询的流程和描述PageHelper插件的基本原理。

2️⃣3.2 删除员工 实战 🔫

新的功能：删除员工

image-20221215183657413
image-20221215183657413

当勾选列表前面的复选框，然后点击 批量删除 按钮，就可以将这一批次的员工信息删除掉了。 也可以只勾选一个复选框，仅删除一个员工信息。

删除请求详情
删除请求详情

删除多个员工包含只删除一个员工

功能开发 👇 👇

image-20221215184714815
image-20221215184714815

EmpController

@Slf4j
@RestController
@RequestMapping("/emps")
public class EmpController {

    @Autowired
    private EmpService empService;

    //批量删除
    @DeleteMapping("/{ids}")
    public Result delete(@PathVariable List<Integer> ids){
        empService.delete(ids);
        return Result.success();
    }
}









 
 
 
 
 

作业

🚩 完成分页查询和员工删除的代码，并且完成查询原型和接口文档，完成部门修改功能实现

焱哥的博客
Copyright © 2025 YangeIT