理论

这里要注意几点：

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 {@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 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 {@AutowiredPeopleData 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(){}@Overridepublic 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>

Spring Boot修改添加界面二合一相关推荐

Vue + Spring Boot 项目实战（二十一）：缓存的应用
重要链接: 「系列文章目录」「项目源码(GitHub)」本篇目录前言一.缓存:工程思想的产物二.Web 中的缓存 1.缓存的工作模式 2.缓存的常见问题三.缓存应用实战 1.Redis 与 ...
Spring Boot 框架学习笔记(二）（配置文件与数据注入 yaml基本语法 JSR303数据验证多环境切换）
Spring Boot 框架学习笔记(二) 六.appliaction.properties配置与数据注入 6.1 `@Value`注解测试注入数据读取输入流 6.2 读取配置文件数据注入单文件 ...
Spring Boot Initilizr Web界面
Spring Boot Initilizr Web界面在这篇文章中,我们将讨论Spring Boot Initilizr Web Interface及其IDE或IDE插件.在阅读帖子之前,请查看我之 ...
spring boot修改内置容器tomcat的服务端口
方式一在spring boot的web 工程中,可以使用内置的web container.有时需要修改服务端口,可以通过配置类和@Configuration注解来完成. // MyConfigura ...
Spring Boot 最佳实践（二）集成Jsp与生产环境部署
一.简介提起Java不得不说的一个开发场景就是Web开发,也是Java最热门的开发场景之一,说到Web开发绕不开的一个技术就是JSP,因为目前市面上仍有很多的公司在使用JSP,所以本文就来介绍一下S ...
学习Spring Boot：（十二）Mybatis 中自定义枚举转换器
前言在 Spring Boot 中使用 Mybatis 中遇到了字段为枚举类型,数据库存储的是枚举的值,发现它不能自动装载. 解决内置枚举转换器 MyBatis内置了两个枚举转换器分别是:org. ...
Spring Boot 入门系列（二十八） JPA 的实体映射关系，一对一，一对多，多对多关系映射！...
前面讲了Spring Boot 使用 JPA,实现JPA 的增.删.改.查的功能,同时也介绍了JPA的一些查询,自定义SQL查询等使用.JPA使用非常简单,功能非常强大的ORM框架,无需任何数据访问层 ...
Spring boot 实战指南（二）：Mybatis、动态绑定、多数据源、分页插件、Mybatis-Plus
文章目录一.整合Mybatis 1.搭建数据库环境 2.基于注解整合Mybatis (1)创建项目 (2)具体代码实现 (3)测试 3.基于xml整合Mybatis 4.Mybatis的动态SQL ...
Spring Boot 修改tomcat端口
在spring boot的web 工程中,可以使用内置的web container.有时需要修改服务端口. 方法一:通过配置类和@Configuration注解来完成 import org.sprin ...

Spring Boot修改添加界面二合一

理论

演示

代码

Spring Boot修改添加界面二合一相关推荐

最新文章

热门文章