Idea springboot+mybatis(配置文件版)+thymeleaf+pagehelper实现数据表的增删改查+分页

springboot+mybatis(配置文件版)+thymeleaf+pagehelper实现数据表的增删改查+分页
1.创建springboot项目，在pom.xml中导入相关依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.ruanyuan.springboot</groupId>
    <artifactId>springboot-thymeleaf</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-thymeleaf</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
    	<!--JDBC数据源的依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jdbc</artifactId>
        </dependency>
        <!--web项目的依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--mybatis的依赖-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.2</version>
        </dependency>
		<!--mysql数据库的依赖-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <!--thymeleaf模板引擎的依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!--pagehelper分页的依赖-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.1.2</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

2.创建实体类
Deprtment实体类

public class Department {
    private Integer deptno;
    private String dname;
    private String loc;

    public Integer getDeptno() {
        return deptno;
    }

    public void setDeptno(Integer deptno) {
        this.deptno = deptno;
    }

    public String getDname() {
        return dname;
    }

    public void setDname(String dname) {
        this.dname = dname;
    }

    public String getLoc() {
        return loc;
    }

    public void setLoc(String loc) {
        this.loc = loc;
    }

    @Override
    public String toString() {
        return "Department{" +
                "deptno=" + deptno +
                ", dname='" + dname + '\'' +
                ", loc='" + loc + '\'' +
                '}';
    }
}

Employee实体类

public class Employee {
    private int empno;
    private String ename;
    private String job;

    private String hiredate;
    private float sal;
    private float comm;
    private Department department;

    public int getEmpno() {
        return empno;
    }

    public void setEmpno(int empno) {
        this.empno = empno;
    }

    public String getEname() {
        return ename;
    }

    public void setEname(String ename) {
        this.ename = ename;
    }

    public String getJob() {
        return job;
    }

    public void setJob(String job) {
        this.job = job;
    }



    public String getHiredate() {
        return hiredate;
    }

    public void setHiredate(String hiredate) {
        this.hiredate = hiredate;
    }

    public float getSal() {
        return sal;
    }

    public void setSal(float sal) {
        this.sal = sal;
    }

    public float getComm() {
        return comm;
    }

    public void setComm(float comm) {
        this.comm = comm;
    }

    public Department getDepartment() {
        return department;
    }

    public void setDepartment(Department department) {
        this.department = department;
    }

    @Override
    public String toString() {
        return "Employee{" +
                "empno=" + empno +
                ", ename='" + ename + '\'' +
                ", job='" + job + '\'' +

                ", hiredate='" + hiredate + '\'' +
                ", sal=" + sal +
                ", comm=" + comm +
                ", department=" + department +
                '}';
    }
}

3.创建数据访问层
DepartmentDao

public interface DepartmentDao {
    /**
     * 查询所有部门信息
     * @return
     */
    public ArrayList<Department> getAllDepartment();

    /**
     * 添加部门信息
     * @param department
     * @return
     */
    public int addDepartment(Department department);

    /**
     * 修改部门信息
     * @param department
     * @return
     */
    public int updateDepartment(Department department);

    /**
     * 根据部门ID删除部门信息
     * @param deptno
     * @return
     */
    public int deleteDepartmentById(int deptno);

    /**
     * 根据部门ID查找部门信息
     * @param deptno
     * @return
     */
    public Department getDepartmentById(int deptno);
}

EmployeeDao

public interface EmployeeDao {
    /**
     * 查询所有员工信息
     * @return
     */
    public List<Employee> getAllEmployee(@Param("deptno") String deptno, @Param("ename")String ename, @Param("hiredate1")String hiredate1, @Param("hiredate2")String hiredate2, @Param("sal1")String sal1, @Param("sal2")String sal2);

    /**
     * 根据部门ID查询部门信息
     * @param empno
     * @return
     */
    public Employee getEmployeeById(int empno);

    /**
     * 添加部门信息
     * @param employee
     * @return
     */
    public int addEmployee(Employee employee);

    /**
     * 修改部门信息
     * @param employee
     * @return
     */
    public int updateEmployee(Employee employee);

    /**
     * 删除部门信息
     * @param empno
     * @return
     */
    public int deleteEmployee(int empno);
    /**
     * 批量删除员工信息
     * @param empno
     * @return
     */
    public int deleteEmployees(List<Integer> empno);
}

