SpringBoot-----从前端更新数据到MySql数据库

目录

(一)连接MySql

(二)创建实体模型

(三)创建Repository接口

(四)创建Controller类

  (五)运行AccessingDataMysqlApplication

(六)HTML页面设置


参考SpringBoot官网教程:

1.Validating Form Input

2.Handling Form Submission

3.Accessing data with MySQL

(一)连接MySql

在pom.xml中引入以下依赖:

---------连接数据库----------		
<dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.12</version>
</dependency>-------用于启用JPA和Hibernate,实现数据的持久化-------<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency>-----------启用web应用程序----------<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency>--------用于构建交互的WEB应用程序-------<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>-------启用校验功能----------<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId><version>3.1.5</version></dependency>

在application.properties中添加如下代码,连接数据库

spring.jpa.hibernate.ddl-auto=update
spring.datasource.url=jdbc:mysql://localhost:3306/db_example?useSSL=false&serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=123456ab
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#spring.jpa.show-sql: true
# spring.thymeleaf.cache=false
# spring.thymeleaf.prefix=classpath:/templates/
# spring.thymeleaf.suffix=.html

也可以添加application.yml:

application.yml 的功能和 application.properties 是一样的,不过因为yml文件是树状结构,写起来有更好的层次感,更易于理解,所以很多人都选择了yml文件。

spring:datasource:driver-class-name: com.mysql.jdbc.Driverurl: jdbc:mysql://localhost:3306/springboot?useUnicode=true&characterEncoding=utf-8&useSSL=falseusername: rootpassword: 123456ab

(二)创建实体模型

@Entity注解用于将一个类标识为 JPA 实体,它告诉 Hibernate 或其他 JPA 实现框架将这个类映射为数据库中的表

注:想深入学习校验方法及注释的小伙伴可以看看这个:

如何在 Spring/Spring Boot 中优雅地做参数校验?-腾讯云开发者社区-腾讯云 (tencent.com)

package com.example.accessingdatamysql;import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.SequenceGenerator;
import jakarta.validation.constraints.NotEmpty;
import jakarta.validation.constraints.Email;
import jakarta.validation.constraints.NotNull;
import jakarta.validation.constraints.Size;@Entity // This tells Hibernate to make a table out of this class
public class User {@Id
//指定序列生成器,序列生成器的名称为"user_seq"@GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "user_seq")
//每次增长值为1@SequenceGenerator(name = "user_seq", sequenceName = "user_seq", allocationSize = 1)private Integer id;@NotNull(message = "姓名不能为空")@Size(min = 2, max = 30, message = "姓名长度必须在2-30之间")private String name;@Email@NotEmpty(message = "邮箱不能为空")private String email;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 String toString() {return "User(id:" + this.id + ",name:" + this.name + ",email:" + this.email + ")";}
}

(三)创建Repository接口

Repository接口,用于定义数据访问的方法

