学生管理系统案例（基本Maven环境搭建 --＞单表增删改查 --＞ 关联查询 (多表)--＞ 多表增删改查）

1.搭建环境

1.1 创建项目

• 创建项目：exam-student

• 搭建环境：添加坐标、拷贝配置文件、编写启动类
  

1.2 添加坐标

pom.xml文件

    <!-- 父工程 -->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <!-- jar包版本 -->
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <mybatis.starter.version>1.3.2</mybatis.starter.version>
        <mapper.starter.version>2.0.2</mapper.starter.version>
        <mysql.version>5.1.32</mysql.version>
        <pageHelper.starter.version>1.2.5</pageHelper.starter.version>
        <durid.starter.version>1.1.10</durid.starter.version>
    </properties>

    <!-- 导入需要依赖（坐标/jar包）   -->
    <dependencies>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <!-- mybatis启动器 -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>${mybatis.starter.version}</version>
        </dependency>
        <!-- 通用Mapper启动器 -->
        <dependency>
            <groupId>tk.mybatis</groupId>
            <artifactId>mapper-spring-boot-starter</artifactId>
            <version>${mapper.starter.version}</version>
        </dependency>
        <!-- 分页助手启动器 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>${pageHelper.starter.version}</version>
        </dependency>
        <!-- mysql驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>${mysql.version}</version>
        </dependency>
        <!-- Druid连接池 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>${durid.starter.version}</version>
        </dependency>
        <!--swagger2-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.7.0</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.7.0</version>
        </dependency>

    </dependencies>

1.3 拷贝properties文件

application.properties配置文件

#端口号
server.port=8080

#数据库基本配置
spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/db3?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=1234

#druid 连接池配置
#驱动
#spring.datasource.driver-class-name=com.mysql.jdbc.Driver
#初始化连接池大小
spring.datasource.druid.initial-size=1
#最小连接数
spring.datasource.druid.min-idle=1
#最大连接数
spring.datasource.druid.max-active=20
#获取连接时候验证，会影响性能
spring.datasource.druid.test-on-borrow=true

# mybatis
# mybatis.type-aliases-package=com.czxy.domain.base
# mybatis.mapper-locations=classpath:mappers/*.xml
#mapper
mapper.not-empty=false
mapper.identity=MYSQL
#开启驼峰映射
mybatis.configuration.map-underscore-to-camel-case=true
mybatis.mapper-locations=classpath*:mapper/*.xml
#开启log4j打印SQL语句
logging.level.com.czxy.dao=debug

1.4 编写启动类

启动类：

package com.czxy;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * @author 桐叔
 * @email [email protected]
 */
@SpringBootApplication
public class StudentApplication {
    
    
    public static void main(String[] args) {
    
    
        SpringApplication.run(StudentApplication.class, args);
    }
}

1. 5 拷贝封装类

• BaseResult类，用于存在自定义响应结果

1.6 拷贝配置类（可选）

• Swagger2Configuration类，用于自动生成后端访问接口，进行增删改查测试的

• 如果没有拷贝此配置文件，必须会用postman进行增删改查测试的

2. 单表：班级管理

2.0 数据库

create database db1005;
use db1005;

2.1 班级SQL

-- 班级表
create table tb_class(
  `c_id` varchar(32) primary key comment '班级ID',
  `c_name` varchar(50) comment '班级名称',
  `desc` varchar(200) comment '班级描述'
);
insert into tb_class(`c_id`,`c_name`,`desc`) values('c001','Java12班','。。。。');
insert into tb_class(`c_id`,`c_name`,`desc`) values('c002','Java34班','。。。。');

2.2 查询所有班级

2.2.1 需求

2.2.2 分析

2.2.3 后端实现

• 编写JavaBean

  

  package com.czxy.domain;
  
  import javax.persistence.Column;
  import javax.persistence.Id;
  import javax.persistence.Table;
  
  /**
   * @author 桐叔
   * @email [email protected]
   */
  @Table(name="tb_class")
  public class Classes {
        
        
      @Id
      @Column(name="c_id")
      private String cId;
  
      @Column(name="c_name")
      private String cName;
  
      @Column(name="`desc`")
      private String desc;
  
      public String getcId() {
        
        
          return cId;
      }
  
      public void setcId(String cId) {
        
        
          this.cId = cId;
      }
  
      public String getcName() {
        
        
          return cName;
      }
  
      public void setcName(String cName) {
        
        
          this.cName = cName;
      }
  
      public String getDesc() {
        
        
          return desc;
      }
  
      public void setDesc(String desc) {
        
        
          this.desc = desc;
      }
  
      @Override
      public String toString() {
        
        
          return "Classes{" +
                  "cId='" + cId + '\'' +
                  ", cName='" + cName + '\'' +
                  ", desc='" + desc + '\'' +
                  '}';
      }
  }
  
  
  

• 编写mapper

  

  package com.czxy.mapper;
  
  import com.czxy.domain.Classes;
  import tk.mybatis.mapper.common.Mapper;
  
  /**
   * @author 桐叔
   * @email [email protected]
   */
  @org.apache.ibatis.annotations.Mapper
  public interface ClassesMapper extends Mapper<Classes> {
        
        
  }
  
  

• 编写service

  

  package com.czxy.service;
  
  import com.czxy.domain.Classes;
  import com.czxy.mapper.ClassesMapper;
  import org.springframework.stereotype.Service;
  import org.springframework.transaction.annotation.Transactional;
  
  import javax.annotation.Resource;
  import java.util.List;
  
  /**
   * @author 桐叔
   * @email [email protected]
   */
  @Service
  @Transactional
  public class ClassesService {
        
        
  
      @Resource
      private ClassesMapper classesMapper;
  
      /**
       * 查询所有
       * @return
       */
      public List<Classes> findAll() {
        
        
          List<Classes> list = classesMapper.selectAll();
          return list;
      }
  }
  
  

• 编写controller

  

  package com.czxy.controller;
  
  import com.czxy.domain.Classes;
  import com.czxy.service.ClassesService;
  import com.czxy.vo.BaseResult;
  import org.springframework.web.bind.annotation.GetMapping;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.RestController;
  
  import javax.annotation.Resource;
  import java.util.List;
  
  /**
   * @author 桐叔
   * @email [email protected]
   */
  @RestController
  @RequestMapping("/classes")
  public class ClassesController {
        
        
  
      @Resource
      private ClassesService classesService;
  
      /**
       * 查询所有
       * @return
       */
      @GetMapping
      public BaseResult findAll(){
        
        
          // 查询
          List<Classes> list = classesService.findAll();
          // 返回
          return BaseResult.ok("查询成功", list );
      }
  
  
  }
  
  

