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

SpingBoot-Vue前后端——实现CRUD

news 2026/2/10 6:47:49

目录​​​​​​​

一、实例需求 ⚽

 二、代码实现 🏌 

数据库 👀

后端实现 📫

前端实现 🌱

三、源码下载 👋

一、实例需求 ⚽

 实现一个简单的CRUD，包含前后端交互。

 二、代码实现 🏌 

数据库 👀

CREATE TABLE `user` (`id` bigint(20) NOT NULL AUTO_INCREMENT,`name` varchar(20) DEFAULT NULL COMMENT '姓名',`age` int(11) DEFAULT NULL COMMENT '年龄',`sex` varchar(1) DEFAULT NULL COMMENT '性别',`address` varchar(255) DEFAULT NULL COMMENT '地址',`phone` varchar(20) DEFAULT NULL COMMENT '电话',`create_time` varchar(20) DEFAULT NULL COMMENT '创建时间',`avatar` varchar(255) DEFAULT NULL COMMENT '头像',PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1690322826313793539 DEFAULT CHARSET=utf8;

后端实现 📫

方式一（使用springboot + mybatis-plus）

package com.example.demo.service;import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import org.springframework.boot.autoconfigure.data.web.SpringDataWebProperties;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.awt.print.Pageable;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;@Service
public class UserService {@Resourceprivate UserMapper userMapper;public void save(User user) {String now = new SimpleDateFormat("yyyy-MM-dd").format(new Date());user.setCreateTime(now);userMapper.insert(user);}public void delete(Long id) {userMapper.deleteById(id);}public User findById(Long id) {if(id !=null){QueryWrapper<User> queryWrapper = Wrappers.query();queryWrapper.eq("id", id);return userMapper.selectOne(queryWrapper);}else{return  null;}}public List<User> findAll() {QueryWrapper<User> queryWrapper = Wrappers.query();return userMapper.selectList(queryWrapper);}public IPage<User> findPage(Integer pageNum, Integer pageSize, String name) {LambdaQueryWrapper<User> queryWrapper = Wrappers.lambdaQuery();queryWrapper.like(User::getName, "%" + name + "%");return userMapper.selectPage(new Page<>(pageNum, pageSize), queryWrapper);}
}

参考资源下载。

方式二（使用JPA）

参考源码下载。

前端实现 🌱

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户信息</title><link rel="stylesheet" href="element.css">
</head>
<body>
<div id="app" style="width: 80%; margin: 0 auto"><h2>员工信息表</h2><el-row ><el-col :span="2" style="margin-bottom: 10px"><el-button type="primary" @click="add">新增</el-button></el-col><el-col :span="2" style="margin-bottom: 10px"><el-button type="primary" @click="search" >查询</el-button></el-col><el-col :span="6" style="margin-bottom: 10px"><el-input v-model="name" placeholder="请输入员工姓名" style="width: 70%"></el-input></el-col></el-row><el-table:data="page.records"stripeborderstyle="width: 100%"><el-table-columnprop="name"label="用户名"></el-table-column><!-- 新增头像图片列 --><el-table-columnprop="avatar"label="头像"><template slot-scope="scope"><el-image :src="scope.row.avatar" style="width: 60px; height: 60px;"></el-image></template></el-table-column><el-table-columnprop="age"label="年龄"width="180"></el-table-column><el-table-columnprop="sex"label="性别"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnprop="phone"label="电话"></el-table-column><el-table-columnfixed="right"label="操作"width="100"><template slot-scope="scope"><el-button type="primary" icon="el-icon-edit" size="small" circle @click="edit(scope.row)"></el-button><el-button type="danger" icon="el-icon-delete" size="small" circle @click="del(scope.row.id)"></el-button></template></el-table-column></el-table><el-row type="flex" justify="center" style="margin-top: 10px"><el-paginationlayout="prev, pager, next":page-size="pageSize":current-page="pageNum"@prev-click="loadTable"@current-change="loadTable"@next-click="loadTable":total="page.totalElements"></el-pagination></el-row><el-dialogtitle="用户信息":visible.sync="dialogVisible"width="30%"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="用户名"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="头像"></el-form-item><el-form-item label="年龄"><el-input v-model="form.age"></el-input></el-form-item><el-form-item label="性别"><el-radio v-model="form.sex" label="男">男</el-radio><el-radio v-model="form.sex" label="女">女</el-radio></el-form-item><el-form-item label="地址"><el-input v-model="form.address"></el-input></el-form-item><el-form-item label="电话"><el-input v-model="form.phone"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="save">确 定</el-button></span></el-dialog></div>
<script src="jquery.min.js"></script>
<script src="vue.js"></script>
<script src="element.js"></script>
<script>new Vue({el: '#app',// 在el属性中指定了Vue实例要挂载的元素id为"app"，即前面提到的div容器。data: { // data属性是一个对象，存储了Vue实例的数据。page用于存储从服务器获取到的用户信息数据，初始值为空对象。name是用于搜索用户名称的字段，默认为空字符串。page: {},name: '',pageNum: 1,// pageNum表示当前页码，默认为1。pageSize: 4, // pageSize表示每页显示的数据条数，默认为4。dialogVisible: false,// dialogVisible控制弹窗的显示与隐藏，默认为false（隐藏）form: {avatar : ''},// form是用于编辑用户信息的表单数据对象，默认为空对象。message: {duration: 500 // 持续时间为0.5秒}},created() { // created方法是Vue实例的生命周期钩子，在实例创建后立即执行。在这个钩子中调用了loadTable方法，将pageNum作为参数传入，加载表格数据。this.loadTable(this.pageNum);},methods: {loadTable(num) {this.pageNum = num;$.get("/user/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.name).then(res => {this.page = res.data;});},add() {this.dialogVisible = true;this.form = {};},edit(row) {this.form = row;this.dialogVisible = true;},save() {let data = JSON.stringify(this.form);if (this.form.id) {// 编辑$.ajax({url: '/user',type: 'put',contentType: 'application/json',data: data}).then(res => {this.dialogVisible = false;this.loadTable(1);this.$message.success('修改成功！');})} else {// 新增$.ajax({url: '/user',type: 'post',contentType: 'application/json',data: data}).then(res => {this.dialogVisible = false;this.loadTable(1);this.$message.success('新增成功！');})}},del(id) {$.ajax({url: '/user/' + id,type: 'delete',contentType: 'application/json'}).then(res => {this.loadTable(1);this.$message.success('删除成功！');})},search() {this.loadTable(1);}}})
</script>
</body>
</html>

三、源码下载 👋

Asukabai/usermanage: Contains CRUD and other basic operations for users (github.com)

相关文章：

SpingBoot-Vue前后端——实现CRUD

目录​​​​​​​ 一、实例需求 ⚽ 二、代码实现 &#x1f3cc; 数据库 &#x1f440; 后端实现 &#x1f4eb; 前端实现 &#x1f331; 三、源码下载 &#x1f44b; 一、实例需求 ⚽ 实现一个简单的CRUD&#xff0c;包含前后端交互。 二、代码实现 &#x1f3cc; 数…...

编程日记 2023/8/14 5:14:48

LeetCode150道面试经典题--最后一个单词的长度(简单)

1.题目 给你一个字符串 s&#xff0c;由若干单词组成&#xff0c;单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子字符串。 2.示例 3.思路 通过对字符串的反转&#xff0c;转为数组开始遍历&#xff0c…...

编程日记 2023/8/14 5:13:47

web-xss-dvwa

目录 xss&#xff08;reflected&#xff09; low medium high xss(store) low medium high xss(dom) low medium high xss&#xff08;reflected&#xff09; low 没有什么过滤&#xff0c;直接用最普通的标签就可以了 http://127.0.0.1/DVWA-master/vulnerabili…...

编程日记 2023/8/14 5:12:44

Exploiting Proximity-Aware Tasks for Embodied Social Navigation 论文阅读

论文信息 题目&#xff1a;Exploiting Proximity-Aware Tasks for Embodied Social Navigation 作者&#xff1a;Enrico Cancelli&#xff0c; Tommaso Campari 来源&#xff1a;arXiv 时间&#xff1a;2023 Abstract 学习如何在封闭且空间受限的室内环境中在人类之间导航&a…...

编程日记 2023/8/14 5:11:43

【华为OD机试】统计射击比赛成绩【2023 B卷|100分】

【华为OD机试】-真题 !!点这里！！ 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 给定一个射击比赛成绩单，包含多个选手若干次射击的成绩分数， 请对每个选手按其最高3个分数之和进行降序排名，输出降序排名后的选手ID序列。 条件如下： 1、一个选手可以有多个射击成…...

编程日记 2023/8/14 5:10:41

git push之后的撤销操作

用的是idea。 pull了代码之后&#xff0c;想撤销pull&#xff1a; push代码到个人远程仓库之后&#xff0c;又从主仓pull了一下。 点击其中一条git记录&#xff0c;然后右键单击“reset current branch ti here”,然后再点击hard push了代码到个人仓库&#xff0c;想撤销&…...

编程日记 2023/8/14 5:09:40

CSS 的选择器有哪些种类？分别如何使用？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 元素选择器&#xff08;Element Selector&#xff09;⭐ 类选择器&#xff08;Class Selector&#xff09;⭐ ID 选择器&#xff08;ID Selector&#xff09;⭐ 后代选择器&#xff08;Descendant Selector&#xff09;⭐ 子元素选择器&a…...

编程日记 2023/8/14 5:08:37

【MongoDB】索引

目录 一、概述 二、索引的类型 1、单字段索引 2、复合索引 3、其他索引 三、索引的管理 1、索引的创建 2、索引的查看 3、索引的删除 四、索引的使用 1、执行计划 2、涵盖的查询 一、概述 索引支持在MongoDB中高效地执行查询。如果没有索引&#xff0c;MongoDB必须…...

编程日记 2023/8/14 5:07:35

机器人CPP编程基础-02变量Variables

机器人CPP编程基础-01第一个程序Hello World 基础代码都可以借助人工智能工具进行学习。 C #include<iostream>using namespace std;main() {//Declaring an integer type variable A, allocates 4 bytes of memory.int A4;cout<<A <<endl;//Prints the a…...

编程日记 2023/8/14 5:06:32

【学会动态规划】买卖股票的最佳时机 IV（18）

目录 动态规划怎么学&#xff1f; 1. 题目解析 2. 算法原理 1. 状态表示 2. 状态转移方程 3. 初始化 4. 填表顺序 5. 返回值 3. 代码编写 写在最后&#xff1a; 动态规划怎么学&#xff1f; 学习一个算法没有捷径&#xff0c;更何况是学习动态规划&#xff0c; 跟我…...

编程日记 2023/8/14 5:05:30

请解释一下CSS中的rem和em单位有什么不同，分别如何使用？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ CSS中的rem和em单位的区别和使用⭐ em单位使用示例&#xff1a; ⭐ rem 单位使用示例&#xff1a; ⭐ 区别和适用场景⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何…...

编程日记 2023/8/14 5:04:29

docker 导入镜像 REPOSITORY和tag都是null怎么解决

当使用 docker import 命令导入镜像时&#xff0c;REPOSITORY 和 TAG 字段可能会为 null&#xff0c;因为 docker import 命令不会保留镜像的元数据&#xff0c;例如镜像名称和标签。这是因为 docker import 命令主要用于将本地文件系统中的文件或目录导入为 Docker 镜像&#…...

编程日记 2023/8/14 5:03:26

c语言操作符

目录 运算符 移位操作符 左移操作符 右移操作符 位操作符 按位与& 按位或| 按位异或^ 异或交换数字 计算二进制中1的个数 关系操作符 逻辑操作符 条件操作符 逗号表达式 下标引用、函数调用和结构成员 隐式类型转换 整形提升实例&#xff1a; 算术转换 操作…...

编程日记 2023/8/14 5:02:23

python爬虫5：requests库-案例3

python爬虫5&#xff1a;requests库-案例3 前言 ​ python实现网络爬虫非常简单&#xff0c;只需要掌握一定的基础知识和一定的库使用技巧即可。本系列目标旨在梳理相关知识点&#xff0c;方便以后复习。 申明 ​ 本系列所涉及的代码仅用于个人研究与讨论&#xff0c;并不会对网…...

编程日记 2023/8/14 5:01:22

uni-app：实现点击按钮，进行数据累加展示（解决数据过多，导致出错）

效果 代码 核心代码 一、标签显示 <!-- 加载更多 --> <view class"load_more" v-if"info.length > pageNum * pageSize" tap"loadMore">加载更多 </view> v-if"info.length > pageNum * pageSize"&#xf…...

编程日记 2023/8/14 5:00:21

群晖6.X便捷的安装cpolar内网穿透

群晖6.X便捷的安装cpolar内网穿透 文章目录 群晖6.X便捷的安装cpolar内网穿透前言1. 下载cpolar的群晖套件1.1 打开群晖套件中心1.2 选择“手动安装”1.3 选择下载cpolar套件位置 2. 打开cpolar的Web-UI界面3. 注册会员 前言 随着硬件设备和软件技术的发展&#xff0c;以及数据…...

编程日记 2023/8/14 4:59:17

ffmpeg 4.4版本对MP4文件进行AES-CTR加密，和流式加密

对于ffmpeg的AES-CTR加密有两种方式&#xff0c;一个是普通的整个视频做加密&#xff0c;另一个是对视频做切片处理&#xff0c;然后进行加密。 一、对于普通的加密方式 直接使用下面的命令就行 ffmpeg -i animal.mp4 -vcodec copy -acodec copy -encryption_scheme cenc-aes…...

编程日记 2023/8/14 4:58:16

软件测试基础篇——Docker

1、docker技术概述 docker描述&#xff1a;docker是一项虚拟化的容器技术&#xff08;类似于虚拟机&#xff09;&#xff0c;docker技术给使用者提供一个平台&#xff0c;在该平台上可以利用提供的容器&#xff0c;对每一个应用程序进行单独的封装隔离&#xff0c;每一个应用程…...

编程日记 2023/8/14 4:57:14

MySQL刷题遇到的盲点（五）窗口函数

窗口函数 语法&#xff1a; <窗口函数> over (partition by <用于分组的列名>order by <用于排序的列名>) partition by&#xff1a;用来对表分组&#xff08; partition 子句可以省略&#xff0c;省略就是不指定分组&#xff09; order by&#xff1a;是…...

编程日记 2023/8/14 4:56:12

【java】基础——多态

多态基本知识思维导图 多态的代码实现&#xff0c;注意父类对象引用指向子类对象引用&#xff08;向上转型&#xff09;的方法&#xff0c;父类就可以调用子类重写的方法和派生的方法&#xff0c;但不能调用子类特有的方法&#xff1a; class Animal {public void makeSound()…...

编程日记 2023/8/14 4:55:11

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

编程新知 2025/12/14 22:32:59

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2026/2/8 20:42:53

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2026/2/8 18:25:56

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2026/2/8 10:51:42

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2026/2/1 5:24:17

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/10/11 5:18:43

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2026/1/26 13:29:47

深度学习之模型压缩三驾马车：模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

编程新知 2025/9/24 3:56:34