在resources文件家下创建mapper文件夹，在mapper文件夹下创建DepartmentDao.xml和EmployeeDao.xml
DepartmentDao.xml配置文件：

<?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="com.ruanyuan.springboot.dao.DepartmentDao">

    <select id="getDepartmentById" parameterType="Integer" resultType="department">
		select * from department where deptno=#{deptno}

	</select>

    <select id="getAllDepartment" resultType="department">
		select * from department
	</select>

    <update id="updateDepartment" parameterType="department">
		update department set dname=#{dname} ,loc=#{loc} where deptno=#{deptno}
	</update>

    <insert id="addDepartment" parameterType="department">
		insert into department values(null,#{dname},#{loc})
	</insert>

    <delete id="deleteDepartmentById" parameterType="Integer">
		delete from department where deptno=#{deptno}
	</delete>
</mapper>

EmployeeDao.xml

<?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="com.ruanyuan.springboot.dao.EmployeeDao">

	<resultMap id="employeeWithDepartment" type="employee">
		<id property="empno" column="empno"/>
		<association property="department" column="deptno" select="com.ruanyuan.springboot.dao.DepartmentDao.getDepartmentById"/>
	</resultMap>
	<select id="getAllEmployee" resultMap="employeeWithDepartment">
		select * from employee
		<where>
		<if test="deptno!='' and deptno!=-1">
			and deptno=#{deptno}
		</if>
		<if test="ename!=null and ename!=''">
			and ename like concat('%',#{ename},'%')
		</if>
		<if test="hiredate1!=null and hiredate1!=''">
			and hiredate &gt;=#{hiredate1}
		</if>
		<if test="hiredate2!=null and hiredate2!=''">
			and hiredate &lt;=#{hiredate2}
		</if>
		<if test="sal1!=null and sal1!=''">
			and sal &gt;=#{sal1}
		</if>
		<if test="sal2!=null and sal2!=''">
			and sal &lt;=#{sal2}
		</if>
		</where>

	</select>

    <select id="getEmployeeById" parameterType="Integer" resultMap="employeeWithDepartment">
		select * from employee where empno=#{empno}

	</select>

	<update id="updateEmployee" parameterType="employee">
		update employee set ename=#{ename},job=#{job},hiredate=#{hiredate},sal=#{sal},comm=#{comm},deptno=#{department.deptno} where empno=#{empno}
	</update>

    <insert id="addEmployee" parameterType="employee">
		insert into employee values(null,#{ename},#{job},#{hiredate},#{sal},#{comm},#{department.deptno})
	</insert>

    <delete id="deleteEmployee" parameterType="Integer">
		delete from employee where empno=#{empno}
	</delete>
	<!-- 批量删除员工信息 -->
	<delete id="deleteEmployees" parameterType="list">
		delete  from employee where empno in
		<foreach item="empno" index="index" collection="list" open="(" separator="," close=")">
			#{empno}
		</foreach>
	</delete>
</mapper>

在全局配置文件配置数据源相关的

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/employeeManager?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC
    username: root
    password:
  #thymeleaf的配置
  thymeleaf:
    mode: HTML5
    encoding: utf-8
    servlet:
      content-type: text/html
    cache: false
    prefix: classpath:/templates/
  mvc:
    hiddenmethod:
      filter:
        enabled: true
server:
  port: 8081
mybatis:
  mapper-locations: classpath:mapper/*.xml
  config-location: classpath:mybatis-config.xml
  type-aliases-package: com.ruanyuan.springboot.pojo

在resources文件夹下创建mybatis-config.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">

<configuration>

    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor">


        </plugin>
    </plugins>
</configuration>

4.创建业务逻辑层接口及业务逻辑层接口的实现类。
DepartmentService:

public interface DepartmentService {

    public ArrayList<Department> getAllDepartment();
    public int addDepartment(Department department);
    public int updateDepartment(Department department);
    public int deleteDepartmentById(int deptno);
    public Department getDepartmentById(int deptno);
}

DepartmentServiceImpl

@Service
public class DepartmentServiceImpl implements DepartmentService {

    @Autowired
    private DepartmentDao departmentDao;
    @Override
    public ArrayList<Department> getAllDepartment() {
        return departmentDao.getAllDepartment();
    }

    @Override
    public int addDepartment(Department department) {
        return departmentDao.addDepartment(department);
    }

    @Override
    public int updateDepartment(Department department) {
        return departmentDao.updateDepartment(department);
    }

    @Override
    public int deleteDepartmentById(int deptno) {
        return departmentDao.deleteDepartmentById(deptno);
    }

    @Override
    public Department getDepartmentById(int deptno) {
        return departmentDao.getDepartmentById(deptno);
    }
}

EmployeeService

public interface EmployeeService {
    /**
     * 查询所有员工信息
     * @return
     */
    public PageInfo<Employee> getAllEmpoyee(int pageNo, int pageSize, @Param("deptno") String deptno, @Param("ename")String ename, @Param("hiredate1")String hiredate1, @Param("hiredate2")String hiredate2, @Param("sal1")String sal1, @Param("sal2")String sal2);

    /**
     * 查询所有部门信息
     * @return
     */
    public List<Employee> getAllEmpoyee();

    /**
     * 根据部门ID查询部门信息
     * @param empno
     * @return
     */
    public Employee getEmployeeById(int empno);

    /**
     * 添加部门信息
     * @param employee
     * @return
     */
    public int addEmployee(Employee employee);

    /**
     * 修改部门信息
     * @param employee
     * @return
     */
    public int updateEmployee(Employee employee);

    /**
     * 删除部门信息
     * @param empno
     * @return
     */
    public int deleteEmployee(int empno);
    /**
     * 批量删除员工信息
     * @param empno
     * @return
     */
    public int deleteEmployees(List<Integer> empno);
}

EmployeeServiceImpl

@Service
public class EmployeeServiceImpl implements EmployeeService {
    @Autowired
    private EmployeeDao employeeDao;

    @Override
    public PageInfo<Employee> getAllEmpoyee(int pageNo, int pageSize, @Param("deptno") String deptno, @Param("ename")String ename, @Param("hiredate1")String hiredate1, @Param("hiredate2")String hiredate2, @Param("sal1")String sal1, @Param("sal2")String sal2) {
        PageHelper.startPage(pageNo,pageSize);
        List<Employee> employees=employeeDao.getAllEmployee(deptno,ename,hiredate1,hiredate2,sal1,sal2);
        System.out.println("员工集合"+employees);
        PageInfo<Employee> pageInfo=new PageInfo<Employee>(employees);
        return pageInfo;

    }

    @Override
    public List<Employee> getAllEmpoyee() {
        return employeeDao.getAllEmployee("","","","","","");
    }

    @Override
    public Employee getEmployeeById(int empno) {
        return employeeDao.getEmployeeById(empno);
    }

    @Override
    public int addEmployee(Employee employee) {
        return employeeDao.addEmployee(employee);
    }

    @Override
    public int updateEmployee(Employee employee) {
        return employeeDao.updateEmployee(employee);
    }

    @Override
    public int deleteEmployee(int empno) {
        return employeeDao.deleteEmployee(empno);
    }

    @Override
    public int deleteEmployees(List<Integer> empno) {
        return employeeDao.deleteEmployees(empno);
    }
}

5.创建Controller
EmployeeController

@Controller
@RequestMapping("/employee")
public class EmployeeController {
    @Autowired
    private EmployeeService employeeService;
    @Autowired
    private DepartmentService departmentService;
    @RequestMapping("/getAllEmployee")
    public String getAllEmployee(Model model, @RequestParam(required=true,defaultValue="1")int pageNo, @RequestParam(required=false,defaultValue="4") int pageSize,@RequestParam(required=false,defaultValue="-1") String deptno,
    @RequestParam(required=false,defaultValue="") String ename,@RequestParam(required=false,defaultValue="") String hiredate1,@RequestParam(required=false,defaultValue="") String hiredate2,
                                 @RequestParam(required=false,defaultValue="") String sal1,@RequestParam(required=false,defaultValue="") String sal2){
        PageInfo<Employee> pageInfo=employeeService.getAllEmpoyee(pageNo,pageSize,deptno,ename,hiredate1,hiredate2,sal1,sal2);
        System.out.println(pageInfo);
        String url="/employee/getAllEmployee?deptno="+deptno+"&ename="+ename+"&hiredate1="+hiredate1+"&hiredate2="+hiredate2+"&sal1="+sal1+"&sal2="+sal2;
        List<Department> departments=departmentService.getAllDepartment();
        model.addAttribute("departments",departments);
        model.addAttribute("pageInfo",pageInfo);
        model.addAttribute("url",url);
        model.addAttribute("deptno2", Integer.valueOf(deptno));
        System.out.println("部门"+deptno);
        model.addAttribute("ename", ename);
        model.addAttribute("hiredate1", hiredate1);
        model.addAttribute("hiredate2", hiredate2);
        model.addAttribute("sal1", sal1);
        model.addAttribute("sal2", sal2);
        return "EmployeeList";
    }
    @RequestMapping("/toEdit")
    public String toEdit(Integer empno, Model model){
        if(empno!=null){
            model.addAttribute("employee", employeeService.getEmployeeById(empno));
        }
        List<Department> departments=departmentService.getAllDepartment();
        model.addAttribute("departments",departments);
        List<Employee> employees=employeeService.getAllEmpoyee();
        model.addAttribute("employees",employees);
        return "EmployeeEdit";
    }
    @RequestMapping("/Add")
    public String Add(Employee employee){
        employeeService.addEmployee(employee);
        return "redirect:/employee/getAllEmployee";
    }

    @RequestMapping("/Edit")
    public String Edit(Employee employee){
        employeeService.updateEmployee(employee);
        return "redirect:/employee/getAllEmployee";
    }
    @RequestMapping("/delete")
    @ResponseBody
    public String delete(int empno){
        int i =employeeService.deleteEmployee(empno);
        return String.valueOf(i);
    }
    @RequestMapping("/del")
    @ResponseBody
    public String del(String [] ids){

        for (String string : ids) {
            System.out.println(string);
        }
        List<Integer> idss = new ArrayList<Integer>();
        for (int i = 0; i < ids.length; i++) {
            if(i==0){
                idss.add(Integer.valueOf(ids[0]));
            }else{
                idss.add(Integer.valueOf(ids[i]));
            }
        }

        int count=employeeService.deleteEmployees(idss);
        return String.valueOf(count);
    }


}

6.在主程序类加@MapperScan。指定要变成实现类的接口所在的包，然后包下面的所有接口在编译之后都会生成相应的实现类

@MapperScan("com.ruanyuan.springboot.dao")
@SpringBootApplication
public class SpringbootThymeleafApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringbootThymeleafApplication.class, args);
    }

}