2.2.4 前端实现

• 创建static/js目录，拷贝js类库

  

• 创建首页

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <a href="classes_list.html">班级管理</a> |
</body>
</html>

• 创建列表页面

  

  • 基本结构

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>班级列表</title>
    
        <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    
        <script>
            $(function(){
             
             
                // 查询班级
    
                // 查询所有
                findAll();
            });
    
            //查询所有函数
            function findAll() {
             
             
    
            }
            
    
        </script>
    
    
    </head>
    <body>
        <a href="index.html">返回首页</a>
        <a href="">添加班级</a> <br/>
    
        <table id="tid" border="1" width="800">
            <tr>
                <td>班级ID</td>
                <td>班级名称</td>
                <td>班级描述</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>c001</td>
                <td>Java34班</td>
                <td>这是一个有韧劲的班</td>
                <td>
                    <a href="">修改</a>
                    <a href="">删除</a>
                </td>
            </tr>
        </table>
    </body>
    </html>
    

    完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级列表</title>

    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>

    <script>
        $(function(){
     
     
            // 查询班级

            // 查询所有
            findAll();
        });

        //查询所有函数
        function findAll() {
     
     

            // 查询
            $.ajax({
     
     
                "url":"/classes",
                "type":"get",
                "dataType":"json",
                "success":function(data){
     
     
                    // 处理
                    if(data.code == 1) {
     
     
                        // 重置table
                        $("#tid").html(`
                            <tr>
                                <td>班级ID</td>
                                <td>班级名称</td>
                                <td>班级描述</td>
                                <td>操作</td>
                            </tr>
                        `);
                        // 追加
                        $(data.data).each(function(index,classes){
     
     
                            $("#tid").append(`
                                <tr>
                                    <td>${
       
       classes.cId}</td>
                                    <td>${
       
       classes.cName}</td>
                                    <td>${
       
       classes.desc}</td>
                                    <td>
                                        <a href="">修改</a>
                                        <a href="">删除</a>
                                    </td>
                                </tr>
                            `)
                        });
                    } else {
     
     
                        //
                        alert('查询失败')
                    }
                },
                "error":function(){
     
     
                    alert('操作失败')
                }
            })
        }

    </script>


</head>
<body>
    <a href="index.html">返回首页</a>
    <a href="">添加班级</a> <br/>

    <table id="tid" border="1" width="800">
        <tr>
            <td>班级ID</td>
            <td>班级名称</td>
            <td>班级描述</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>c001</td>
            <td>Java34班</td>
            <td>这是一个有韧劲的班</td>
            <td>
                <a href="">修改</a>
                <a href="">删除</a>
            </td>
        </tr>
    </table>
</body>
</html>

2.3 添加班级

2.3.1 需求

2.3.2 分析

2.3.2 后端实现

• 编写service，添加save方法

  

      /**
       * 添加班级
       * @param classes
       * @return
       */
      public boolean save(Classes classes) {
        
        
          int count = classesMapper.insert(classes);
          return count == 1;
      }
  

• 编写controller

  

      /**
       * 添加班级
       * @param classes
       * @return
       */
      @PostMapping
      public BaseResult save(@RequestBody Classes classes){
        
        
          // 添加
          boolean result = classesService.save(classes);
          // 返回
          if(result){
        
        
              return BaseResult.ok("添加成功");
          } else {
        
        
              return BaseResult.error("添加失败");
          }
      }
  

• 测试

  

2.3.3 前端实现

• 修改首页

  

• 添加 classes_add.html页面

![\求

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cgctk-16189685s/image-20201003095420732.png)]

#25154)失败,源站可能有防盗链机制,建议将图片保存下来直接上传(assets/image-202010030908046)(assets/image-202010060811135695.png1.png)](https://img-blog.csdnimg.cn/20210421093059757.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpMTM0Mjk3NDM1ODA=,size_16,color_FFFFFF,t_70)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级列表</title>
	<!--导入jquery-->
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <!--工具：将表单转换json字符串，注意：必须提供name属性-->
    <script type="text/javascript" src="js/form2json-2.1.js"></script>

    <script>

        function add() {
     
     
            // 获得表单数据
            var obj = $("#f01").formToJson();

            $.ajax({
     
     
                "url":"/classes",
                "type":"post",
                "contentType":"application/json;charset=UTF-8",
                "data": obj,
                "dataType":"json",
                "success":function(data){
     
     
                    // 处理
                    if(data.code == 1) {
     
     
                        // 成功提示
                        alert(data.message)
                        // 跳转
                        location.href = "classes_list.html"
                    } else {
     
     
                        // 失败提示
                        alert(data.message)
                    }
                },
                "error":function(){
     
     
                    alert('操作失败')
                }
            })
        }


    </script>


<body>
</head>
    <a href="classes_list.html">返回列表页</a>

    <form id="f01">
        <table id="tid" border="1">
            <tr>
                <td>班级ID</td>
                <td><input name="cId" /> </td>
            </tr>
            <tr>
                <td>班级名称</td>
                <td><input name="cName" /> </td>
            </tr>
            <tr>
                <td>班级描述</td>
                <td>
                    <textarea cols="20" rows="5" name="desc" ></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="添加" onclick="add()"/></td>
            </tr>

        </table>
    </form>
</body>
</html>

2.4 修改编辑

2.4.1 需求

2.4.2 分析

2.4.3 后端实现：查询详情

• 编写service：查询详情

  

      /**
       * 查询详情
       * @param classId
       * @return
       */
      public Classes findById(String classId){
        
        
          Classes classes = classesMapper.selectByPrimaryKey(classId);
          return classes;
      }
  
  

• 编写controller

  

   /**
     * 查询详情
     * @param classId
     * @return
     */
    @GetMapping("/{id}")
    public BaseResult findById(@PathVariable("id") String classId ){
    
    
        // 查询
        Classes classes = classesService.findById(classId);
        // 返回
        return BaseResult.ok("查询成功", classes);
    }

• 测试

2.4.4 后端实现：更新

• 编写service：更新方法

  

      /**
       * 更新操作
       * @param classes
       * @return
       */
      public boolean update(Classes classes){
        
        
          // 更新非空项
          int count = classesMapper.updateByPrimaryKeySelective(classes);
          return count == 1;
      }
  

