当前位置: 首页 > news >正文

Springboot Thymeleaf 实现数据添加、修改、查询、删除

1、引言

在Spring Boot中使用Thymeleaf模板引擎实现数据的添加、修改、查询和删除功能,通常步骤如下:

  1. 在Controller类中,定义处理HTTP请求的方法。
  2. 创建Thymeleaf模板来处理表单的显示和数据的绑定。

2、用户数据添加

1、 在Controller类中,定义处理HTTP请求的方法。

@Controller
@RequestMapping("/user")
public class UserController {@Autowiredprivate IUserService userService;@GetMapping("/addPage")public String addPage(){return "user/add";}@PostMapping("/add")@ResponseBodypublic String add(User user){boolean save = userService.save(user);return "success";}}

2、创建Thymeleaf 模板处理表单,模板存放在“templates/user/add.html”目录中

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>用户添加页面</title><!--style省略-->
</head>  
<body>  <div class="container">  <h2>用户添加</h2><form action="/user/add" method="post"><label for="name">姓名:</label>  <input type="text" id="name" name="name" required>  <label for="age">年龄:</label>  <input type="number" id="age" name="age" min="0" required>  <label for="email">邮箱:</label><input type="email" id="email" name="email" required>  <label for="introduce">介绍:</label><textarea id="introduce" name="introduce" rows="4" required></textarea><label for="phone">电话号码:</label>  <input type="tel" id="phone" name="phone" pattern="[0-9]{11}" placeholder="请输入11位数字" required>  <input type="submit" value="提交">  </form>  </div>  
</body>  
</html>

3、访问页面添加用户

http://127.0.0.1:8080/user/addPage 

在这里插入图片描述

3、用户数据修改

1、 在Controller类中,定义处理HTTP请求的方法。

@Controller
@RequestMapping("/user")
public class UserController {@Autowiredprivate IUserService userService;@GetMapping("/editPage")public String editPage(Long id,Model model){User user = userService.getById(id);model.addAttribute("user",user);return "user/edit";}@PostMapping("/edit")@ResponseBodypublic String edit(User user){userService.updateById(user);return "success";}
}

2、创建Thymeleaf 模板处理表单和绑定数据,模板存放在“templates/user/edit.html”目录中

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>用户修改页面</title>
<!--style省略-->
</head>  
<body>  <div class="container">  <h2>用户修改</h2><form action="/user/edit" method="post"><input type="hidden" name="id" th:value="${user.id}" ><label for="name">姓名:</label><input type="text" id="name" name="name" th:value="${user.name}" required><label for="age">年龄:</label>  <input type="number" id="age" name="age" min="0" th:value="${user.age}" required><label for="email">邮箱:</label>  <input type="email" id="email" name="email" th:value="${user.email}" required><label for="introduce">介绍:</label><textarea id="introduce" name="introduce" rows="4"  th:text="${user.introduce}" required></textarea><label for="phone">电话号码:</label>  <input type="tel" id="phone" name="phone" pattern="[0-9]{11}" th:value="${user.phone}" placeholder="请输入11位数字" required><input type="submit" value="提交">  </form>  </div>  
</body>  
</html>

3、访问页面修改用户

 http://127.0.0.1:8080/user/editPage?id=1

在这里插入图片描述

4、用户数据查询

Thymeleaf 实现数据动态渲染
Thymeleaf实现数据分页

5、用户数据删除

1、 在Controller类中,定义处理HTTP请求的方法。 这里删除完用户,重定向到列表页。

    @GetMapping("/delete")public String delete(Long id){userService.removeById(id);return "redirect:/user/list?pageNum=1";}

2、用户列表页模板添加删除按钮

<body>  <h1>简历列表</h1><ul class="resume-list" th:with="users=${userPageInfo.list}"><li class="resume-item" th:each="user:${users}"><a href="/user/detail"><h2 th:text="${user.name}">张三</h2><p th:text="${user.introduce}">软件工程师,具有5年工作经验,擅长Java和前端技术。</p><p th:text="${user.phone}">联系方式:123-4567-8901</p></a><a class="delete-button" th:href="'/user/delete?id='+${user.id}" >删除</a></li></ul>
<div class="page-foot"><a th:class="${pageNum==userPageInfo.pageNum?'active':''}" th:href="'/user/list?pageNum='+${pageNum}" th:each="pageNum:${userPageInfo.navigatepageNums}" >[[${pageNum}]]</a>
</div></body>