7.创建页面。
EmployeeList.html

<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="asserts/css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <script type="text/javascript" src="asserts/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>

    <!-- Custom styles for this template -->
    <link href="asserts/css/dashboard.css" rel="stylesheet" th:href="@{/css/dashboard.css}">
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
    </style>
</head>

<body>
<div th:replace="public/top :: topside"></div>

<div class="container-fluid">
    <div class="row">
        <div th:replace="public/left :: leftside(activeUri='/employee/getAllEmployee')"></div>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <h2>员工列表</h2>
            <form action="/employee/getAllEmployee" method="post">
                查询条件：
                部门:<select name="deptno" id="deptno">
                <option value="-1">请选择</option>

                <option th:each="department:${departments}"  th:value="${department.deptno}" th:selected="${department.deptno eq deptno2}"  th:text="${department.dname}"></option>
            </select>
                姓名:<input type="text" name="ename" value="" id="ename" th:value="${ename}">
                入职日期：<input type="date" name="hiredate1" value="${hiredate1 }" th:value="${hiredate1 }" id="hiredate1">-- <input type="date" name="hiredate2" th:value="${hiredate2}" value="${hiredate2 }" id="hiredate2">
                工资：<input type="number" name="sal1" id="sal1" th:value="${sal1}">--
                <input type="number" name="sal2" id="sal2" th:value="${sal2}">
                <input type="submit" value="查询" class="btn btn-sm btn-success">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a  href="" class="btn btn-sm btn-success" th:href="@{/employee/getAllEmployee}">查询所有</a>
            </form>
            <br>
            <a class="btn btn-sm btn-success" href="" th:href="@{/employee/toEdit}">员工添加</a>
            <button class="btn btn-sm btn-danger deleteBtn" th:onclick="del()">批量删除</button>
            <div class="table-responsive">
                <table class="table table-striped table-sm" id="tb_employees">
                    <thead>
                    <tr>
                        <th><input type="checkbox" name="empnos" id="empnos"></th>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>职位</th>
                        <th>入职日期</th>
                        <th>薪水</th>
                        <th>奖金</th>
                        <th>所在部门</th>
                        <th>编辑</th>
                    </tr>
                    </thead>
                    <tbody>

                    <tr th:each="employee:${pageInfo.list}">
                        <td><input type="checkbox" name="empno" th:value="${employee.empno}"></td>
                        <td th:text="${employee.empno}"></td>
                        <td th:text="${employee.ename}"></td>
                        <td th:text="${employee.job}"></td>
                        <td th:text="${employee.hiredate}"></td>
                        <td th:text="${employee.sal}"></td>
                        <td th:text="${employee.comm}"></td>
                        <td th:text="${employee.department.dname}"></td>
                        <td>
                            <a class="btn btn-sm btn-primary" th:href="@{/employee/toEdit(empno=${employee.empno})}">编辑</a>
                            <a class="btn btn-sm btn-danger deleteBtn"  th:onclick="'btn_delete('+${employee.empno}+')'" >删除</a></td>
                    </tr>

                    </tbody>
                </table>
                <div th:replace="public/page :: page"></div>
            </div>
        </main>
    </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js" th:src="@{/js/jquery-3.2.1.slim.min.js}"></script>