• 编写controller

  

    /**
     * 更新操作
     * @param classes
     * @return
     */
    @PutMapping
    public BaseResult update(@RequestBody Classes classes){
    
    
        // 添加
        boolean result = classesService.update(classes);
        // 返回
        if(result){
    
    
            return BaseResult.ok("更新成功");
        } else {
    
    
            return BaseResult.error("更新失败");
        }
    }

• 测试

2.4.5 前端实现

• 修改列表页面，编写访问路径

  <a href="classes_edit.html?id=${classes.cId}">修改</a>
  

  

• 表单回显

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级列表</title>

    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/form2json-2.1.js"></script>

    <script>

        $(function(){
     
     
            // 查询所有
            findAll();

        });

		// 查询所有函数
        function findAll() {
     
     
            $.ajax({
     
     
                "url":"/classes",
                "type":"get",
                "dataType":"json",
                "success": function(data){
     
     
                    // 处理
                    if(data.code == 1){
     
     
                        // 追加数据
                        $(data.data).each(function(index, classes){
     
     
                            $("#tid").append(`
                                <tr>
                                    <td>${
       
       classes.cId}</td>
                                    <td>${
       
       classes.cname}</td>
                                    <td>${
       
       classes.desc}</td>
                                    <td>
                                        <a href="classes_edit.html?id=${
       
       classes.cId}">修改</a>
                                        <a href="javascript:deleteClasses('${
       
       classes.cId}')" >删除</a>
                                    </td>
                                </tr>
                            `);
                        })
                    } else {
     
     
                        alert(data.message)
                    }
                },
                "error": function() {
     
     
                    alert('操作失败')
                }
            })
        }

    </script>


<body>
</head>
    <a href="classes_list.html">返回列表页</a>

    <form id="f01">
        <table id="tid" border="1">
            <tr>
                <td>班级名称</td>
                <td>
                    <input id="cName" name="cName" />
                    <!-- 使用隐藏字段，记录id信息 -->
                    <input type="hidden" id="cId" name="cId" />
                </td>
            </tr>
            <tr>
                <td>班级描述</td>
                <td>
                    <textarea cols="20" rows="5" id="desc" name="desc" ></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="更新" /></td>
            </tr>

        </table>
    </form>
</body>
</html>

• 表单提交，编写edit() 函数

  

        // 编辑
        function edit() {
    
    
            // 获得表单数据
            var obj = $("#f01").formToJson();

            $.ajax({
    
    
                "url":"/classes",
                "type":"put",
                "contentType":"application/json;charset=UTF-8",
                "data": obj,
                "dataType":"json",
                "success":function(data){
    
    
                    // 处理
                    if(data.code == 1) {
    
    
                        // 成功提示
                        alert(data.message)
                        // 跳转
                        location.href = "classes_list.html"
                    } else {
    
    
                        // 失败提示
                        alert(data.message)
                    }
                },
                "error":function(){
    
    
                    alert('操作失败')
                }
            })
 		}

2.5 删除班级

2.5.1 需求

2.5.2 分析

2.5.3 后端实现

• 编写service

  

      /**
       * 通过id删除详情
       * @param classId
       * @return
       */
      public boolean deleteById(String classId) {
        
        
          int count = classesMapper.deleteByPrimaryKey(classId);
          return count == 1;
      }
  

• 编写controller

  

    /**
     * 查询详情
     * @param classId
     * @return
     */
    @DeleteMapping("/{id}")
    public BaseResult deleteById(@PathVariable("id") String classId ){
    
    
        // 查询
        boolean result = classesService.deleteById(classId);
        // 返回
        if(result){
    
    
            return BaseResult.ok("删除成功");
        } else {
    
    
            return BaseResult.error("删除失败");
        }
    }

• 测试

3.5.4 前端实现

• 修改列表页面，添加删除功能

  <a href="javascript:del('${classes.cId}')">删除</a>
  

• 编写删除函数

// 删除
        function del(id) {
    
    
            // 询问
            if(! confirm('您确定要删除么')){
    
    
                return false;
            }

            // ajax 删除
            $.ajax({
    
    
                "url":"/classes/" + id,
                "type":"delete",
                "dataType":"json",
                "success":function(data){
    
    
                    // 处理
                    if(data.code == 1) {
    
    
                        // 成功提示
                        alert(data.message)
                        // 跳转
                        location.href = "classes_list.html"
                    } else {
    
    
                        // 失败提示
                        alert(data.message)
                    }
                },
                "error":function(){
    
    
                    alert('操作失败')
                }
            })
        }

3. 单表：学生管理(巩固)

3.1 学生SQL（数据库）

# 学生表
create table tb_student(
  s_id varchar(32) primary key comment '学生ID',
  sname varchar(50) comment '姓名',
  age int comment '年龄',
  birthday datetime comment '生日',
  gender char(1) comment '性别',
  c_id varchar(32)
);
alter table tb_student add constraint foreign key (c_id) references tb_class (c_id);

insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s001','赵三',19,'2001-01-17','1','c001');
insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s002','钱四',19,'2001-05-16','1','c001');
insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s003','孙五',18,'2002-03-15','1','c001');
insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s004','李三',19,'2001-04-14','0','c002');
insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s005','周四',19,'2001-02-13','0','c002');
insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s006','王五',18,'2002-06-12','1','c002');

3.2 查询所有学生

3.2.1 需求

3.2.2 后端实现

• 编写JavaBean

  

  package com.czxy.domain;
  
  import javax.persistence.Column;
  import javax.persistence.Id;
  import javax.persistence.Table;
  import java.util.Date;
  
  /**
   * @author 桐叔
   * @email [email protected]
   */
  @Table(name="tb_student")
  public class Student {
        
        
  
      @Id
      @Column(name="s_id")
      private String sId;         //学生ID
  
      @Column(name="sname")
      private String sname;         //姓名
  
      @Column(name="age")
      private Integer age;         //年龄
  
      @Column(name="birthday")
      private Date birthday;         //生日
  
      @Column(name="gender")
      private String gender;      //性别
  
      @Column(name="c_id")
      private String cId;         //班级外键
  
      public String getsId() {
        
        
          return sId;
      }
  
      public void setsId(String sId) {
        
        
          this.sId = sId;
      }
  
      public String getSname() {
        
        
          return sname;
      }
  
      public void setSname(String sname) {
        
        
          this.sname = sname;
      }
  
      public Integer getAge() {
        
        
          return age;
      }
  
      public void setAge(Integer age) {
        
        
          this.age = age;
      }
  
      public Date getBirthday() {
        
        
          return birthday;
      }
  
      public void setBirthday(Date birthday) {
        
        
          this.birthday = birthday;
      }
  
      public String getGender() {
        
        
          return gender;
      }
  
      public void setGender(String gender) {
        
        
          this.gender = gender;
      }
  
      public String getcId() {
        
        
          return cId;
      }
  
      public void setcId(String cId) {
        
        
          this.cId = cId;
      }
  
      @Override
      public String toString() {
        
        
          return "Student{" +
                  "sId='" + sId + '\'' +
                  ", sname='" + sname + '\'' +
                  ", age=" + age +
                  ", birthday=" + birthday +
                  ", gender='" + gender + '\'' +
                  ", cId='" + cId + '\'' +
                  '}';
      }
  }
  