删除按钮样式

  .resume-item{display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;align-items: center;justify-content: space-between;}.delete-button{cursor: pointer;background: red;color: white;display: block;width: 50px;height: 30px;text-align: center;line-height: 30px;margin-right: 5%;border-radius: 5px;}

3、访问用户列表页删除用户

http://127.0.0.1:8080/user/list?pageNum=1

在这里插入图片描述

相关文章:

Springboot Thymeleaf 实现数据添加、修改、查询、删除

1、引言 在Spring Boot中使用Thymeleaf模板引擎实现数据的添加、修改、查询和删除功能&#xff0c;通常步骤如下&#xff1a; 在Controller类中&#xff0c;定义处理HTTP请求的方法。创建Thymeleaf模板来处理表单的显示和数据的绑定。 2、用户数据添加 1、 在Controller类中…...

关于 UnityEditorWindow

想要使用UnityEditorWindow作为调试窗口吗&#xff1f; 这样做可以很方便的针对游戏中的重要对象做调试。 但是有一个很不方便的地方&#xff0c;OnGUI 的刷新频率不高&#xff0c;或者说需要鼠标点击之后才会重绘&#xff0c;如何解决这一问题&#xff1f; 可以如下操作&am…...

小狐狸JSON-RPC:wallet_addEthereumChain(添加指定链)

wallet_addethereumchain&#xff08;添加网络&#xff09; var res await window.ethereum.request({"method": "wallet_addEthereumChain","params": [{"chainId": "0x64", // 链 ID &#xff08;必填&#xff09;"…...

Pandas | value_counts() 的详细用法

value_counts() 函数得作用 用来统计数据表中&#xff0c;指定列里有多少个不同的数据值&#xff0c;并计算每个不同值有在该列中的个数&#xff0c;同时还能根据指定得参数返回排序后结果。 返回得是Series对象 value_counts(values,sortTrue, ascendingFalse, normalizeFal…...

上岸美团了!

Hello&#xff0c;大家好&#xff0c;最近春招正在如火如荼&#xff0c;给大家分享一份美团的面经&#xff0c;作者是一份某双非的硕&#xff08;只如初见668&#xff09;&#xff0c;刚刚通过了美团的3轮面试&#xff0c;已经拿到offer&#xff0c;以下是他的一些分享。 一面&…...

Gemma开源AI指南

近几个月来&#xff0c;谷歌推出了 Gemini 模型&#xff0c;在人工智能领域掀起了波澜。 现在&#xff0c;谷歌推出了 Gemma&#xff0c;再次引领创新潮流&#xff0c;这是向开源人工智能世界的一次变革性飞跃。 与前代产品不同&#xff0c;Gemma 是一款轻量级、小型模型&…...

LabVIEW智能家居安防系统

LabVIEW智能家居安防系统 随着科技的飞速发展和人们生活水平的不断提升&#xff0c;智能家居系统以其便利性和高效性&#xff0c;逐渐成为现代生活的新趋势。智能家居安防系统作为智能家居系统的重要组成部分&#xff0c;不仅能够提高家庭的安全性&#xff0c;还能为用户提供更…...

[蓝桥杯 2022 省 A] 求和

[蓝桥杯 2022 省 A] 求和 题目描述 给定 n n n 个整数 a 1 , a 2 , ⋯ , a n a_{1}, a_{2}, \cdots, a_{n} a1​,a2​,⋯,an​, 求它们两两相乘再相加的和&#xff0c;即 S a 1 ⋅ a 2 a 1 ⋅ a 3 ⋯ a 1 ⋅ a n a 2 ⋅ a 3 ⋯ a n − 2 ⋅ a n − 1 a n − 2 ⋅ a…...

【C++入门】输入输出、命名空间、缺省参数、函数重载、引用、内联函数、auto、基于范围的for循环

目录 命名空间 命名空间的定义 命名空间的使用 输入输出 缺省参数 函数重载 引用 常引用 引用的使用场景 内联函数 auto 基于范围的for循环 命名空间 请看一段C语言的代码&#xff1a; #include <stdio.h> #include <stdlib.h>int rand 10;int main…...

Docker + Nginx 安装