<script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{/js/popper.min.js}"></script>

<script type="text/javascript" src="asserts/js/feather.min.js" th:src="@{/js/alert.js}"></script>
<!-- Icons -->
<script type="text/javascript" src="asserts/js/feather.min.js" th:src="@{/js/feather.min.js}"></script>
<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js" th:src="@{/js/jquery-1.11.3.min.js}"></script>
<script>
    function btn_delete(id){

        var result=confirm("你确定删除吗");
        if(result==true){
            $.ajax({

                type:"post",
                url:"/employee/delete?empno="+id,

                success:function(data){
                    if(data==1){
                        alert("删除成功");
                        window.location.href="/employee/getAllEmployee";
                    }else{
                        alert("删除失败");
                    }
                }
            })
        }
    }
    function del() {
        var result= confirm("你确定删除吗？");
        if(result==true){
            var arr = [];
            $("input:checkbox[name='empno']:checked").each(function(i){
                arr.push($(this).val());
            });
            if(arr.length==0){
                alert("请先选中要删除的行");
            }
            $.ajax({
                url:"/employee/del?ids="+arr,
                type:"post",
                success:function(data){
                    if(data>0){
                        alert("删除成功");
                        window.location.href="/employee/getAllEmployee";
                    }else{
                        alert("删除失败");
                    }

                }
            });
        }
    }
    $(document).ready(function(){
        $("#empnos").click(function(){
            $('[name=empno]:checkbox').prop("checked",this.checked);
        });
    });

