目录
理论
这里要注意几点:
1. SpringMVC中配置HiddenHttpMethodFilter;(SpringBoot自动配置好的);
2. 页面创建一个post表单
3. 创建一个input项,name="_method";值就是指定的请求方式
这里可以使用三目运算,判断,关键代码如下:
type为hidden的状态;
因为在修改的时候,会把people传给页面,但发现people有值的时候,就说明是修改界面,
但people没有值的时候,说明是添加界面!
同理,其他的用户属性也有三元判断!
演示
程序运行截图如下:
添加添加人员后,添加好数据:
点击添加:
点击锅盖的修改(把名字修改为锅盖呵呵):
点击修改后:
代码
程序结构如下:
源码如下:
MyMvcConfig.java
package addandeditdemo.demo.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class MyMvcConfig {
@Bean
public WebMvcConfigurerAdapter webMvcConfigurerAdapter(){
WebMvcConfigurerAdapter adapter = new WebMvcConfigurerAdapter() {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/").setViewName("index");
registry.addViewController("index.html").setViewName("index");
}
};
return adapter;
}
}
PeopleController.java
package addandeditdemo.demo.controller;
import addandeditdemo.demo.data.PeopleData;
import addandeditdemo.demo.entities.People;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import java.util.Collection;
@Controller
public class PeopleController {
@Autowired
PeopleData peopleData;
@GetMapping({"/index", "/"})
public String list(Model model){
Collection<People> peoples = peopleData.getAll();
model.addAttribute("index", peoples);
return "index";
}
@GetMapping("/add")
public String toAddPage(){
return "add";
}
@PostMapping("/add")
public String addPeople(People people){
System.out.println(people);
peopleData.save(people);
return "redirect:/";
}
//修改页面
@GetMapping("/edit/{id}")
public String toEditPage(@PathVariable("id") Integer id, Model model){
People people = peopleData.get(id);
model.addAttribute("people", people);
return "/add";
}
//修改
@PutMapping("/add")
public String updatePeople(People people){
System.out.println(people);
peopleData.save(people);
return "redirect:/";
}
}
PeopleData.java
package addandeditdemo.demo.data;
import addandeditdemo.demo.entities.People;
import org.springframework.stereotype.Repository;
import java.util.Collection;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
@Repository
public class PeopleData {
private static Map<Integer, People> peoples = null;
static{
peoples = new HashMap<Integer, People>();
peoples.put(1001, new People(1001, "妹爷", "110@163.com", 1, new Date()));
peoples.put(1002, new People(1002, "球球", "120@163.com", 0, new Date()));
peoples.put(1003, new People(1003, "猪小明", "119@163.com", 1, new Date()));
peoples.put(1004, new People(1004, "米线", "911@163.com", 0, new Date()));
peoples.put(1005, new People(1005, "腿腿", "12306@163.com", 0, new Date()));
peoples.put(1006, new People(1006, "闰土", "10086@163.com", 1, new Date()));
}
private static Integer initId = 1007;
public void save(People people){
if(people.getId() == null){
people.setId(initId++);
}
peoples.put(people.getId(), people);
}
public Collection<People> getAll(){
return peoples.values();
}
public People get(Integer id){
return peoples.get(id);
}
}
People.java
package addandeditdemo.demo.entities;
import java.util.Date;
public class People {
private Integer id;
private String name;
private String email;
private Integer gender;
private Date birth;
public People(Integer id, String name, String email, Integer gender, Date birth) {
this.id = id;
this.name = name;
this.email = email;
this.gender = gender;
this.birth = birth;
}
public People(){
}
@Override
public String toString() {
return "People{" +
"id=" + id +
", name='" + name + '\'' +
", email='" + email + '\'' +
", gender=" + gender +
", birth=" + birth +
'}';
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
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 Date getBirth() {
return birth;
}
public void setBirth(Date birth) {
this.birth = birth;
}
}
add.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="#" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
</head>
<body>
<form th:action="@{/add}" method="post">
<input type="hidden" name="_method" value="put" th:if="${people!=null}"/>
<input type="hidden" name="id" th:if="${people!=null}" th:value="${people.id}">
<div class="form-group">
<label>姓名</label>
<input name="name" type="text" class="form-control" placeholder="IT1995"
th:value="${people!=null}?${people.name}">
</div>
<div class="form-group">
<label>邮箱</label>
<input name="email" type="email" class="form-control" placeholder="570176391@qq.com"
th:value="${people!=null}?${people.email}">
</div>
<div class="form-group">
<label>性别</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="1"
th:checked="${people!=null}?${people.gender==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"
th:checked="${people!=null}?${people.gender==0}">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>生日</label>
<input name="birth" type="text" class="form-control" placeholder="2019/3/12"
th:value="${people!=null}?${#dates.format(people.birth, 'yyyy-MM-dd HH:mm')}">
</div>
<button type="submit" class="btn btn-primary" th:text="${people!=null}?'修改':'添加'">添加</button>
</form>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>呵呵</title>
<link href="#" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
</head>
<body>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>性别</th>
<th>生日</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="people:${index}">
<td th:text="${people.id}"></td>
<td>[[${people.name}]]</td>
<td th:text="${people.email}"></td>
<td th:text="${people.gender} == 1 ? '男' : '女'"></td>
<td th:text="${#dates.format(people.birth, 'yyy-MMM-ddd HH:mm')}"></td>
<td>
<a class="btn btn-sm btn-primary" href="#" th:href="@{/edit/} + ${people.id}">编辑</a>
</td>
</tr>
</tbody>
</table>
<a class="btn btn-sm btn-success" href="#" th:href="@{/add}">添加人员</a>
</div>
</body>
</html>
application.properties
spring.thymeleaf.cache=false
spring.mvc.date-format=yyyy-MM-dd
pron.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 http://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>1.5.19.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.loginWebDemo</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>loginWeb</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
<thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>
</properties>
<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>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!--引入jquery-webjar-->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.3.1</version>
</dependency>
<!--引入bootstrap-->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.0.0</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>