• 编写Mapper

  

  package com.czxy.mapper;
  
  import com.czxy.domain.Student;
  import tk.mybatis.mapper.common.Mapper;
  
  /**
   * @author 桐叔
   * @email [email protected]
   */
  @org.apache.ibatis.annotations.Mapper
  public interface StudentMapper extends Mapper<Student> {
        
        
  
  }
  
  

• 编写service

  

  package com.czxy.service;
  
  import com.czxy.domain.Student;
  import com.czxy.mapper.StudentMapper;
  import org.springframework.stereotype.Service;
  import org.springframework.transaction.annotation.Transactional;
  
  import javax.annotation.Resource;
  import java.util.List;
  
  /**
   * @author 桐叔
   * @email [email protected]
   */
  @Service
  @Transactional
  public class StudentService {
        
        
  
      @Resource
      private StudentMapper studentMapper;
  
      /**
       * 查询所有
       * @return
       */
      public List<Student> findAll(){
        
        
          List<Student> list = studentMapper.selectAll();
          return list;
      }
  
  }
  
  

• 编写controller

  

  package com.czxy.controller;
  
  import com.czxy.domain.Student;
  import com.czxy.service.StudentService;
  import com.czxy.vo.BaseResult;
  import org.springframework.web.bind.annotation.*;
  
  import javax.annotation.Resource;
  import java.util.List;
  
  /**
   * @author 桐叔
   * @email [email protected]
   */
  @RestController
  @RequestMapping("/student")
  public class StudentController {
        
        
  
      @Resource
      private StudentService studentService;
  
      /**
       * 查询所有
       * @return
       */
      @GetMapping
      public BaseResult findAll(){
        
        
          // 查询
          List<Student> list = studentService.findAll();
          // 返回
          return BaseResult.ok("查询成功", list );
      }
  }
  
  

• 测试

3.2.3 前端实现

• 修改首页：

  

• 创建student_list.html 页面

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级列表</title>

    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>

    <script>
        $(function(){
     
     

            // 查询所有
            findAll();
        });

        //查询所有函数
        function findAll() {
     
     

            // 查询
            $.ajax({
     
     
                "url":"/student",
                "type":"get",
                "dataType":"json",
                "success":function(data){
     
     
                    // 处理
                    if(data.code == 1) {
     
     
                        // 重置table
                        $("#tid").html(`
                            <tr>
                                <td>学生ID</td>
                                <td>班级ID</td>
                                <td>学生姓名</td>
                                <td>年龄</td>
                                <td>生日</td>
                                <td>性别</td>
                                <td>操作</td>
                            </tr>
                        `);
                        // 追加
                        $(data.data).each(function(index,student){
     
     
                            $("#tid").append(`
                                <tr>
                                    <td>${
       
       student.sId}</td>
                                    <td>${
       
       student.cId}</td>
                                    <td>${
       
       student.sname}</td>
                                    <td>${
       
       student.age}</td>
                                    <td>${
       
       student.birthday}</td>
                                    <td>${
       
       student.gender}</td>
                                    <td>
                                        <a href="">修改</a>
                                        <a href="">删除</a>
                                    </td>
                                </tr>
                            `)
                        });
                    } else {
     
     
                        //
                        alert(data.message)
                    }
                },
                "error":function(){
     
     
                    alert('操作失败')
                }
            })
        }


    </script>


</head>
<body>
    <a href="index.html">返回首页</a>
    <a href="">添加学生</a> <br/>

    <table id="tid" border="1" width="800">
        <tr>
            <td>学生ID</td>
            <td>班级ID</td>
            <td>学生姓名</td>
            <td>年龄</td>
            <td>生日</td>
            <td>性别</td>
            <td>操作</td>
        </tr>
        <!--
        <tr>
            <td>s001</td>
            <td>c001</td>
            <td>张三</td>
            <td>18</td>
            <td>2002-12-21</td>
            <td>男</td>
            <td>
                <a href="">修改</a>
                <a href="">删除</a>
            </td>
        </tr>
		-->
    </table>
</body>
</html>

3.2.4 日期处理

• 分析

  

• 修改JavaBean，添加@JsonFormat注解

      @Column(name="birthday")
      @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
      private Date birthday;         //生日
  

• 效果

3.2.4 特殊信息处理

• 性别数据为1或0，需要显示男或女。

  ${student.gender == 1 ? "男" : "女"}
  

• 补充

== js等号，只比较值
1 == 1				--> true (整数比较整数，值都是1)
1 == '1'			--> true (整数比较字符，值都是1)

=== js全等，比较 值 + 类型
1 === 1				--> true (整数比较整数，值都是1，类型都是整数)
1 === '1'			--> false(整数比较字符，值都是1，类型不同)

三元运算：

3.3 添加班级

3.2.1 需求

3.2.2 后端实现

• 修改service

  

      /**
       * 添加学生
       * @param student
       * @return
       */
      public boolean save(Student student){
        
        
          int count = studentMapper.insert(student);
          return count == 1;
      }
  

• 修改controller

  

      /**
       * 添加学生
       * @param student
       * @return
       */
      @PostMapping
      public BaseResult save(@RequestBody Student student){
        
        
          // 添加
          boolean result = studentService.save(student);
          // 返回
          if(result){
        
        
              return BaseResult.ok("添加成功");
          } else {
        
        
              return BaseResult.error("添加失败");
          }
      }
  

3.2.3 前端实现

• 修改学生列表

  

• 创建student_add.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级列表</title>

    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/form2json-2.1.js"></script>

    <script>

        function add() {
     
     
            // 获得表单数据
            var obj = $("#f01").formToJson();

            $.ajax({
     
     
                "url":"/student",
                "type":"post",
                "contentType":"application/json;charset=UTF-8",
                "data": obj,
                "dataType":"json",
                "success":function(data){
     
     
                    // 处理
                    if(data.code == 1) {
     
     
                        // 成功提示
                        alert(data.message)
                        // 跳转
                        location.href = "student_list.html"
                    } else {
     
     
                        // 失败提示
                        alert(data.message)
                    }
                },
                "error":function(){
     
     
                    alert('操作失败')
                }
            })
        }


    </script>