</script>

<!-- Graphs -->
<script type="text/javascript" src="asserts/js/Chart.min.js" th:src="@{/js/Chart.min.js}"></script>
<script>
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            datasets: [{
                data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
                lineTension: 0,
                backgroundColor: 'transparent',
                borderColor: '#007bff',
                borderWidth: 4,
                pointBackgroundColor: '#007bff'
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: false
                    }
                }]
            },
            legend: {
                display: false,
            }
        }
    });
</script>

</body>

</html>

EmployeeEdit.html

<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="asserts/css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}">

    <!-- Custom styles for this template -->
    <link href="asserts/css/dashboard.css" rel="stylesheet" th:href="@{/css/dashboard.css}">
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }
        .back{
            width: 58px;
            height: 38px;
            background-color: #f8f9fa;
            color: black;
            display: inline-block;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: 1px solid transparent;
            padding: .375rem .75rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: .25rem;
            transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        }
        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
    </style>
</head>

<body>
<div th:replace="public/top :: topside"></div>

<div class="container-fluid">
    <div class="row">
        <div th:replace="public/left :: leftside(activeUri='/employee/getAllEmployee')"></div>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <h2 th:text="${employee!=null?'员工修改':'员工添加'}"></h2>
            <form th:action="${employee!=null}?@{/employee/Edit}:@{/employee/Add}" th:method="post">

                <input type="hidden" name="empno"th:value="${employee.empno}" th:if="${employee!=null}">
                <div class="form-group">
                    <label for="exampleInputEmail1">姓名：</label>
                    <input type="text" class="form-control" id="exampleInputEmail1"  th:name="ename" th:value="${employee!=null}?${employee.ename}">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">职位：</label>
                    <input type="text" class="form-control" id="exampleInputPassword1" th:name="job" th:value="${employee!=null}?${employee.job}">
                </div>

                <div class="form-group">
                    <label for="exampleInputPassword1">入职日期：</label>
                    <input type="date" class="form-control"  th:name="hiredate" th:value="${employee!=null}?${employee.hiredate}">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">薪水：</label>
                    <input type="number" class="form-control"  th:name="sal" th:value="${employee!=null}?${employee.sal}">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">奖金：</label>
                    <input type="number" class="form-control"  th:name="comm" th:value="${employee!=null}?${employee.comm}">
                </div>
                <div class="form-group">
                    <label for="exampleFormControlSelect1">所属部门</label>
                    <select class="form-control" id="exampleFormControlSelect1" th:name="department.deptno">
                        <option th:each="department:${departments}" th:value="${department.deptno}" th:selected="${employee!=null}?${department.deptno eq employee.department.deptno}">[[${department.dname}]]</option>

                    </select>
                </div>
                <button type="submit" class="btn btn-default">提交</button>
                <a href="javascript:history.go(-1)" class="back">返回</a>
            </form>
        </main>
    </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js" th:src="@{/js/jquery-3.2.1.slim.min.js}"></script>
