SpingBoot-Vue前后端——实现CRUD
目录
一、实例需求 ⚽
二、代码实现 🏌
数据库 👀
后端实现 📫
前端实现 🌱
三、源码下载 👋
一、实例需求 ⚽
实现一个简单的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
目录 一、实例需求 ⚽ 二、代码实现 🏌 数据库 👀 后端实现 📫 前端实现 🌱 三、源码下载 👋 一、实例需求 ⚽ 实现一个简单的CRUD，包含前后端交互。 二、代码实现 🏌 数…...
LeetCode150道面试经典题--最后一个单词的长度(简单)
1.题目 给你一个字符串 s，由若干单词组成，单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子字符串。 2.示例 3.思路 通过对字符串的反转，转为数组开始遍历，…...
web-xss-dvwa
目录 xss（reflected） low medium high xss(store) low medium high xss(dom) low medium high xss（reflected） low 没有什么过滤，直接用最普通的标签就可以了 http://127.0.0.1/DVWA-master/vulnerabili…...
Exploiting Proximity-Aware Tasks for Embodied Social Navigation 论文阅读
论文信息 题目：Exploiting Proximity-Aware Tasks for Embodied Social Navigation 作者：Enrico Cancelli， Tommaso Campari 来源：arXiv 时间：2023 Abstract 学习如何在封闭且空间受限的室内环境中在人类之间导航&a…...
【华为OD机试】统计射击比赛成绩【2023 B卷|100分】
【华为OD机试】-真题 !!点这里！！ 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 给定一个射击比赛成绩单，包含多个选手若干次射击的成绩分数， 请对每个选手按其最高3个分数之和进行降序排名，输出降序排名后的选手ID序列。 条件如下： 1、一个选手可以有多个射击成…...
git push之后的撤销操作
用的是idea。 pull了代码之后，想撤销pull： push代码到个人远程仓库之后，又从主仓pull了一下。 点击其中一条git记录，然后右键单击“reset current branch ti here”,然后再点击hard push了代码到个人仓库，想撤销&…...
CSS 的选择器有哪些种类？分别如何使用？
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 元素选择器（Element Selector）⭐ 类选择器（Class Selector）⭐ ID 选择器（ID Selector）⭐ 后代选择器（Descendant Selector）⭐ 子元素选择器&a…...
【MongoDB】索引
目录 一、概述 二、索引的类型 1、单字段索引 2、复合索引 3、其他索引 三、索引的管理 1、索引的创建 2、索引的查看 3、索引的删除 四、索引的使用 1、执行计划 2、涵盖的查询 一、概述 索引支持在MongoDB中高效地执行查询。如果没有索引，MongoDB必须…...
机器人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…...
【学会动态规划】买卖股票的最佳时机 IV（18）
目录 动态规划怎么学？ 1. 题目解析 2. 算法原理 1. 状态表示 2. 状态转移方程 3. 初始化 4. 填表顺序 5. 返回值 3. 代码编写 写在最后： 动态规划怎么学？ 学习一个算法没有捷径，更何况是学习动态规划， 跟我…...
请解释一下CSS中的rem和em单位有什么不同，分别如何使用？
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ CSS中的rem和em单位的区别和使用⭐ em单位使用示例： ⭐ rem 单位使用示例： ⭐ 区别和适用场景⭐ 写在最后 ⭐ 专栏简介 前端入门之旅：探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何…...
docker 导入镜像 REPOSITORY和tag都是null怎么解决
当使用 docker import 命令导入镜像时，REPOSITORY 和 TAG 字段可能会为 null，因为 docker import 命令不会保留镜像的元数据，例如镜像名称和标签。这是因为 docker import 命令主要用于将本地文件系统中的文件或目录导入为 Docker 镜像&#…...
c语言操作符
目录 运算符 移位操作符 左移操作符 右移操作符 位操作符 按位与& 按位或| 按位异或^ 异或交换数字 计算二进制中1的个数 关系操作符 逻辑操作符 条件操作符 逗号表达式 下标引用、函数调用和结构成员 隐式类型转换 整形提升实例： 算术转换 操作…...
python爬虫5：requests库-案例3
python爬虫5：requests库-案例3 前言 python实现网络爬虫非常简单，只需要掌握一定的基础知识和一定的库使用技巧即可。本系列目标旨在梳理相关知识点，方便以后复习。 申明 本系列所涉及的代码仅用于个人研究与讨论，并不会对网…...
uni-app：实现点击按钮，进行数据累加展示（解决数据过多，导致出错）
效果 代码 核心代码 一、标签显示 <!-- 加载更多 --> <view class"load_more" v-if"info.length > pageNum * pageSize" tap"loadMore">加载更多 </view> v-if"info.length > pageNum * pageSize"…...
群晖6.X便捷的安装cpolar内网穿透
群晖6.X便捷的安装cpolar内网穿透 文章目录 群晖6.X便捷的安装cpolar内网穿透前言1. 下载cpolar的群晖套件1.1 打开群晖套件中心1.2 选择“手动安装”1.3 选择下载cpolar套件位置 2. 打开cpolar的Web-UI界面3. 注册会员 前言 随着硬件设备和软件技术的发展，以及数据…...
ffmpeg 4.4版本对MP4文件进行AES-CTR加密，和流式加密
对于ffmpeg的AES-CTR加密有两种方式，一个是普通的整个视频做加密，另一个是对视频做切片处理，然后进行加密。 一、对于普通的加密方式 直接使用下面的命令就行 ffmpeg -i animal.mp4 -vcodec copy -acodec copy -encryption_scheme cenc-aes…...
软件测试基础篇——Docker
1、docker技术概述 docker描述：docker是一项虚拟化的容器技术（类似于虚拟机），docker技术给使用者提供一个平台，在该平台上可以利用提供的容器，对每一个应用程序进行单独的封装隔离，每一个应用程…...
MySQL刷题遇到的盲点（五）窗口函数
窗口函数 语法： <窗口函数> over (partition by <用于分组的列名>order by <用于排序的列名>) partition by：用来对表分组（ partition 子句可以省略，省略就是不指定分组） order by：是…...
【java】基础——多态
多态基本知识思维导图 多态的代码实现，注意父类对象引用指向子类对象引用（向上转型）的方法，父类就可以调用子类重写的方法和派生的方法，但不能调用子类特有的方法： class Animal {public void makeSound()…...
多模态RAG：让AI看懂图也能读懂话
不只是文字，还能“看图说话” 你有没有想过，AI不仅能读文字，还能看图、听声音，甚至把它们串起来理解？这背后就有“多模态RAG”的功劳。传统RAG（检索增强生成）主要处理文本——你问一个问题&…...
Vite项目静态资源复制终极指南：vite-plugin-static-copy插件实战详解
Vite项目静态资源复制终极指南：vite-plugin-static-copy插件实战详解 在现代化前端工程中，静态资源的高效管理往往决定着项目的可维护性和扩展性。当项目需要支持多主题切换、多环境部署或复杂资源分发时，如何在构建流程中智能处理静态文件就…...
告别目标检测框！用ALBEF和ViT-BERT轻松搞定多模态图文匹配（附代码实战）
无需目标检测框的跨模态革命：ALBEF实战图文匹配新范式 当我在去年尝试构建一个电商图文检索系统时，最头疼的不是模型调参，而是处理那些密密麻麻的目标检测框标注——每个商品都要精确标注位置和属性，团队为此投入了三周时间却只完…...
低查重黑科技！AI教材生成工具，快速编写高质量教材不再愁！
教材修改与AI工具的引入 教材的初步草稿终于完成，但在修改和优化的过程中，真是让人感到“疲惫不堪”！通读全文，寻找逻辑上的漏洞和知识点的失误，确实耗费时间。调整一个章节的框架，往往会影响到后面的多个…...
如何三步搞定macOS安装包下载：Download Full Installer终极指南
如何三步搞定macOS安装包下载：Download Full Installer终极指南 【免费下载链接】DownloadFullInstaller macOS application written in SwiftUI that downloads installer pkgs for the Install macOS Big Sur application. 项目地址: https://gitcode.com/gh_mi…...
如何为企业级AI应用构建高效数据管道：实战解决方案提升80%内容处理效率
如何为企业级AI应用构建高效数据管道：实战解决方案提升80%内容处理效率 【免费下载链接】reader Convert any URL to an LLM-friendly input with a simple prefix https://r.jina.ai/ 项目地址: https://gitcode.com/GitHub_Trending/rea/reader Jina Reade…...
COMSOL模拟注浆过程中浆液在多孔介质和裂隙中的流动与粘度时变特性
COMSOL注浆（ [1]comsol模拟随机裂隙注浆，浆液在多孔介质和裂隙中扩散，考虑浆液粘度时变性。 [2]浆液在多孔介质和裂隙中流动。 裂隙为浆液流动的优势通道，明显快与无裂隙的基质通道。 注：本算例考虑浆液粘度的随距离改…...
Qwen3-4B推理费用高？按需计费部署方案节省40%成本
Qwen3-4B推理费用高？按需计费部署方案节省40%成本 你是不是也遇到过这样的情况：刚把Qwen3-4B-Instruct-2507模型跑起来，还没开始正式用，账单就悄悄涨了一截？GPU资源一直挂着、空转着、发热着，但实际调用量…...
TVA时代企业视觉检测核心痛点突破系列（1）
本系列文章深入剖析了传统视觉检测模式面临的七大核心痛点：精度极限、效率瓶颈、标准不一、职业疲劳、数据黑盒、复杂缺陷和职业天花板。系统阐述了AI智能体视觉检测系统（TVA）如何以其“主动感知、认知决策、持续学习”的智能体特性ÿ…...
Folcolor：用14种色彩重新定义Windows文件管理的艺术
Folcolor：用14种色彩重新定义Windows文件管理的艺术 【免费下载链接】Folcolor Windows explorer folder coloring utility 项目地址: https://gitcode.com/gh_mirrors/fo/Folcolor 你是否曾在成百上千个黄色文件夹中迷失方向？是否曾花费宝贵时间…...