<body>
</head>
    <a href="student_list.html">返回列表页</a>

    <form id="f01">
        <table id="tid" border="1">
            <tr>
                <td>学生</td>
                <td><input name="sId" /> </td>
            </tr>
            <tr>
                <td>班级ID</td>
                <td><input name="cId" /> </td>
            </tr>
            <tr>
                <td>姓名</td>
                <td><input name="sname" /> </td>
            </tr>
            <tr>
                <td>年龄</td>
                <td><input name="age" /> </td>
            </tr>
            <tr>
                <td>生日</td>
                <td><input name="birthday" /> </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="gender" value="1" />男
                    <input type="radio" name="gender" value="0" />女
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="添加" onclick="add()"/></td>
            </tr>

        </table>
    </form>
</body>
</html>

3.4 修改班级

3.2.1 需求

3.2.2 后端实现：查询详情

• 修改service

  

      /**
       * 查询详情
       * @param studentId
       * @return
       */
      public Student findById(String studentId){
        
        
          Student student = studentMapper.selectByPrimaryKey(studentId);
          return student;
      }
  

• 修改controller

  

      /**
       * 查询详情
       * @param studentId
       * @return
       */
      @GetMapping("/{id}")
      public BaseResult findById(@PathVariable("id") String studentId ){
        
        
          // 查询
          Student student = studentService.findById(studentId);
          // 返回
          return BaseResult.ok("查询成功", student);
      }
  

• 测试

3.2.3 后端实现：更新

• 修改service

  

      /**
       * 更新操作
       * @param student
       * @return
       */
      public boolean update(Student student){
        
        
          // 更新非空项
          int count = studentMapper.updateByPrimaryKeySelective(student);
          return count == 1;
      }
  
  

• 修改controller

  

      /**
       * 更新操作
       * @param student
       * @return
       */
      @PutMapping
      public BaseResult update(@RequestBody Student student){
        
        
          // 添加
          boolean result = studentService.update(student);
          // 返回
          if(result){
        
        
              return BaseResult.ok("更新成功");
          } else {
        
        
              return BaseResult.error("更新失败");
          }
      }
  

• 测试

3.2.4 前端实现

• 修改列表页面

  

• 创建 student_edit.html ,用于 表单回显，

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>班级列表</title>
  
      <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
      <script type="text/javascript" src="js/form2json-2.1.js"></script>
  
      <script>
          $(function(){
         
         
              // 获得id
              var arr = location.href.split("?id=")
              var id = arr[1]
  
              // 查询详情，用于表单回显
              $.ajax({
         
         
                  "url":"/student/" + id,
                  "type":"get",
                  "dataType":"json",
                  "success":function(data){
         
         
                      // 处理
                      if(data.code == 1) {
         
         
                          var student = data.data;
                          $("#sId").val(student.sId);
                          $("#cId").val(student.cId);
                          $("#sname").val(student.sname);
                          $("#age").val(student.age);
                          $("#birthday").val(student.birthday);
                          if(student.gender == '1'){
         
         
                              $("#male").attr("checked",true);
                          } else {
         
         
                              $("#female").attr("checked",true);
                          }
                      } else {
         
         
                          // 失败回显
                          alert(data.message)
                      }
                  },
                  "error":function(){
         
         
                      alert('操作失败')
                  }
              })
  
          });
  
  
  
      </script>
  
  
  <body>
  </head>
      <a href="student_list.html">返回列表页</a>
  
      <form id="f01">
          <table id="tid" border="1">
              <tr>
                  <td>班级ID</td>
                  <td>
                      <input id="cId" name="cId" />
                      <input type="hidden" id="sId" name="sId" />
                  </td>
              </tr>
              <tr>
                  <td>姓名</td>
                  <td><input id="sname" name="sname" /> </td>
              </tr>
              <tr>
                  <td>年龄</td>
                  <td><input id="age" name="age" /> </td>
              </tr>
              <tr>
                  <td>生日</td>
                  <td><input id="birthday" name="birthday" /> </td>
              </tr>
              <tr>
                  <td>性别</td>
                  <td>
                      <input type="radio" id="male" name="gender" value="1" />男
                      <input type="radio" id="female" name="gender" value="0" />女
                  </td>
              </tr>
              <tr>
                  <td></td>
                  <td><input type="button" value="添加" /></td>
              </tr>
  
          </table>
      </form>
  </body>
  </html>
  

• 提交表单

  

  function edit() {
        
        
              // 获得表单数据
              var obj = $("#f01").formToJson();
  
              $.ajax({
        
        
                  "url":"/student",
                  "type":"put",
                  "contentType":"application/json;charset=UTF-8",
                  "data": obj,
                  "dataType":"json",
                  "success":function(data){
        
        
                      // 处理
                      if(data.code == 1) {
        
        
                          // 成功提示
                          alert(data.message)
                          // 跳转
                          location.href = "student_list.html"
                      } else {
        
        
                          // 失败提示
                          alert(data.message)
                      }
                  },
                  "error":function(){
        
        
                      alert('操作失败')
                  }
              })
          }
  

3.5 删除班级

3.2.1 需求

3.2.2 后端实现

• 修改service

  

      /**
       * 通过id删除详情
       * @param studentId
       * @return
       */
      public boolean deleteById(String studentId) {
        
        
          int count = studentMapper.deleteByPrimaryKey(studentId);
          return count == 1;
      }
  
  

• 修改controller

  

  /**
       * 通过id删除
       * @param studentId
       * @return
       */
      @DeleteMapping("/{id}")
      public BaseResult deleteById(@PathVariable("id") String studentId ){
        
        
          // 查询
          boolean result = studentService.deleteById(studentId);
          // 返回
          if(result){
        
        
              return BaseResult.ok("删除成功");
          } else {
        
        
              return BaseResult.error("删除失败");
          }
      }
  

• 测试

3.2.3 前端实现

// 删除
        function del(id) {
    
    
            // 询问
            if(! confirm('您确定要删除么')){
    
    
                return false;
            }

            // ajax 删除
            $.ajax({
    
    
                "url":"/student/" + id,
                "type":"delete",
                "dataType":"json",
                "success":function(data){
    
    
                    // 处理
                    if(data.code == 1) {
    
    
                        // 成功提示
                        alert(data.message)
                        // 跳转
                        location.href = "student_list.html"
                    } else {
    
    
                        // 失败提示
                        alert(data.message)
                    }
                },
                "error":function(){
    
    
                    alert('操作失败')
                }
            })
        }

