目錄

?

基本理論

演示

源碼

---

?

基本理論

添加和編輯的理論已經在另外一篇博文中體現出來了！

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 {@Beanpublic WebMvcConfigurerAdapter webMvcConfigurerAdapter(){WebMvcConfigurerAdapter adapter = new WebMvcConfigurerAdapter() {@Overridepublic 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 {@AutowiredPeopleData 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;@Overridepublic 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>

?

總結

以上是生活随笔為你收集整理的Spring Boot三合一实验（添加人员，修改人员，删除人员）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。