package com.example.accessingdatamysql;import org.springframework.data.repository.CrudRepository;// import com.example.accessingdatamysql.User;// This will be AUTO IMPLEMENTED by Spring into a Bean called userRepository
// CRUD refers Create, Read, Update, Delete//使用Iterable,可以根据条件来查询匹配的用户,并获取到一个包含所有符合条件的迭代的用户列表。
public interface UserRepository extends CrudRepository<User, Integer> {//根据姓名查询用户Iterable<User> findByName(String name);//根据邮箱查询用户Iterable<User> findByEmail(String email);//根据邮箱和姓名查询用户Iterable<User> findByNameAndEmail(String email,String name);}

(四)创建Controller类

Controller类通常用于Web应用程序,它接收用户的HTTP请求,调用业务逻辑处理请求,并返回一个包含响应数据的视图。

package com.example.accessingdatamysql;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;import jakarta.validation.Valid;@Controller
@Validated
public class WebController implements WebMvcConfigurer {@Autowiredprivate UserRepository userRepository;@Overridepublic void addViewControllers(ViewControllerRegistry registry) {registry.addViewController("/results").setViewName("results");}@GetMapping("/form")public String showForm(Model model) {model.addAttribute("user", new User());return "form";}@PostMapping("/")public String submintForm(@Valid @ModelAttribute("user") User user, BindingResult bindingResult) {if (bindingResult.hasErrors()) {return "form";}userRepository.save(user);return "redirect:/list";}@GetMapping("/list")public String showList(Model model) {model.addAttribute("userList", userRepository.findAll());return "list";}@GetMapping(path = "/deleteAll")public String deleteAllUsers(Model model) {userRepository.deleteAll();Iterable<User> userList = userRepository.findAll();model.addAttribute("userList", userList);return "redirect:/list";}@GetMapping(path = "/delete/{id}")public String deleteUser(@PathVariable("id") Integer id, Model model) {userRepository.deleteById(id);Iterable<User> userList = userRepository.findAll();model.addAttribute("userList", userList);return "redirect:/list"; // 返回list.html模板}@GetMapping(path = "/edit/{id}")public String updateUser(@PathVariable("id") Integer id, Model model) {User user = userRepository.findById(id).orElseThrow(() -> new IllegalArgumentException("Invalid user ID"));model.addAttribute("user", user);return "edit";}@PostMapping(path = "/update")public String update(@Valid User user, Model model) {userRepository.save(user);Iterable<User> userList = userRepository.findAll();model.addAttribute("userList", userList);return "list";}@GetMapping("/find")public String findUserByNameAndEmail(@RequestParam("name") String name,@RequestParam("email") String email, Model model) {Iterable<User> userlist;if (!name.isEmpty() && !email.isEmpty()) {// 根据姓名和邮箱查询用户userlist = userRepository.findByNameAndEmail(name, email);} else if (!name.isEmpty()) {// 根据姓名查询用户userlist = userRepository.findByName(name);} else if (!email.isEmpty()) {// 根据邮箱查询用户userlist = userRepository.findByEmail(email);} else {// 返回所有用户userlist = userRepository.findAll();}model.addAttribute("userlist", userlist);return "check";}
}

这里的注释

@Valid:用于验证注释是否符合要求,例如

这里就是检验密码是否为空

@RestController
@RequestMapping("/user")
public class UserController {@PostMappingpublic User create (@Valid @RequestBody User user) {System.out.println(user.getId());System.out.println(user.getUsername());System.out.println(user.getPassword());user.setId("1");return user;}
}    public class User {private String id;  @NotBlank(message = "密码不能为空")private String password;
}

@RequestParam:将请求参数绑定到你控制器的方法参数上(是springmvc中接收普通参数的注解)

//url参数中的name必须要和@RequestParam("name")一致@RequestMapping("show16")public ModelAndView test16(@RequestParam("name")String name){ModelAndView mv = new ModelAndView();mv.setViewName("hello");mv.addObject("msg", "接收普通的请求参数:" + name);return mv;}

得到结果

url:localhost:8080/hello/show16?name=cc

页面:

接收普通的请求参数:cc

(五)运行AccessingDataMysqlApplication
package com.example.accessingdatamysql;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class AccessingDataMysqlApplication {public static void main(String[] args) {SpringApplication.run(AccessingDataMysqlApplication.class, args);}
}

(六)HTML页面设置

check.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title>Check User List</title><style>body {display: flex;align-items: stretch;height: 100vh;background-color: #f2f2f2;justify-content: space-between;flex-wrap: wrap;flex-direction: column;align-content: center;}table {width: 600px;margin-top: 20px;border-collapse: collapse;background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}table th,table td {padding: 10px;text-align: center;border: 1px solid #ccc;}table th {background-color: #f2f2f2;}a {display: block;text-align: center;margin-top: 20px;text-decoration: none;color: #4CAF50;font-weight: bold;}a:hover {color: #45a049;}.btn-edit,.btn-delete {display: inline-block;padding: 5px 10px;border: none;background-color: #4CAF50;color: white;text-decoration: none;cursor: pointer;}.btn-edit:hover,.btn-delete:hover {background-color: #45a049;}</style>
</head><body><h1 style="text-align: center; margin-bottom: 20px;">Check User List</h1><form th:action="@{/find}" method="get" style="text-align: center;"><input type="text" name="name" placeholder="姓名"><input type="text" name="email" placeholder="邮箱"><button type="submit">查询</button></form><table><tr><th>Name</th><th>Email</th><th>操作</th></tr><tr th:each="user : ${userlist}"><td th:text="${user.name}"></td><td th:text="${user.email}"></td><td><a th:href="@{'/edit/' + ${user.id}}" class="btn-edit">编辑</a><a th:href="@{'/delete/' + ${user.id}}" class="btn-delete">删除</a></td></tr></table><a href="/form" style="text-align: center; margin-top: 20px; display: block;">添加新信息</a>
</body></html>

edit.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title>Edit User</title><style>body {display: flex;align-items: center;height: 100vh;background-color: #f2f2f2;flex-direction: column;flex-wrap: wrap;align-content: center;justify-content: center;}form {width: 400px;padding: 20px;background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);text-align: center;}label {display: block;margin-bottom: 10px;font-weight: bold;}input {width: 100%;padding: 8px;margin-bottom: 20px;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;}button {padding: 10px 20px;border: none;background-color: #4CAF50;color: white;text-decoration: none;cursor: pointer;}button:hover {background-color: #45a049;}a {display: block;margin-top: 20px;text-align: center;text-decoration: none;color: #4CAF50;font-weight: bold;}a:hover {color: #45a049;}</style>
</head><body><h1>编辑信息</h1><form th:action="@{/update}" method="post"><input type="hidden" th:name="id" th:value="${id}" /><label for="name">Name:</label><input type="text" id="name" name="name" th:value="${name}" /><label for="email">Email:</label><input type="email" id="email" name="email" th:value="${email}" /><button type="submit">保存</button></form><a href="/list">返回列表</a>
</body></html>

form.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title>Form</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f2f2f2;}.form-container {width: 400px;padding: 20px;background-color: #fff;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}.form-container h1 {text-align: center;margin-bottom: 20px;}.form-container label {display: block;margin-bottom: 10px;}.form-container input[type="text"],.form-container input[type="email"] {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 5px;}.form-container button[type="submit"] {display: block;width: 100%;padding: 10px;margin-top: 20px;background-color: #4CAF50;color: #fff;border: none;border-radius: 5px;cursor: pointer;}.form-container button[type="submit"]:hover {background-color: #45a049;}.form-container button[type="reset"] {display: block;width: 100%;padding: 10px;margin-top: 20px;background-color: #4CAF50;color: #fff;border: none;border-radius: 5px;cursor: pointer;}.form-container button[type="reset"]:hover {background-color: #45a049;}.form-container button[type="delete"] {display: block;width: 100%;padding: 10px;margin-top: 20px;background-color: #4CAF50;color: #fff;border: none;border-radius: 5px;cursor: pointer;}.form-container button[type="delete"]:hover {background-color: #45a049;}.form-container span {color: red;font-size: 12px;margin-top: 5px;}</style>
</head><body><div class="form-container"><h1>表格</h1><form action="#" th:action="@{/}" th:object="${user}" method="post"><div><label for="name">Name:</label><input type="text" id="name" th:field="*{name}" required><span th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</span></div><div><label for="email">Email:</label><input type="text" id="email" th:field="*{email}" required><span th:if="${#fields.hasErrors('email')}" th:errors="*{email}">Email Error</span></div><div><button type="submit">Submit</button><button type="reset">Reset</button><button type="delete">Delete</button></div></form></div>
</body></html>

list.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title>List</title><style>body {display: flex;align-items: stretch;height: 100vh;background-color: #f2f2f2;justify-content: space-between;flex-wrap: wrap;flex-direction: column;align-content: center;}table {width: 600px;margin-top: 20px;border-collapse: collapse;background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}table th,table td {padding: 10px;text-align: center;border: 1px solid #ccc;}table th {background-color: #f2f2f2;}a {display: block;text-align: center;margin-top: 20px;text-decoration: none;color: #4CAF50;font-weight: bold;}a:hover {color: #45a049;}.btn-edit,.btn-delete {display: inline-block;padding: 5px 10px;border: none;background-color: #4CAF50;color: white;text-decoration: none;cursor: pointer;}.btn-edit:hover,.btn-delete:hover {background-color: #45a049;}.btn-delete-all {display: block;text-align: center;margin-top: 20px;text-decoration: none;color: #f44336;font-weight: bold;}.btn-delete-all:hover {color: #d32f2f;}</style>
</head><body><h1 style="text-align: center; margin-bottom: 20px;">信息系统</h1><form th:action="@{/find}" method="get" style="text-align: center;"><input type="text" name="name" placeholder="姓名"><input type="text" name="email" placeholder="邮箱"><button type="submit">查询</button></form><table><tr><th>Name</th><th>Email</th><th>操作</th></tr><tr th:each="user : ${userList}"><td th:text="${user.name}"></td><td th:text="${user.email}"></td><td><a th:href="@{'/edit/' + ${user.id}}" class="btn-edit">编辑</a><a th:href="@{'/delete/' + ${user.id}}" class="btn-delete">删除</a></td></tr></table><a href="/form" style="text-align: center; margin-top: 20px; display: block;">添加新信息</a><a href="/deleteAll" class="btn-delete-all">删除全部用户信息</a>
</body></html>

这里的页面可以通过设置css样式表等方式进行改进

结果:可以通过前端创建用户,并加入到mysql数据库中

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/147469.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python uiautomation获取微信内容!聊天记录、聊天列表、全都可获取

Python uiautomation 是一个用于自动化 GUI 测试和操作的库&#xff0c;它可以模拟用户操作来执行各种任务。 通过这个库&#xff0c;可以使用Python脚本模拟人工点击&#xff0c;人工操作界面。本文使用 Python uiautomation 进行微信电脑版的操作。 以下是本次实验的版本号。…

【C++】【Opencv】cv::warpAffine()仿射变换函数详解,实现平移、缩放和旋转等功能

仿射变换是一种二维变换&#xff0c;它可以将一个二维图形映射到另一个二维图形上&#xff0c;保持了图形的“形状”和“大小”不变&#xff0c;但可能会改变图形的方向和位置。仿射变换可以用一个线性变换矩阵来表示&#xff0c;该矩阵包含了六个参数&#xff0c;可以进行平移…

OpenCV技术应用(3)— 把.png图像保存为.jpg图像

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。本节课就手把手教你如何把.png图像保存为.jpg图像&#xff0c;希望大家学习之后能够有所收获~&#xff01;&#x1f308; 目录 &#x1f680;1.技术介绍 &#x1f680;2.实现代码 &#x1f680;1.技术介绍 如果在电脑某…

【SQL server】 表结构的约束和维护

表结构的约束和维护 修改表结构 (1)添加列 (2)删除列 (3)修改列alter table 表名 add 新列名 数据类型给员工表添加一列邮箱 alter table People add PeopleMail varchar(200)删除列 alter table People drop column PeopleMain修改列 alter table 表名 alter column 列名 数据…

【vue实战项目】通用管理系统:首页

前言 本文为博主的vue实战小项目系列中的第三篇&#xff0c;很适合后端或者才入门的小伙伴看&#xff0c;一个前端项目从0到1的保姆级教学。前面的内容&#xff1a; 【vue实战项目】通用管理系统&#xff1a;登录页-CSDN博客 【vue实战项目】通用管理系统&#xff1a;封装to…

学习css过渡动画-transition

文章目录 前言transition属性语法宽度改变效果透明度改变效果位置改变效果如有启发&#xff0c;可点赞收藏哟~ 前言 通常&#xff0c;当一个元素的样式属性值发生变化时&#xff0c;会立即看到页面发生变化。 css属性transition能让页面元素不是立即的、而是慢慢的从一种状态变…

Linux 环境删除Conda

你可以按照以下步骤操作来删除Conda&#xff1a; 首先&#xff0c;停止所有conda环境。在终端中运行以下命令&#xff1a; conda deactivate然后使用以下命令获取conda安装的路径&#xff1a; which conda如果成功安装了conda&#xff0c;该命令输出的路径应该是类似于这样的&a…

Flink1.17 DataStream API

目录 一.执行环境&#xff08;Execution Environment&#xff09; 1.1 创建执行环境 1.2 执行模式 1.3 触发程序执行 二.源算子&#xff08;Source&#xff09; 2.1 从集合中读取数据 2.2 从文件读取数据 2.3 从 RabbitMQ 中读取数据 2.4 从数据生成器读取数据 2.5 …

计算机毕业设计选题推荐-二手交易跳蚤市场微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

Java Swing算 24 点

内容要求 1&#xff09; 本次程序设计是专门针对 Java 课程的,要求使用 Java 语言进行具有一定代码量的程序开发。程序的设计要结合一定的算法&#xff0c;在进行代码编写前要能够设计好自己的算法。 2&#xff09;本次程序设计涉及到 Java 的基本语法&#xff0c;即课堂上所…

SQLite3 数据库学习(文章链接汇总)

参考引用 SQLite 权威指南&#xff08;第二版&#xff09;SQLite3 入门 SQLite3 数据库学习&#xff08;一&#xff09;&#xff1a;数据库和 SQLite 基础 SQLite3 数据库学习&#xff08;二&#xff09;&#xff1a;SQLite 中的 SQL 语句详解 SQLite3 数据库学习&#xff08;三…

android —— 阴影效果和跑马灯效果Textview

1、带阴影的TextView ①、 android:shadowColor“color/black” 设置阴影颜色&#xff0c;需要与shadowRadius一起使用 ②、android:shadowRadius“3.0” 设置阴影模糊程度&#xff0c;设为0.1会变成字体颜色&#xff0c;建议设置3.0 ③、android:shadowDx“10” 设置阴影在水…

Pair用法示例:

这里用到了 org.apache.commons.lang3.tuple.Pair 来封装数据&#xff08;就是不想自己再写一个 DO 或者 VO 或者 MO&#xff09; 在Java中&#xff0c;Pair是一种简单的数据结构&#xff0c;用于存储两个相关联的值。它没有特定的内置类&#xff0c;但可以通过自定义实现或使…

ubuntu下载conda

系统&#xff1a;Ubuntu18.04 &#xff08;1&#xff09;下载安装包 wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.11-Linux-x86_64.sh 报错错误 403&#xff1a;Forbidden 解决方法 wget -U NoSuchBrowser/1.0 https://mirrors.tuna.tsingh…

Smart Tomcat的使用

文章目录 Smart Tomcat的作用Smart Tomcat的安装Smart Tomcat的配置Smart Tomcat的启动 Smart Tomcat的作用 我们知道使用Servlet来完成一个项目一共需要七个步骤&#xff0c;即创建maven项目、添加依赖、创建目录结构、编写代码、打包程序、部署程序、验证程序。这样的确是完…

让资产权利归于建设者:Kiosk使过程变得更简单

区块链凭借着其将人的权利地位置于平台之上的能力&#xff0c;可以重塑互联网&#xff0c;而自托管为个人提供了控制和管理其资产和数据的能力。链上交易支持建设者和客户之间的点对点交易。这些特质联合起来&#xff0c;可以将数字世界从基于价值提取的模式转变为基于价值创造…

应用场景丨迭代市政综合管廊监测系统建设

市政综合管廊是指在城市地下建造的隧道空间&#xff0c;将市政、电力、通讯、燃气、给排水等各种管线集于一体&#xff0c;实施统一规划、设计、建设和管理。综合管廊有利于解决反复开挖路面、架空线网密集、管线事故频发等问题&#xff0c;是保障城市运行的重要基础设施和“生…

【2023C卷题限时免费】20天拿下华为OD笔试之 【不定滑窗】2023C-最长的指定瑕疵度的元音子串【欧弟算法】全网注释最详细分类最全的华为OD真题题解

文章目录 题目描述与示例题目描述输入描述输出描述示例一输入输出说明 示例二输入输出说明 示例三输入输出说明 解题思路滑窗三问滑窗三答 代码PythonJavaC时空复杂度 华为OD算法/大厂面试高频题算法练习冲刺训练 题目描述与示例 题目描述 头和结尾都是元音字母&#xff08;a…

小程序判断是否授权位置信息和手动授权

文章目录 概要微信小程序的&#xff0c;使用的是高德地图 概要 当用户来到页面之后就会弹出是否授权弹框&#xff0c;但是如果第一次关闭之后&#xff0c;下一次再过来的话页面的授权弹框就不出现了&#xff0c;针对于这种情况写了一个方法 微信小程序的&#xff0c;使用的是…

C#WPF数据触发器实例

本文讲解C#WPF数据触发器的实例 当绑定的数据满足某些条件时,数据触发器会执行某些操作 实例 创建项目 ListBox及触发器使用实例 UI界面 <Windowx:Class="TriggerDemo.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&q…