4. 单表：条件查询

4.1 需求

<table id="f02">
        <tr>
            <td>班级</td>
            <td>
                <select name="" id="classId">
                    <option value="">--选择班级--</option>
                    <option value="c001">--Java12--</option>
                    <option value="c002">--Java34--</option>
                </select>
            </td>
            <td>姓名：</td>
            <td>
                <input type="text" placeholder="请输入姓名" id="sname" size="10">
            </td>
            <td>年龄：</td>
            <td>
                <input type="text" placeholder="请输入开始年龄" id="startAge" size="10">
                --
                <input type="text" placeholder="请输入结束年龄" id="endAge" size="10">
            </td>
            <td><input type="button" value="查询" onclick="condition()"></td>
        </tr>
    </table>

4.2 分析

4.3 后端实现

• 编写 StudentVo

  package com.czxy.vo;
  
  /**
   * @author 桐叔
   * @email [email protected]
   */
  public class StudentVo {
        
        
      private String classId;     //班级
      private String sname;       //姓名
      private String startAge;    //开始年龄
      private String endAge;      //结束年龄
  
      public String getClassId() {
        
        
          return classId;
      }
  
      public void setClassId(String classId) {
        
        
          this.classId = classId;
      }
  
      public String getSname() {
        
        
          return sname;
      }
  
      public void setSname(String sname) {
        
        
          this.sname = sname;
      }
  
      public String getStartAge() {
        
        
          return startAge;
      }
  
      public void setStartAge(String startAge) {
        
        
          this.startAge = startAge;
      }
  
      public String getEndAge() {
        
        
          return endAge;
      }
  
      public void setEndAge(String endAge) {
        
        
          this.endAge = endAge;
      }
  
      @Override
      public String toString() {
        
        
          return "StudentVo{" +
                  "classId='" + classId + '\'' +
                  ", sname='" + sname + '\'' +
                  ", startAge='" + startAge + '\'' +
                  ", endAge='" + endAge + '\'' +
                  '}';
      }
  }
  
  

• 编写service

     /**
       * 查询所有
       * @return
       */
      public List<Student> findAllByCondition(StudentVo studentVo){
        
        
          // 拼凑条件
          Example example = new Example(Student.class);
          Example.Criteria criteria = example.createCriteria();
          if(studentVo != null){
        
        
              //等值查询
              if(studentVo.getClassId() != null && !"".equals(studentVo.getClassId())) {
        
        
                  criteria.andEqualTo("cId",studentVo.getClassId());
              }
              // 模糊查询
              if(studentVo.getSname() != null && !"".equals(studentVo.getSname())) {
        
        
                  criteria.andLike("sname","%"+studentVo.getSname()+"%");
              }
              // 区间查询
              if(studentVo.getStartAge() != null && !"".equals(studentVo.getStartAge())){
        
        
                  criteria.andGreaterThanOrEqualTo("age",studentVo.getStartAge());
              }
              if(studentVo.getEndAge() != null && !"".equals(studentVo.getEndAge())) {
        
        
                  criteria.andLessThanOrEqualTo("age",studentVo.getEndAge());
              }
          }
  
          // 条件查询
          List<Student> list = studentMapper.selectByExample(example);
          return list;
      }
  

• 编写controller

      /**
       * 条件查询
       * @param studentVo
       * @return
       */
      @PostMapping("/condition")
      public BaseResult conditioin(@RequestBody StudentVo studentVo){
        
        
          // 添加
          List<Student> list = studentService.findAllByCondition(studentVo);
          // 返回
          // 返回
          return BaseResult.ok("查询成功", list );
      }
  

  4.4 前端实现

• 编写查询条件表单（注意：表单元素的name属性）

<form id="f02">
        <table>
            <tr>
                <td>班级</td>
                <td>
                    <select name="classId" id="classId">
                        <option value="">--选择班级--</option>
                        <option value="c001">--Java12--</option>
                        <option value="c002">--Java34--</option>
                    </select>
                </td>
                <td>姓名：</td>
                <td>
                    <input type="text" placeholder="请输入姓名" id="sname" name="sname" size="10">
                </td>
                <td>年龄：</td>
                <td>
                    <input type="text" placeholder="请输入开始年龄" id="startAge" name="startAge" size="10">
                    --
                    <input type="text" placeholder="请输入结束年龄" id="endAge" name="endAge" size="10">
                </td>
                <td><input type="button" value="查询" onclick="condition()"></td>
            </tr>
        </table>
    </form>

• 编写条件查询函数

  

// 条件查询
        function condition() {
    
    
            // 条件
            // 获得表单数据
            var obj = $("#f02").formToJson();

            // 查询
            $.ajax({
    
    
                "url":"/student/condition",
                "type":"post",
                "contentType":"application/json;charset=UTF-8",
                "data": obj,
                "dataType":"json",
                "success":function(data){
    
    
                    // 处理
                    if(data.code == 1) {
    
    
                        // 重置table
                        $("#tid").html(`
                            <tr>
                                <td>学生ID</td>
                                <td>班级ID</td>
                                <td>学生姓名</td>
                                <td>年龄</td>
                                <td>生日</td>
                                <td>性别</td>
                                <td>操作</td>
                            </tr>
                        `);
                        // 追加
                        $(data.data).each(function(index,student){
    
    
                            $("#tid").append(`
                                <tr>
                                    <td>${
      
      student.sId}</td>
                                    <td>${
      
      student.cId}</td>
                                    <td>${
      
      student.sname}</td>
                                    <td>${
      
      student.age}</td>
                                    <td>${
      
      student.birthday}</td>
                                    <td>${
      
      student.gender == 1 ? "男" : "女"}</td>
                                    <td>
                                        <a href="student_edit.html?id=${
      
      student.sId}">修改</a>
                                        <a href="javascript:del('${
      
      student.sId}')">删除</a>
                                    </td>
                                </tr>
                            `)
                        });
                    } else {
    
    
                        //
                        alert(data.message)
                    }
                },
                "error":function(){
    
    
                    alert('操作失败')
                }
            })
        }

5. 多表

5.1 关联查询

5.1.1 需求

5.1.2 后端实现

• 修改JavaBean，修改Student类，添加 classes 属性

  private Classes classes;    //班级对象
  // 并生成对应的getter和setter方法
  

  

