1 准备配置阶段

1、数据库的表信息

CREATE TABLE `STUDENT1`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `local` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `sex` char(1) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `status` int(20) NULL DEFAULT 1,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1025 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

2、pom依赖

<dependencies>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.0</version>
        </dependency>

        <!--jquery依赖-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.5.1</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

3、application.propertis文件

# 配置数据库源连接
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/db2?useSSL=true&useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=****


#mybatis日志
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

mybatis-plus.global-config.db-config.logic-delete-value=0
mybatis-plus.global-config.db-config.logic-not-delete-value=1

# 开发阶段关闭thymeleaf的模板缓存
spring.thymeleaf.cache=false

3、mybatis-plus5.3.0的分页配置

@Configuration
public class Myconfig {

    //mybatisPlus 分页配置
    @Bean
    public PaginationInnerInterceptor paginationInnerInterceptor() {
        return new PaginationInnerInterceptor();
    }
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor(){
        MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor ();
        mybatisPlusInterceptor.setInterceptors (Collections.singletonList (paginationInnerInterceptor ()));
        return mybatisPlusInterceptor;
    }
}

2、后端

1、 pojo

 2、mapper

@Mapper
public interface StudentMapper extends BaseMapper<Student1> {

}

3、service

public interface StudentService extends IService<Student1> {

}

@Service
public class StudentServiceImpl  extends ServiceImpl<StudentMapper, Student1> implements StudentService{
}

 4、controller

@Controller
public class StudentController {

    @Resource
    private StudentServiceImpl service;

    @Resource
    private StudentMapper studentMapper;

    @RequestMapping("/show")
    public String show(Model model,
                       @RequestParam(required = true, defaultValue = "1") Integer pageNum,
                       @RequestParam(required = true, defaultValue = "3") Integer pageSize) {

        Page<Student1> page = new Page<>(pageNum, pageSize);
//        Page<Student1> pages = studentMapper.selectPage(page, null);
        Page<Student1> pages = service.page(page, null);
        model.addAttribute("pages", pages);
        return "show";
    }

    @RequestMapping("/show1")
    public String show1(Model model,
                       @RequestParam(required = true, defaultValue = "1") Integer pageNum,
                       @RequestParam(required = true, defaultValue = "3") Integer pageSize,
                       String likename) {

        Page<Student1> page = new Page<>(pageNum, pageSize);
        QueryWrapper<Student1> queryWrapper = new QueryWrapper<>();
        queryWrapper.like("name",likename);
//        Page<Student1> pages = studentMapper.selectPage(page, queryWrapper);
        Page<Student1> pages = service.page(page, queryWrapper);
        model.addAttribute("pages", pages);
        model.addAttribute("likename",likename);
        return "show";
    }




    @RequestMapping("/toAddStudent")
    public String toAddStudent() {
        return "addUser";
    }

    @RequestMapping("/addStudent")
    public String addUser(Student1 student1) {
        studentMapper.insert(student1);
        return "redirect:show";
    }

    @RequestMapping("/toUpdate")
    public String toUpdate(int id,
                           Model model) {
        Student1 student1 = studentMapper.selectById(id);
        model.addAttribute("list", student1);
        return "update";
    }

    @RequestMapping("/update")
    public String update(Student1 student1) {
        studentMapper.updateById(student1);
        return "redirect:show";
    }

    @RequestMapping("/deleteUserByIds")
    public String deleteUserByIds(String ids) {
        ArrayList<Integer> list = new ArrayList<>();
        String[] split = ids.split("-");
        for (String s : split) {
            list.add(Integer.parseInt(s));
        }
        studentMapper.deleteBatchIds(list);

        return "redirect:/show";
    }


    @GetMapping("deleteById")
    public String deleteById(int id) {
        studentMapper.deleteById(id);
        return "redirect:/show";
    }


}

3、前端展示

1、show.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap/3.3.6/bootstrap.css}">
</head>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <h3 class="text-center">
                学生列表信息页面
            </h3>
            <form id="f1" th:action="@{/show1}" method="get">
                <input type="text" name="likename" th:value="${likename}" placeholder="根据用户名模糊查询">
                <input type="hidden" name="pageNum" id="pc">
                <input type="submit" value="模糊查询">
            </form>

            <a th:href="@{/toAddStudent}">新增</a>
            <a id="a" th:href="|javascript:del()|" th:text="选中删除"></a>

            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>
                        <button value="反选" id="fx">反选</button>
                    </th>
                    <th>学号</th>
                    <th>学生信息</th>
                    <th>所在学院</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="student:${pages.records}">
                    <td>
                        <input type="checkbox" name="cks" th:value="${student.id}">
                    </td>
                    <th th:text="${student.id}"/>
                    <th th:text="${student.name}"/>
                    <th th:text="${student.local}"/>
                    <th th:text="${student.sex}"/>

                    <th><a th:href="@{/toUpdate/(id=${student.id})}" th:text="修改"></a>
                    <th><a th:href="@{/deleteById/(id=${student.id})}" th:text="删除"></a>
                    </th>
                </tr>
                <tr class="success">
                </tbody>
            </table>
            </table>
            <div th:text="|当前第${pages.current}页 共${pages.pages}页 共${pages.total}条记录|">
            </div>


            <div>
                <a th:href="|javascript:go(1)|" th:text="首页"></a>
                <th:block th:if="${pages.hasPrevious()}">
                    <a th:href="|javascript:go(${pages.current}-1)|" th:text="上一页"></a>
                </th:block>
                <th:block th:if="${pages.hasNext()}">
                    <a th:href="|javascript:go(${pages.current+1})|" th:text="下一页"></a>
                </th:block>
                <a th:href="|javascript:go(${pages.pages})|" th:text="尾页"></a>

            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript" src="webjars/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" th:inline="javascript">

    function go(pc) {

        $("#pc").attr("value", pc);

        var tp = [[${pages.pages}]];

        if (pc <= tp) {
            $("#f1").submit();
        } else {
            return;
        }
    }

    //反选
    $("#fx").click(function () {
        var cks = document.getElementsByName("cks");
        for (var i = 0; i < cks.length; i++) {
            if (cks[i].checked) {
                cks[i].checked = false
            } else {
                cks[i].checked = true;
            }
        }
    });

    //多选删除
    function del() {
        var ids = "";
        var cks = document.getElementsByName("cks");
        for (var i = 0; i < cks.length; i++) {
            if (cks[i].checked) {
                ids += cks[i].value + "-";
            }
        }

        $("#a").attr("href", "/deleteUserByIds?ids=" + ids);
    }
</script>
</html>

2、addStudent.html

<form th:action="@{/addStudent}" method="post">
    姓名:<input type="text" name="name"><Br>
    岗位:<input type="text" name="local"><Br>
    性别:<input type="text" name="sex"><Br>
    <input type="submit" value="新增">
</form>

3、update.html

<form th:action="@{/update}" method="post">
    <input type="hidden" name="id" th:value="${list.id}">
    姓名:<input type="text" name="name" th:value="${list.name}"><Br>
    岗位:<input type="text" name="local" th:value="${list.local}"><Br>
    性别:<input type="text" name="sex" th:value="${list.sex}"><Br>
    <input type="submit" value="保存">
</form>