springBoot完成简易的员工CRUD操作，包含国际化
1.导入maven依赖
<?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.5.0</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.heyuanhang</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>
<!--thymeleaf模板 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- web启动器-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- 引入bootstrap -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>5.0.1</version>
</dependency>
<!-- 引入jquery-->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.3.0</version>
</dependency>
<!-- 单元测试-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- 热部署-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-configuration-processor</artifactId>
<optional>true</optional>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
2.引入静态资源
2.1静态资源的映射规则：所有的/webjars/**都会去 classpath:/META-INF/resources/webjars/下找资源
ebjars：是以jar包的方式引入静态资源；
2.2当访问当前项目下的任何资源，都去静态资源文件夹找映射
"classpath:/META-INF/resources/",
"classpath:/resources/",
"classpath:/static/",
"classpath:/public/"
"/"：当前项目的根路径
因此，将该项目的静态资源放在static文件夹下；
3.将静态html页面放在templates文件夹下
4.引入实体类，因为操作相对简单就未连接数据库，采用静态块将相关数据装入集合中
4.1部门类:
package com.heyuanhang.springbootthymeleaf.entities;
public class Department {
private Integer id;
private String departmentName;
public Department() {
}
public Department(int i, String string) {
this.id = i;
this.departmentName = string;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getDepartmentName() {
return departmentName;
}
public void setDepartmentName(String departmentName) {
this.departmentName = departmentName;
}
@Override
public String toString() {
return "Department [id=" + id + ", departmentName=" + departmentName + "]";
}
}
4.2 员工类：
package com.heyuanhang.springbootthymeleaf.entities;
import java.util.Date;
public class Employee {
private Integer id;
private String lastName;
private String email;
//1 男, 0 女
private Integer gender;
private Department department;
private Date birth;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getLastName() {
return lastName;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public Integer getGender() {
return gender;
}
public void setGender(Integer gender) {
this.gender = gender;
}
public Department getDepartment() {
return department;
}
public void setDepartment(Department department) {
this.department = department;
}
public Date getBirth() {
return birth;
}
public void setBirth(Date birth) {
this.birth = birth;
}
public Employee(Integer id, String lastName, String email, Integer gender,
Department department) {
super();
this.id = id;
this.lastName = lastName;
this.email = email;
this.gender = gender;
this.department = department;
this.birth = new Date();
}
public Employee() {
}
@Override
public String toString() {
return "Employee{" +
"id=" + id +
", lastName='" + lastName + '\'' +
", email='" + email + '\'' +
", gender=" + gender +
", department=" + department +
", birth=" + birth +
'}';
}
}
4.3.模拟数据库查询出数据的dao
DepartmentDao:
package com.heyuanhang.springbootthymeleaf.dao;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
import com.heyuanhang.springbootthymeleaf.entities.Department;
import org.springframework.stereotype.Repository;
@Repository
public class DepartmentDao {
private static Map<Integer, Department> departments = null;
static{
departments = new HashMap<Integer, Department>();
departments.put(101, new Department(101, "研发部"));
departments.put(102, new Department(102, "市场部"));
departments.put(103, new Department(103, "开发部"));
departments.put(104, new Department(104, "测试部"));
departments.put(105, new Department(105, "运维部"));
}
/**
* 获取所有的部门
* @return
*/
public Collection<Department> getDepartments(){
return departments.values();
}
/**
* 根据key获得部门信息
* @param id key
* @return
*/
public Department getDepartment(Integer id){
//根据key获得部门信息
return departments.get(id);
}
}
EmployeeDao:
package com.heyuanhang.springbootthymeleaf.dao;
import com.heyuanhang.springbootthymeleaf.entities.Department;
import com.heyuanhang.springbootthymeleaf.entities.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
@Repository
public class EmployeeDao {
private static Map<Integer, Employee> employees = null;
@Autowired
private DepartmentDao departmentDao;
static{
employees = new HashMap<Integer, Employee>();
employees.put(1001, new Employee(1001, "张三", "aa@163.com", 1, new Department(101, "研发部")));
employees.put(1002, new Employee(1002, "李四", "bb@163.com", 1, new Department(102, "市场部")));
employees.put(1003, new Employee(1003, "王五", "cc@163.com", 0, new Department(103, "开发部")));
employees.put(1004, new Employee(1004, "小王", "dd@163.com", 0, new Department(104, "测试部")));
employees.put(1005, new Employee(1005, "heyuanhang", "ee@163.com", 1, new Department(105, "运维部")));
}
private static Integer initId = 1006;
public void save(Employee employee){
if(employee.getId() == null){
employee.setId(initId++);
}
employee.setDepartment(departmentDao.getDepartment(employee.getDepartment().getId()));
employees.put(employee.getId(), employee);
}
public Collection<Employee> getAll(){
return employees.values();
}
/**
* 根据key获得员工
* @param id
* @return
*/
public Employee get(Integer id){
return employees.get(id);
}
public void delete(Integer id){
employees.remove(id);
}
}
5.登录页面国际化
5.1编写多语言国际化文件及配置文件
在类路径下的resources下创建一个文件夹i18n的文件夹，在该文件夹下创建多语言国际化文件login.properties、login_en_US.properties、login_zh_CN.properties
其中login.properties配置如下:
login.title=请登录~
login.usname=用户名~
login.btn=登录~
login.pwd=密码~
login.rm=请记住我
login_zh_CN.properties配置如下:
login.title=请登录
login.usname=用户名
login.btn=登录
login.pwd=密码
login.rm=请记住我
login_en_US.properties配置如下:
login.title=Please sign in
login.usname=Username
login.btn=Sign in
login.pwd=Password
login.rm=Remember-me
5.2 在配置文件application.properties中进行相关配置
关闭缓存，便于修改静态页面后，能及时响应
spring.thymeleaf.cache=false
设置国际化基础名
spring.messages.basename=i18n.login
5.3配置区域信息解析器
其实在完成了上一步中的多语言国际化文件的编写和配置后，就可以正式的在前端页面结合Thymeleaf模板相关属性进行国际化语言的设置和切换了，不过这种实现方式默认是使用请求头中的语言信息自动进行语言的切换，因此需要点击相应的按钮进行语言切换，就得进行自定义区域解析器了。
自定义的区域解析器:
package com.heyuanhang.springbootthymeleaf.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.util.StringUtils;
import org.springframework.web.servlet.LocaleResolver;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;
/**
* @Author 何远航
* @Date: 2021/5/25 11:21
* @Version 1.8
*/
@Configuration
public class GuoJiHuaConfig implements LocaleResolver {
Locale locale = null;
@Override
public Locale resolveLocale(HttpServletRequest request) {
//获取到参数信息
String l = request.getParameter("l");
if (!StringUtils.isEmpty(l)) {
String[] split = l.split("_");
locale = new Locale(split[0], split[1]);
} else {
locale = Locale.getDefault();
}
return locale;
}
@Override
public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {
}
/**
* 方法名必须是lodcaleResolver()，否则国际化不会生效
* @return
*/
@Bean
public LocaleResolver localeResolver(){
return new GuoJiHuaConfig();
}
}
登录页面进行国际化的使用
<!DOCTYPE html>
<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>登陆</title>
<!-- Bootstrap core CSS -->
<link href="/asserts/css/bootstrap.min.css" th:href="@{../asserts/css/bootstrap.min.css}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/asserts/css/signin.css" th:href="@{../asserts/css/signin.css}" rel="stylesheet">
</head>
<body class="text-center">
<form class="form-signin" action="/user/login" th:action="@{../user/login}" method="post">
<img class="mb-4" src="asserts/img/bootstrap-solid.svg" th:src="@{../asserts/img/bootstrap-solid.svg}" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.title}">Please sign in</h1>
<!--当提示信息不为空时，才显示替换-->
<span th:text="${msg}" style="color: red" th:if="${not #strings.isEmpty(msg)}"></span>
<label class="sr-only" th:text="#{login.usname}">Username</label>
<input type="text" name="username" class="form-control" placeholder="Username" th:placeholder="#{login.usname}" required="" autofocus="">
<label class="sr-only" th:text="#{login.pwd}">Password</label>
<input type="password" name="password" class="form-control" placeholder="Password" th:placeholder="#{login.pwd}" required="">
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> [[#{login.rm}]]
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.btn}">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
<a class="btn btn-sm" th:href="@{/(l='zh_CN')}">中文</a>
<a class="btn btn-sm" th:href="@{/(l='en_US')}">English</a>
</form>
</body>
</html>
效果展示:
6.登录校验
因未连接数据库，因此只是简单进行校验
UserController:
package com.heyuanhang.springbootthymeleaf.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpSession;
/**
* @Author 何远航
* @Date: 2021/5/29 11:04
* @Version 1.8
*/
@Controller
@RequestMapping("/user")
public class UserController {
@PostMapping("/login")
public String login(String username, String password, Model model, HttpSession session1){
/**
* 当用户名不为空和密码未123时登录成功
*/
if (username!=null&&password.equals("123")){
//装进session
session1.setAttribute("user",username);
return "redirect:/main.html";
}else {
model.addAttribute("msg","用户名或密码错误！");
return "index";
}
}
}
在这之前，在自定义配置类MyConfig中添加视图映射:
package com.heyuanhang.springbootthymeleaf.config;
import com.heyuanhang.springbootthymeleaf.beans.Student;
import com.heyuanhang.springbootthymeleaf.interceptors.LoginInterceptor;
import org.springframework.boot.autoconfigure.web.servlet.WebMvcAutoConfiguration;
import org.springframework.boot.context.properties.EnableConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.LocaleResolver;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
/**
* @Author 何远航
* @Date: 2021/5/22 16:43
* @Version 1.8
*/
@Configuration
@EnableConfigurationProperties({Student.class})
public class MyConfig implements WebMvcConfigurer {
// @Override
// public void addViewControllers(ViewControllerRegistry registry) {
// registry.addViewController("/index").setViewName("index");
// registry.addViewController("/login").setViewName("index");
// registry.addViewController("/").setViewName("index");
// registry.addViewController("/main.html").setViewName("dashboard");
// }
//
@Bean
public WebMvcConfigurer webMvcConfigurer(){
WebMvcConfigurer adapter=new WebMvcConfigurer() {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/index.html").setViewName("index");
registry.addViewController("/login.html").setViewName("index");
registry.addViewController("/").setViewName("index");
registry.addViewController("/main.html").setViewName("dashboard");
}
//添加拦截器
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new LoginInterceptor()).addPathPatterns("/**")
.excludePathPatterns("/", "/index.html", "/login", "/user/login",
"/**/*.css", "/**/*.js", "/**/*.png", "/**/*.jpg",
"/**/*.jpeg", "/**/*.gif", "/**/fonts/*", "/**/*.svg");
}
};
return adapter;
}
}
输入正确用户名和密码进入首页
主页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="@{../asserts/css/bootstrap.min.css}">
<!-- Custom styles for this template -->
<link href="asserts/css/dashboard.css" rel="stylesheet" th:href="@{../asserts/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="~{tempbar/topbar::topbar}"></div>
<div class="container-fluid">
<div class="row">
<!--引入侧边栏-->
<div th:replace="~{tempbar/sidebar::sidebar(urlActive='dashboard.html')}"></div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="chartjs-size-monitor"
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
<div class="chartjs-size-monitor-expand"
style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
<div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
</div>
<div class="chartjs-size-monitor-shrink"
style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
<div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
</div>
</div>
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h2">主页面</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button class="btn btn-sm btn-outline-secondary">Share</button>
<button class="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button class="btn btn-sm btn-outline-secondary dropdown-toggle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-calendar">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
This week
</button>
</div>
</div>
<canvas class="my-4 chartjs-render-monitor" id="myChart" width="1076" height="454"
style="display: block; width: 1076px; height: 454px;"></canvas>
</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="@{../asserts/js/jquery-3.2.1.slim.min.js}"></script>
<script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{../asserts/js/popper.min.js}"></script>
<script type="text/javascript" src="asserts/js/bootstrap.min.js" th:src="@{../asserts/js/bootstrap.min.js}"></script>
<!-- Icons -->
<script type="text/javascript" src="asserts/js/feather.min.js" th:src="@{../asserts/js/feather.min.js}"></script>
<script>
feather.replace()
</script>
<!-- Graphs -->
<script type="text/javascript" src="asserts/js/Chart.min.js" th:src="@{../asserts/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>
7.将主页面和员工管理页面的公共元素抽取出来
7.1相关html
sidebar.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>侧边导航栏</title>
</head>
<body>
<nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="/main.html" th:attr="urlActive='dashboard.html'" th:class="${urlActive=='dashboard.html' ? 'nav-link active':'nav-link'}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-home">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
主页面 <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-file">
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
<polyline points="13 2 13 9 20 9"></polyline>
</svg>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-shopping-cart">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/emps" th:href="@{/emps}" th:class="${urlActive=='list.html' ? 'nav-link active':'nav-link'}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-users">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
员工管理
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-bar-chart-2">
<line x1="18" y1="20" x2="18" y2="10"></line>
<line x1="12" y1="20" x2="12" y2="4"></line>
<line x1="6" y1="20" x2="6" y2="14"></line>
</svg>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-layers">
<polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
<polyline points="2 17 12 22 22 17"></polyline>
<polyline points="2 12 12 17 22 12"></polyline>
</svg>
Integrations
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved reports</span>
<a class="d-flex align-items-center text-muted"
href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-plus-circle">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="16"></line>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-file-text">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
<polyline points="10 9 9 9 8 9"></polyline>
</svg>
Current month
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-file-text">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
<polyline points="10 9 9 9 8 9"></polyline>
</svg>
Last quarter
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-file-text">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
<polyline points="10 9 9 9 8 9"></polyline>
</svg>
Social engagement
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-file-text">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
<polyline points="10 9 9 9 8 9"></polyline>
</svg>
Year-end sale
</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
topbar.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.user}]]</a>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">退出</a>
</li>
</ul>
</nav>
</body>
</html>
在相应的页面引入即可。
7.2 thymeleaf公共页面元素抽取的语法
1、抽取公共片段
<div th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</div>
2、引入公共片段
<div th:insert="~{footer :: copy}"></div>
~{templatename::selector}：模板名::选择器
~{templatename::fragmentname}:模板名::片段名
3、默认效果：
insert的公共片段在div标签中
如果使用th:insert等属性进行引入，可以不用写~{}：
行内写法可以加上：[[~{}]];[(~{})]；
三种引入公共片段的th属性：
th:insert：将公共片段整个插入到声明引入的元素中
th:replace：将声明引入的元素替换为公共片段
th:include：将被引入的片段的内容包含进这个标签中
<footer th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</footer>
引入方式
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>
效果
<div>
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
</div>
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
<div>
© 2011 The Good Thymes Virtual Grocery
</div>
引入片段的时候传入参数：
<div th:replace="~{tempbar/sidebar::sidebar(urlActive='dashboard.html')}"></div>
8.使用拦截器进行登录检查
没有登录的用户不能直接访问除登录页面以外的其他页面。
自定义拦截器LoginInterceptor.java'：
package com.heyuanhang.springbootthymeleaf.interceptors;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
/**
* @Author 何远航
* @Date: 2021/5/29 11:48
* @Version 1.8
*/
public class LoginInterceptor implements HandlerInterceptor {
/**
* 请求处理之前执行
*
* @param request
* @param response
* @param handler
* @return
* @throws Exception
*/
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
HttpSession session = request.getSession();
Object user = session.getAttribute("user");
if (user == null) {
//未登陆，不符合权限
request.setAttribute("msg","您没有权限，请先登陆!");
request.getRequestDispatcher("/index.html").forward(request, response);
return false;//不放行
} else {
return true;
}
}
}
在自定义配置类中添加拦截器：
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new LoginInterceptor()).addPathPatterns("/**")
.excludePathPatterns("/", "/index.html", "/login", "/user/login",
"/**/*.css", "/**/*.js", "/**/*.png", "/**/*.jpg",
"/**/*.jpeg", "/**/*.gif", "/**/fonts/*", "/**/*.svg");
}
效果展示：
9.CRUD员工列表
9.1：要求
1）RestfulCRUD：CRUD满足Rest风格；
2）URI： /资源名称/资源标识 HTTP请求方式区分对资源CRUD操作
9.2、实验的请求架构
9.3、CRUD- -员工列表
当点击侧边栏的员工管理，发出emps请求
<li class="nav-item">
<a class="nav-link" href="/emps" th:href="@{/emps}" th:class="${urlActive=='list.html' ? 'nav-link active':'nav-link'}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-users">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
员工管理
</a>
</li>
控制器EmployeeController.java:
接收请求，查询所有的员工，装进model中
@GetMapping("/emps")
public String empsList(Model model) {
//获取所有员工信息
Collection<Employee> emps = employeeDao.getAll();
model.addAttribute("emps", emps);
return "list";
}
在list.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>员工信息</title>
<!-- Bootstrap core CSS -->
<link href="/asserts/css/bootstrap.min.css" th:href="@{../asserts/css/bootstrap.min.css}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/asserts/css/dashboard.css" rel="stylesheet" th:href="@{../asserts/css/dashboard.css}">
<style type="text/css">
/* Chart.js */
.h2, h2 {
font-size: 2rem;
}
@-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="~{tempbar/topbar::topbar}"></div>
<div class="container-fluid">
<div class="row">
<!--引入侧边栏-->
<div th:replace="~{tempbar/sidebar::sidebar(urlActive='list.html')}"></div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<span><h2>员工信息</h2><h2><a class="btn btn-success" href="emp" th:href="@{/emp}">添加员工</a></h2></span>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
<th>性别</th>
<th>部门</th>
<th>生日</th>
</tr>
</thead>
<tbody>
<tr th:each="emp:${emps}" th:id="'del_tr'+${emp.id}">
<td>[[${emp.id}]]</td>
<td>[[${emp.lastName}]]</td>
<td>[[${emp.email}]]</td>
<td>[[${emp.gender}]]</td>
<td>[[${emp.department.departmentName}]]</td>
<td th:text="${#dates.format(emp.birth,'yyyy-MM-dd')}"></td>
<td class="btn btn-danger" id="delete"><a th:onclick="'javascript:Delete('+${emp.id}+')'">删除</a>
</td>
<td class="btn btn-dark"><a th:href="@{/emp/}+${emp.id}">修改</a></td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" th:src="@{/webjars/jquery/3.3.0/jquery.js}"></script>
<script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{../asserts/js/popper.min.js}"></script>
<script type="text/javascript" src="asserts/js/bootstrap.min.js" th:src="@{../asserts/js/bootstrap.min.js}"></script>
<!-- Icons -->
<script type="text/javascript" src="asserts/js/feather.min.js" th:src="@{../asserts/js/feather.min.js}"></script>
<script>
feather.replace()
</script>
<!-- Graphs -->
<script type="text/javascript" src="asserts/js/Chart.min.js" th:src="@{../asserts/js/Chart.min.js}"></script>
<script type="text/javascript">
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,
}
}
});
//点击删除的触发函数
function Delete(id) {
//发送ajax请求
$.ajax({
url: '/emp/' + id,
type: "delete",
dataType: "json",
contentType: 'application/json;charset=UTF-8',
success: function (resp) {
$("#del_tr"+id).fadeOut(2000);
}
});
}
</script>
</body>
</html>
效果展示：
10.CRUD- -员工添加
添加页面：
<!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>员工信息</title>
<!-- Bootstrap core CSS -->
<link href="/asserts/css/bootstrap.min.css" th:href="@{../asserts/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{../asserts/css/bootstrap-datetimepicker.css}">
<!-- Custom styles for this template -->
<link href="/asserts/css/dashboard.css" rel="stylesheet" th:href="@{../asserts/css/dashboard.css}">
<style type="text/css">
/* Chart.js */
.h2, h2 {
font-size: 2rem;
}
@-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="~{tempbar/topbar::topbar}"></div>
<div class="container-fluid">
<div class="row">
<!--引入侧边栏-->
<div th:replace="~{tempbar/sidebar::sidebar(urlActive='list.html')}"></div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<form action="/emp" th:action="@{/emp}" method="post">
<div class="form-group">
<label>LastName</label>
<input type="text" class="form-control" placeholder="zhangsan" name="lastName" th:value="何远航">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="heyuanhang@163.com" name="email">
</div>
<div class="form-group">
<label>Gender</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="1">
<label class="form-check-label">男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="0">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>department</label>
<select class="form-control" name="department.id">
<option th:each="department:${departments}" th:value="${department.id}"
th:text="${department.departmentName}">1
</option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input type="text" id="dataTime" class="form-control" placeholder="heyuanhang" th:value="1999-09-26"
th:placeholder="${#dates.format(#dates.createToday(),'yyyy-MM-dd')}" name="birth">
</div>
<button type="submit" class="btn btn-primary">添加</button>
</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="@{../asserts/js/jquery-3.2.1.slim.min.js}"></script>
<script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{../asserts/js/popper.min.js}"></script>
<script type="text/javascript" src="asserts/js/bootstrap.min.js" th:src="@{../asserts/js/bootstrap.min.js}"></script>
<!-- Icons -->
<script type="text/javascript" src="asserts/js/feather.min.js" th:src="@{../asserts/js/feather.min.js}"></script>
<script type="text/javascript" th:src="@{../asserts/js/bootstrap-datetimepicker.js}"></script>
<script type="text/javascript" th:src="@{../asserts/js/bootstrap-datetimepicker.zh-CN.js}"></script>
<script>
feather.replace()
</script>
<!-- Graphs -->
<script type="text/javascript" src="asserts/js/Chart.min.js" th:src="@{../asserts/js/Chart.min.js}"></script>
<script>
$(function () {
// 日期框
var dataTime = $("#dataTime").datetimepicker({
language: 'zh-CN',
autoclose: true,
initData: new Date(),
minView: "month"
});
var date = new Date();
//设置最后的时间
dataTime.datetimepicker("setEndDate", date)
})
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>
在这儿需要注意的是，添加员工时的日期转换问题：默认是yyyy/MM/dd的格式
可以自定义:在application.properties中进行自定义
spring.mvc.format.date=yyyy-MM-dd
当点击添加员工时，发出/emp请求
<h2><a class="btn btn-success" href="emp" th:href="@{/emp}">添加员工</a></h2>
控制器：
/**
* 跳转到添加员工页面
*/
@GetMapping("/emp")
public String addEmp(Model model) {
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("departments", departments);
return "emp/addEmp";
}
在添加页面点击添加按钮时，发出Post方式的/emp请求
<form action="/emp" th:action="@{/emp}" method="post">
控制器:
/**
* 添加员工
*
* @param employee
* @return
*/
@PostMapping("/emp")
public String addemp(Employee employee) {
//添加员工
employeeDao.save(employee);
return "redirect:/emps";
}
效果展示:
11.CRUD- -员工修改
思路：点击修改,发出请求携带员工ID,在后台通过id查询出员工的信息，将该信息存储在Model中
在修改页面通过thymeleaf模板进行数据的回显。
修改页面：
<!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>修改员工</title>
<!-- Bootstrap core CSS -->
<link href="/asserts/css/bootstrap.min.css" th:href="@{../asserts/css/bootstrap.min.css}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/asserts/css/dashboard.css" rel="stylesheet" th:href="@{../asserts/css/dashboard.css}">
<style type="text/css">
/* Chart.js */
.h2, h2 {
font-size: 2rem;
}
@-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="~{tempbar/topbar::topbar}"></div>
<div class="container-fluid">
<div class="row">
<!--引入侧边栏-->
<div th:replace="~{tempbar/sidebar::sidebar(urlActive='list.html')}"></div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<form action="/emp" th:action="@{/emp}" method="post">
<!--将post请求转换成put请求-->
<input type="hidden" name="_method" value="put">
<!--员工的id-->
<input type="hidden" name="id" th:value="${emp.id}">
<div class="form-group">
<label>LastName</label>
<input type="text" class="form-control" placeholder="zhangsan" name="lastName" th:placeholder="${emp.lastName}" th:value="${emp.lastName}">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="zhangsan@atguigu.com" name="email" th:placeholder="${emp.email}" th:value="${emp.email}">
</div>
<div class="form-group">
<label>Gender</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="1" th:checked="${emp.gender==1}?'true':'false'">
<label class="form-check-label">男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="0" th:checked="${emp.gender==0}?'true':'false'">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>department</label>
<select class="form-control" name="department.id">
<option th:selected="${emp.department.id==101}?'true':'false'" th:value="${emp.department.id}">研发部</option>
<option th:selected="${emp.department.id==102}?'true':'false'" th:value="${emp.department.id}">市场部</option>
<option th:selected="${emp.department.id==103}?'true':'false'" th:value="${emp.department.id}">开发部</option>
<option th:selected="${emp.department.id==104}?'true':'false'" th:value="${emp.department.id}">测试部</option>
<option th:selected="${emp.department.id==105}?'true':'false'" th:value="${emp.department.id}">运维部</option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input type="text" class="form-control" placeholder="zhangsan" th:placeholder="${#dates.format(emp.birth,'yyyy-MM-dd')}" name="birth" th:value="${#dates.format(emp.birth,'yyyy-MM-dd')}">
</div>
<button type="submit" class="btn btn-primary">修改</button>
</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="@{../asserts/js/jquery-3.2.1.slim.min.js}"></script>
<script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{../asserts/js/popper.min.js}"></script>
<script type="text/javascript" src="asserts/js/bootstrap.min.js" th:src="@{../asserts/js/bootstrap.min.js}"></script>
<!-- Icons -->
<script type="text/javascript" src="asserts/js/feather.min.js" th:src="@{../asserts/js/feather.min.js}"></script>
<script>
feather.replace()
</script>
<!-- Graphs -->
<script type="text/javascript" src="asserts/js/Chart.min.js" th:src="@{../asserts/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>
效果展示：
比如修改学不会Java的小何这个员工，点击修改后，发出<td class="btn btn-dark"><a th:href="@{/emp/}+${emp.id}">修改</a></td> **/emp/1006**请求
在控制层：
/**
* 跳转到修改员工页面
*/
@GetMapping("/emp/{id}")
public String update(@PathVariable("id") Integer id, Model model) {
//通过id获得员工信息
Employee employee = employeeDao.get(id);
model.addAttribute("emp", employee);
return "emp/update";
}
/**
* 修改员工
*/
@PutMapping("/emp")
public String updateEmp(Employee employee){
//添加员工
employeeDao.save(employee);
return "redirect:/emps";
}
页面效果：
点击修改，进行数据回显
12、CRUD- -员工删除
想法：当点击删除时，触发一个函数Delete（emp.id）（函数名随意）,然后发出ajax请求，达到异步删除的目的，并且，要求删除后不能刷新页面就能进行删除，进行动态的删除。删除时间为2秒
删除请求：
<td class="btn btn-danger" id="delete"><a th:onclick="'javascript:Delete('+${emp.id}+')'">删除</a> </td>
定义函数：th:onclick="'javascript:Delete('+${emp.id}+')'"
js函数：
//点击删除的触发函数
function Delete(id) {
//发送ajax请求
$.ajax({
//请求路径
url: '/emp/' + id,
//请求方式
type: "delete",
//期待返回的数据类型
dataType: "json",
contentType: 'application/json;charset=UTF-8',
success: function (resp) {
//动态的移除数据，时间为2秒
$("#del_tr"+id).fadeOut(2000);
}
});
控制器：
/**
* 删除员工
* @param id
* @return
*/
@ResponseBody
@DeleteMapping("/emp/{id}")
public Integer deleteEmp(@PathVariable("id") Integer id){
//根据id进行删除
employeeDao.delete(id);
return 1;
}
其他功能，正在完善中。