• 修改service，添加关联查询代码

  • 注入 classesMapper

    

  • 修改条件查询方法

    

5.1.3 前端实现

• 查询所有：显示学生对应的班级信息

  

// ${表达式 ? true : false }
${
    
    student.classes ? student.classes.cName : ''}

• 条件查询

5.2 添加学生

• 已有功能：手写班级id（外键）

  

• 硬编码：通过下拉列表获得“班级ID”

  <select name="cId">
       <option value="">--请选择--</option>
       <option value="c001">Java12班</option>
       <option value="c002">Java34班</option>
  </select>
  

• ajax查询：页面加载成功后，查询所有班级，并以下拉列表框展示

$(function(){
    
    
            // 查询所有班级，并添加到下拉列表框中
            $.ajax({
    
    
                "url":"/classes",
                "type":"get",
                "dataType":"json",
                "success":function(data){
    
    
                    // 处理
                    if(data.code == 1) {
    
    
                        // 重置table
                        $("#cId").html(`
                            <option value="">--请选择--</option>
                        `);
                        // 追加
                        $(data.data).each(function(index,classes){
    
    
                            $("#cId").append(`
                                <option value="${
      
      classes.cId}">${
      
      classes.cName}</option>
                            `)
                        });
                    } else {
    
    
                        // 查询失败
                        alert(data.message)
                    }
                },
                "error":function(){
    
    
                    alert('操作失败')
                }
            })

        });

5.3 修改学生

• 使用下拉列表替换文本框

  

• 页面加载成功后，查询所有班级，班级信息显示后，查询学生详情

  

// 页面加载成功
        $(function(){
    
    
            // 查询所有班级
            findAllClasses();
        });

        // 查询所有班级，成功显示，调用“学生详情”
        function findAllClasses() {
    
    
            $.ajax({
    
    
                "url":"/classes",
                "type":"get",
                "dataType":"json",
                "success":function(data){
    
    
                    // 处理
                    if(data.code == 1) {
    
    
                        // 重置table
                        $("#cId").html(`
                            <option value="">--请选择--</option>
                        `);
                        // 追加
                        $(data.data).each(function(index,classes){
    
    
                            $("#cId").append(`
                                <option value="${
      
      classes.cId}">${
      
      classes.cName}</option>
                            `)
                        });

                        // 班级查询完成，查询学生
                        findStudentById();
                    } else {
    
    
                        // 查询失败
                        alert(data.message)
                    }
                },
                "error":function(){
    
    
                    alert('操作失败')
                }
            })
        }
        // 通过id查询学生详情
        function findStudentById(){
    
    
            // 获得id
            var arr = location.href.split("?id=")
            var id = arr[1]

            // 查询详情，用于表单回显
            $.ajax({
    
    
                "url":"/student/" + id,
                "type":"get",
                "dataType":"json",
                "success":function(data){
    
    
                    // 处理
                    if(data.code == 1) {
    
    
                        var student = data.data;
                        $("#sId").val(student.sId);
                        $("#cId").val(student.cId);
                        $("#sname").val(student.sname);
                        $("#age").val(student.age);
                        $("#birthday").val(student.birthday);
                        if(student.gender == '1'){
    
    
                            $("#male").attr("checked",true);
                        } else {
    
    
                            $("#female").attr("checked",true);
                        }
                    } else {
    
    
                        // 失败回显
                        alert(data.message)
                    }
                },
                "error":function(){
    
    
                    alert('操作失败')
                }
            })
        }

5.4 删除班级

5.4.1 需求

5.4.2 后端实现

• 修改service：

  

      /**
       * 通过id删除详情
       * @param classId
       * @return
       */
      public boolean deleteById(String classId) {
        
        
          // 查询指定班级id的学生数
          Example example = new Example(Student.class);
          Example.Criteria criteria = example.createCriteria();
          criteria.andEqualTo("cId", classId);
          int studentCount = studentMapper.selectCountByExample(example);
          if(studentCount > 0) {
        
        
              throw new RuntimeException("班级已关联学生，不能删除");
          }
  
          int count = classesMapper.deleteByPrimaryKey(classId);
          return count == 1;
      }
  

• 修改controller：

      /**
       * 查询详情
       * @param classId
       * @return
       */
      @DeleteMapping("/{id}")
      public BaseResult deleteById(@PathVariable("id") String classId ){
        
        
          try {
        
        
              // 查询
              boolean result = classesService.deleteById(classId);
              // 返回
              if(result){
        
        
                  return BaseResult.ok("删除成功");
              } else {
        
        
                  return BaseResult.error("删除失败");
              }
          } catch (Exception e) {
        
        
              return BaseResult.error(e.getMessage());
          }
      }
  

  6. 分页

6.1 需求

6.2 分析

6.2 后端实现

• 修改controller：

  

    /**
     * 条件查询
     * @param studentVo
     * @return
     */
    @PostMapping("/condition/{pagesize}/{pagenum}")
    public BaseResult conditioin(@RequestBody StudentVo studentVo, @PathVariable("pagenum") Integer pagesize , @PathVariable("pagesize") Integer pagenum){
    
    
        // 添加
        PageInfo<Student> pageInfo = studentService.findAllByCondition(studentVo,pagesize,pagenum);
        // 返回
        // 返回
        return BaseResult.ok("查询成功", pageInfo);
    }

• 修改 service

 /**
     * 查询所有 + 分页
     * @return
     */
    public PageInfo<Student> findAllByCondition(StudentVo studentVo, Integer pageSize, Integer pageNum){
    
    
        // 拼凑条件
        Example example = new Example(Student.class);
        Example.Criteria criteria = example.createCriteria();
        if(studentVo != null){
    
    
            //等值查询
            if(studentVo.getClassId() != null && !"".equals(studentVo.getClassId())) {
    
    
                criteria.andEqualTo("cId",studentVo.getClassId());
            }
            // 模糊查询
            if(studentVo.getSname() != null && !"".equals(studentVo.getSname())) {
    
    
                criteria.andLike("sname","%"+studentVo.getSname()+"%");
            }
            // 区间查询
            if(studentVo.getStartAge() != null && !"".equals(studentVo.getStartAge())){
    
    
                criteria.andGreaterThanOrEqualTo("age",studentVo.getStartAge());
            }
            if(studentVo.getEndAge() != null && !"".equals(studentVo.getEndAge())) {
    
    
                criteria.andLessThanOrEqualTo("age",studentVo.getEndAge());
            }
        }

        // 分页
        PageHelper.startPage(pageNum,pageSize);

        // 条件查询
        List<Student> list = studentMapper.selectByExample(example);

        // 关联查询
        for(Student student : list){
    
    
            // 查询班级外键对应的对象
            Classes classes = classesMapper.selectByPrimaryKey(student.getcId());
            student.setClasses(classes);
        }

        // 分页封装
        PageInfo pageInfo = new PageInfo(list);
        return pageInfo;
    }