安装Docker 1.防火墙 2.yum源 3.安装基础软件 更新yum源 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo yum clean all #清除yum源缓存 yu…...

UE RPC 外网联机(1)

技术&#xff1a;RPC TCP通信 设计&#xff1a;大厅服务<---TCP--->房间服务<---RPC--->客户端&#xff08;Creator / Participator&#xff09; 1. PlayerController 用于RPC通信控制 2.GameMode 用于数据同步 3.类图 4. 注意 &#xff08;1&#xff09;RPC&a…...

AI预测福彩3D第22弹【2024年3月31日预测--第5套算法开始计算第4次测试】

今天&#xff0c;咱们继续进行本套算法的测试&#xff0c;今天为第四次测试&#xff0c;仍旧是采用冷温热趋势结合AI模型进行预测。好了&#xff0c;废话不多说了。直接上结果~ 仍旧是分为两个方案&#xff0c;1大1小。 经过人工神经网络计算并进行权重赋值打分后&#xff0c;3…...

Django(二)-搭建第一个应用(1)

一、项目环境和结构 1、项目环境 2、项目结构 二、编写项目 1、创建模型 代码示例: import datetimefrom django.db import models from django.utils import timezone# Create your models here.class Question(models.Model):question_text models.CharField(max_length2…...

前端bugs

问题&#xff1a; Failed to load plugin typescript-eslint declared in package.json eslint-config-react-app#overrides[0]: Cannot find module eslint/package.json 解决&#xff1a; google了一晚上还得是chatgpt管用 运行以下命令【同时还要注意项目本身使用的Node版…...

MCGS学习——水位控制

要求 插入一个水罐&#xff0c;液位最大值为37插入一个滑动输入器&#xff0c;用来调节水罐水位&#xff0c;滑动输入器最大调节为液位最大值&#xff0c;并能清楚的显示出液位情况用仪表显示水位变化情况&#xff0c;仪表最大显示设置直观清楚方便读数&#xff0c;主划线为小…...

本地搭建多人协作ONLYOFFICE文档服务器并结合Cpolar内网穿透实现公网访问远程办公

文章目录 1. 安装Docker2. 本地安装部署ONLYOFFICE3. 安装cpolar内网穿透4. 固定OnlyOffice公网地址 本篇文章讲解如何使用Docker在本地服务器上安装ONLYOFFICE&#xff0c;并结合cpolar内网穿透实现公网访问。 Community Edition允许您在本地服务器上安装ONLYOFFICE文档&…...

Ubuntu 中电子邮件处理工具

Ubuntu 中电子邮件处理工具的综述 在现代通信技术中&#xff0c;电子邮件系统是不可或缺的一部分。特别是在基于 Linux 的操作系统如 Ubuntu 中&#xff0c;有许多高效且可靠的电子邮件处理工具可供选择。除了众所周知的 Postfix&#xff0c;还有其他几个重要的选项&#xff0…...

java多线程——运用线程同步解决线程安全问题

前言&#xff1a; 整理下学习笔记&#xff0c;打好基础&#xff0c;daydayup!!! 线程安全 多线程可以同时进行操作&#xff0c;但如果是同时操作一个共享资源的时候&#xff0c;可能会出现业务安全问题。 示例&#xff1a; 小A和小B共用一个账户&#xff0c;如果小A和小B同时取…...

Radio Silence for mac 好用的防火墙软件

Radio Silence for Mac是一款功能强大的网络防火墙软件&#xff0c;专为Mac用户设计&#xff0c;旨在保护用户的隐私和网络安全。它具备实时网络监视和控制功能&#xff0c;可以精确显示每个网络连接的状态&#xff0c;让用户轻松掌握网络活动情况。 软件下载&#xff1a;Radio…...

全国青少年软件编程(Python)等级考试一级考试真题2023年9月——持续更新.....

青少年软件编程(Python)等级考试试卷(一级) 分数:100 题数:37 一、单选题(共25题,共50分) 1.下列 Python 语句能够正确输出"学而时习之"五个字的是?( )A.print “学而时习之” B.print “(学而时习之)” C.print (“学而时习之”) D.print (学而时习之) 标…...

网络安全学习攻略宝典,从菜鸟到高手的必由之路