<script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{/js/popper.min.js}"></script>
<script type="text/javascript" src="asserts/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>

<!-- Icons -->
<script type="text/javascript" src="asserts/js/feather.min.js" th:src="@{/js/feather.min.js}"></script>
<script>
    feather.replace()
</script>

<!-- Graphs -->
<script type="text/javascript" src="asserts/js/Chart.min.js" th:src="@{/js/Chart.min.js}"></script>
<script>
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            datasets: [{
                data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
                lineTension: 0,
                backgroundColor: 'transparent',
                borderColor: '#007bff',
                borderWidth: 4,
                pointBackgroundColor: '#007bff'
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: false
                    }
                }]
            },
            legend: {
                display: false,
            }
        }
    });
</script>

</body>

</html>

page.html

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            position: relative;
        }
        a:visited{
            position: relative;
        }
    </style>
</head>
<body>
<div class="row" style="width: 1217px;" th:fragment="page">
    <div class="col-md-6" style="width: 200px">
        第[[${pageInfo.pageNum}]]页，共[[${pageInfo.pages}]]页，共[[${pageInfo.total}]]条记录
    </div>
    <div class="col-md-6 offset-md-4">
        <nav aria-label="Page navigation example">
            <ul class="pagination pagination-sm" >

                <li class="page-item" th:if="${pageInfo.hasPreviousPage}" >
                    <a class="page-link" href="${url}pageNo=${pageInfo.pageNum-1}" th:href="@{${url}(pageNo=${pageInfo.pageNum-1})}">
                        上一页
                    </a>
                </li>
                <li class="page-item" th:if="${pageInfo.isFirstPage==true}" >
                    <span class="page-link" href="#" style="color: gray">
                        上一页
                    </span>
                </li>

                <li class="page-item" th:each="page:${pageInfo.navigatepageNums}" th:class="${page==pageInfo.pageNum}?'page-item active':'page-item'"   >
                    <a class="page-link" th:href="@{${url}(pageNo=${page})}"  th:text="${page}"/>
                </li>


                <li class="page-item" th:if="${pageInfo.hasNextPage}">
                    <a class="page-link" href="${url}pageNo=${pageInfo.pageNum+1}" th:href="@{${url}(pageNo=${pageInfo.pageNum+1})}">
                        下一页
                    </a>
                </li>
                <li class="page-item" th:if="${pageInfo.isLastPage==true}">
                    <span class="page-link" href="#" style="color: gray">
                        下一页
                    </span>
                </li>

            </ul>
        </nav>
    </div>
</div>

</body>
</html>