6.3 前端实现

• 修改条件查询函数，添加分页参数

• 修改条件查询函数，修改返回结果

• 修改查询按钮

  

• 显示分页条

  

  

6.4 前端完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级列表</title>

    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/form2json-2.1.js"></script>

    <script>
        $(function(){
     
     

            // 查询所有
            //findAll();

            // 条件查询
            condition(2,1);
        });

        //查询所有函数
        function findAll() {
     
     

            // 查询
            $.ajax({
     
     
                "url":"/student",
                "type":"get",
                "dataType":"json",
                "success":function(data){
     
     
                    // 处理
                    if(data.code == 1) {
     
     
                        // 重置table
                        $("#tid").html(`
                            <tr>
                                <td>学生ID</td>
                                <td>班级</td>
                                <td>学生姓名</td>
                                <td>年龄</td>
                                <td>生日</td>
                                <td>性别</td>
                                <td>操作</td>
                            </tr>
                        `);
                        // 追加
                        $(data.data).each(function(index,student){
     
     
                            $("#tid").append(`
                                <tr>
                                    <td>${
       
       student.sId}</td>
                                    <td>${
       
       student.classes ? student.classes.cName : ''}</td>
                                    <td>${
       
       student.sname}</td>
                                    <td>${
       
       student.age}</td>
                                    <td>${
       
       student.birthday}</td>
                                    <td>${
       
       student.gender == 1 ? "男" : "女"}</td>
                                    <td>
                                        <a href="student_edit.html?id=${
       
       student.sId}">修改</a>
                                        <a href="javascript:del('${
       
       student.sId}')">删除</a>
                                    </td>
                                </tr>
                            `)
                        });
                    } else {
     
     
                        //
                        alert(data.message)
                    }
                },
                "error":function(){
     
     
                    alert('操作失败')
                }
            })
        }

        // 删除
        function del(id) {
     
     
            // 询问
            if(! confirm('您确定要删除么')){
     
     
                return false;
            }

            // ajax 删除
            $.ajax({
     
     
                "url":"/student/" + id,
                "type":"delete",
                "dataType":"json",
                "success":function(data){
     
     
                    // 处理
                    if(data.code == 1) {
     
     
                        // 成功提示
                        alert(data.message)
                        // 跳转
                        location.href = "student_list.html"
                    } else {
     
     
                        // 失败提示
                        alert(data.message)
                    }
                },
                "error":function(){
     
     
                    alert('操作失败')
                }
            })
        }

        // 条件查询
        function condition(pageSize,pageNum) {
     
     
            // 条件
            // 获得表单数据
            var obj = $("#f02").formToJson();

            // 查询
            $.ajax({
     
     
                "url":`/student/condition/${
       
       pageSize}/${
       
       pageNum}`,     ///student/condition/每页个数/当前页
                "type":"post",
                "contentType":"application/json;charset=UTF-8",
                "data": obj,
                "dataType":"json",
                "success":function(data){
     
     
                    // 处理
                    if(data.code == 1) {
     
     
                        // 重置table
                        $("#tid").html(`
                            <tr>
                                <td>学生ID</td>
                                <td>班级</td>
                                <td>学生姓名</td>
                                <td>年龄</td>
                                <td>生日</td>
                                <td>性别</td>
                                <td>操作</td>
                            </tr>
                        `);
                        // 获得分页数据
                        var pageInfo = data.data;
                        // 追加分页数据
                        $(pageInfo.list).each(function(index,student){
     
     
                            $("#tid").append(`
                                <tr>
                                    <td>${
       
       student.sId}</td>
                                    <td>${
       
       student.classes ? student.classes.cName : ''}</td>
                                    <td>${
       
       student.sname}</td>
                                    <td>${
       
       student.age}</td>
                                    <td>${
       
       student.birthday}</td>
                                    <td>${
       
       student.gender == 1 ? "男" : "女"}</td>
                                    <td>
                                        <a href="student_edit.html?id=${
       
       student.sId}">修改</a>
                                        <a href="javascript:del('${
       
       student.sId}')">删除</a>
                                    </td>
                                </tr>
                            `)
                        });
                        // 分页条
                        $("#pageId").html("");
                        
                        for(var i = 1 ; i <= pageInfo.pages; i ++){
     
     
                            $("#pageId").append(`<a href="javascript:void(0)" οnclick="condition(2,${
       
       i})">${
       
       i}</a> &nbsp;`)
                        }

                    } else {
     
     
                        //
                        alert(data.message)
                    }
                },
                "error":function(){
     
     
                    alert('操作失败')
                }
            })
        }

    </script>


</head>
<body>
    <a href="index.html">返回首页</a>
    <a href="student_add.html">添加学生</a> <br/>

    <form id="f02">
        <table>
            <tr>
                <td>班级</td>
                <td>
                    <select name="classId" id="classId">
                        <option value="">--选择班级--</option>
                        <option value="c001">--Java12--</option>
                        <option value="c002">--Java34--</option>
                    </select>
                </td>
                <td>姓名：</td>
                <td>
                    <input type="text" placeholder="请输入姓名" id="sname" name="sname" size="10">
                </td>
                <td>年龄：</td>
                <td>
                    <input type="text" placeholder="请输入开始年龄" id="startAge" name="startAge" size="10">
                    --
                    <input type="text" placeholder="请输入结束年龄" id="endAge" name="endAge" size="10">
                </td>
                <td><input type="button" value="查询" onclick="condition(2, 1)"></td>
            </tr>
        </table>
    </form>

    <table id="tid" border="1" width="800">
        <tr>

            <td>学生ID</td>
            <td>班级ID</td>
            <td>学生姓名</td>
            <td>年龄</td>
            <td>生日</td>
            <td>性别</td>
            <td>操作</td>
        </tr>
<!--        <tr>
            <td>s001</td>
            <td>c001</td>
            <td>张三</td>
            <td>18</td>
            <td>2002-12-21</td>
            <td>男</td>
            <td>
                <a href="">修改</a>
                <a href="">删除</a>
            </td>
        </tr>-->
    </table>

    <!-- 分页条 -->
    <div id="pageId"></div>
</body>
</html>