想成为一名真正的黑客到底该怎么学&#xff1f; 从0开始又该从何学起呢&#xff1f; 很多人想学习网络安全&#xff0c;却不知道从何下手。别迷茫&#xff0c;这篇文章为你指明方向&#xff0c;无论你是零基础小白&#xff0c;还是有一定基础想提升的人&#xff0c;都能从中找…...

【开发工具】Trae IDE 解决 Windows 下 C 工程无法跳转定义问题

1. 概要 &#x1f44b; 作为 Trae IDE 使用者&#xff0c;在 Windows 环境打开本地 C 工程时&#xff0c;习惯用 Ctrl 鼠标左键 快速跳转函数 / 变量定义却失效&#xff0c;仅能做文本匹配&#xff0c;无法精准定位语义定义。核心原因是 Trae 依赖 LSP&#xff08;语言服务器协…...

OCLP-Mod:终极指南 - 让老旧Mac免费升级到最新macOS

OCLP-Mod&#xff1a;终极指南 - 让老旧Mac免费升级到最新macOS 【免费下载链接】OCLP-Mod A mod version for OCLP,with more interesting features. 项目地址: https://gitcode.com/gh_mirrors/oc/OCLP-Mod 你是否拥有一台被苹果官方"抛弃"的老旧Mac&#x…...

如何通过Vial-QMK打造专属键盘体验:从入门到精通的个性化定制指南

如何通过Vial-QMK打造专属键盘体验&#xff1a;从入门到精通的个性化定制指南 【免费下载链接】vial-qmk QMK fork with Vial-specific features. 项目地址: https://gitcode.com/gh_mirrors/vi/vial-qmk 在数字化时代&#xff0c;键盘作为人与计算机交互的核心工具&…...

XC6206-1.8V是什么?有哪些作用?

本文主要介绍XC6206-1.8V是什么&#xff1f;有哪些作用&#xff1f;XC6206-1.8V是一款超低功耗、高精度的固定输出低压差线性稳压器&#xff08;LDO&#xff09;&#xff0c;核心作用是把较高电压转换成稳定的1.8V输出&#xff0c;专门为电池供电和低功耗设备设计。图文来源&am…...

OpenClaw+GLM-4.7-Flash:智能爬虫与数据分析

OpenClawGLM-4.7-Flash&#xff1a;智能爬虫与数据分析 1. 为什么需要智能爬虫与数据分析 最近我在做一个小型竞品分析项目时&#xff0c;遇到了一个典型的数据收集困境&#xff1a;需要从20多个竞品网站抓取产品功能描述、定价策略和用户评价&#xff0c;然后整理成结构化数…...

知识管理新范式:跨平台无缝迁移与团队协作效能提升指南

知识管理新范式&#xff1a;跨平台无缝迁移与团队协作效能提升指南 【免费下载链接】outline Outline 是一个基于 React 和 Node.js 打造的快速、协作式团队知识库。它可以让团队方便地存储和管理知识信息。你可以直接使用其托管版本&#xff0c;也可以自己运行或参与开发。源项…...

YOLO_World+SAM+GraspNet在mujoco中的抓取仿真实战:从环境搭建到代码运行

YOLO_WorldSAMGraspNet在MuJoCo中的抓取仿真实战&#xff1a;从环境搭建到代码运行 在机器人抓取仿真领域&#xff0c;结合YOLO_World、SAM&#xff08;Segment Anything Model&#xff09;和GraspNet三大前沿技术&#xff0c;能够在MuJoCo物理引擎中实现高度逼真的物体识别、分…...

Sqoop1 vs Sqoop2:架构之争与选型指南

Sqoop1 vs Sqoop2&#xff1a;架构之争与选型指南1. 引言&#xff1a;两个版本&#xff0c;一个困惑2. 核心差异&#xff1a;从架构到功能的全面对比2.1 架构对比&#xff1a;客户端 vs 客户端-服务器2.2 功能特性详细对比2.3 安全性对比&#xff1a;Sqoop2的核心优势3. 为什么…...

AI辅助开发深度探索:在快马平台上对比评测类qoderwork官网的AI代码生成能力

最近在研究AI辅助开发时&#xff0c;发现一个很有意思的现象&#xff1a;同样是生成一个网页项目&#xff0c;不同AI模型给出的代码风格和实现思路差异很大。这让我萌生了一个想法——能不能搭建一个平台&#xff0c;专门用来对比评测不同AI模型的代码生成能力&#xff1f;就像…...