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()…...
stress 服务器压力测试的工具学习
一、stress 工具介绍 tress 是一种工具，可以对符合 POSIX 标准的操作系统施加可配置数量的 CPU、内存、I/O 或磁盘压力，并报告其检测到的任何错误。 stress 不是一个基准测试。它是由系统管理员用来评估其系统扩展性的工具，由内核程序员用来…...
Framework开发之IMS逻辑浅析1--关键线程及作用
关键线程:EventHub,InputReader,InputDispatcher EventHub: 由于Android继承Linux,Linux的思想是一切皆文件,而输入的类型不止一种(触碰，写字笔，键盘等)，每种类型都对应一种驱动设备，而每个硬件驱动设备又对应Linux的一个目录文件…...
矩阵详解：从基础概念到实际应用
矩阵详解：从基础概念到实际应用 目录 矩阵的基本概念矩阵的类型矩阵运算特殊矩阵矩阵的逆与伴随矩阵的秩与等价分块矩阵矩阵的应用 矩阵知识体系思维导图 mindmaproot((矩阵))基本概念定义mn数表元素aij矩阵记号基本术语行数和列数方阵与非方阵矩阵相等矩阵类型…...
PublishSubject、ReplaySubject、BehaviorSubject、AsyncSubject的区别
python容易编辑，因此用pyrx代替rxjava3做演示会比较快捷。 pyrx安装命令： pip install rx 一、Subject（相当于 RxJava 的 PublishSubject） PublishSubject PublishSubject 将对观察者发送订阅后产生的元素，而在订阅前…...
pandas 字符串存储技术演进：从 object 到 PyArrow 的十年历程
文章目录 1. 引言2. 阶段1：原始时代（pandas 1.0前）3. 阶段2：Python-backed StringDtype（pandas 1.0 - 1.3）4. 阶段3：PyArrow初次尝试（pandas 1.3 - 2.1）5. 阶段4…...
Go深入学习延迟语句
1 延迟语句是什么 编程的时候，经常会需要申请一些资源，比如数据库连接、文件、锁等，这些资源需要再使用后释放掉，否则会造成内存泄露。但是编程人员经常容易忘记释放这些资源，从而造成一些事故。 Go 语言直接在语言层…...
【大模型】【推荐系统】LLM在推荐系统中的应用价值
文章目录 A 论文出处B 背景B.1 背景介绍B.2 问题提出B.3 创新点B.4 两大推荐方法 C 模型结构C.1 知识蒸馏（训练过程）C.2 轻量推理（部署过程） D 实验设计E 个人总结 A 论文出处 论文题目：SLMRec：Distilling…...
PHP环境极速搭建
一、为什么选择phpStudy VS Code？ 作为一名初次接触PHP的开发者，我深知环境配置往往是学习路上的第一道门槛。传统PHP环境搭建需要手动配置Apache/Nginx、PHP解释器、MySQL等多重组件，光是处理版本兼容性和依赖问题就可能耗费半天时间——这…...
一.设计模式的基本概念
一.核心概念 对软件设计中重复出现问题的成熟解决方案，提供代码可重用性、可维护性和扩展性保障。核心原则包括: 1.1. 单一职责原则 定义：一个类只承担一个职责，避免因职责过多导致的代码耦合。 1.2. 开闭原则 定义…...
预览pdf（url格式和blob格式）
<template><div class"pdf-container"><div v-if"loading" class"loading-state"><a-spin size"large" /></div><div v-else-if"error" class"loading-state">加载失败&…...