目录
基本理论
添加和编辑的理论已经在另外一篇博文中体现出来了!
Spring Boot修改添加界面二合一
https://blog.csdn.net/qq78442761/article/details/88545968
这里只说明下删除的理论!
有两种方式,一种是一个每条数据,都有一个删除表单,如下代码
<td>
<a class="btn btn-sm btn-primary" th:href="@{/emp/} + ${emp.id}">编辑</a>
<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
<!-- 这个方式标签太复制,导致界面很多form表单 -->
<!-- <form th:action="@{/emp/} + ${emp.id}" method="post">
<input type="hidden" name="_method" value="delete">
<button type="submit" class="btn btn-sm btn-danger">删除</button>
</form> -->
</td>
这种方式不推荐。
下面是推荐的方式:
<form id="deleteEmpForm" method="post">
<input type="hidden" name="_method" value="delete"/>
</form>
JS代码如下:
<script>
$(".deleteBtn").click(function(){
//删除当前员工的
$("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
return false;
});
</script>
演示
程序刚运行的时候:
点击添加人员后:
点击添加后:
编辑功能和这个一样;
点击删除后!
源码
程序结构如下:
源码如下:
MyMvcConfig.java
package addandeditanddelete.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 addandeditanddelete.demo.controller;
import addandeditanddelete.demo.data.PeopleData;
import addandeditanddelete.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.*;
import java.util.Collection;
@Controller
public class PeopleController {
@Autowired
PeopleData peopleData;
@GetMapping({"index.html", "/"})
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){
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){
peopleData.save(people);
return "redirect:/";
}
//删除
@DeleteMapping("/deletePeople/{id}")
public String deletePeople(@PathVariable("id") Integer id){
peopleData.delete(id);
return "redirect:/";
}
}
PeopleData.java
package addandeditanddelete.demo.data;
import addandeditanddelete.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.remove(id);
}
public void delete(Integer id){
peoples.remove(id);
}
}
People.java
package addandeditanddelete.demo.entities;
import java.util.Date;
public class People {
private Integer id;
private String name;
private String email;
private Integer gender;
private Date birth;
@Override
public String toString() {
return "People{" +
"id=" + id +
", name='" + name + '\'' +
", email='" + email + '\'' +
", gender=" + gender +
", birth=" + birth +
'}';
}
public People(){
}
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 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-striped">
<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 th:text="${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')}"></td>
<td>
<a class="btn btn-sm btn-primary" href="#" th:href="@{/edit/}+${people.id}">编辑</a>
<button class="btn btn-sm btn-danger deleteBtn" th:attr="del_uri=@{/deletePeople/}+${people.id}">删除</button>
</td>
</tr>
</tbody>
</table>
<a class="btn btn-sm btn-success" th:href="@{/add}">添加人员</a>
<form id="deletePeopleForm" method="post">
<input type="hidden" name="_method" value="delete" />
</form>
</div>
<script type="text/javascript" src="#" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
<script>
$(".deleteBtn").click(function(){
//删除当前员工的
$("#deletePeopleForm").attr("action",$(this).attr("del_uri")).submit();
return false;
});
</script>
</body>
</html>
application.properties
spring.thymeleaf.cache=false
spring.mvc.date-format=yyyy-MM-dd
porn.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>