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()…...
XML Group端口详解
在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...
微信小程序之bind和catch
这两个呢，都是绑定事件用的，具体使用有些小区别。 官方文档： 事件冒泡处理不同 bind：绑定的事件会向上冒泡，即触发当前组件的事件后，还会继续触发父组件的相同事件。例如，有一个子视图绑定了b…...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 （一）概念解析 TRS（Total Return Swap）收益互换是一种金融衍生工具，指交易双方约定在未来一定期限内，基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径：src/utils/timer.ts 完整代码： import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
C++使用 new 来创建动态数组
问题： 不能使用变量定义数组大小 原因： 这是因为数组在内存中是连续存储的，编译器需要在编译阶段就确定数组的大小，以便正确地分配内存空间。如果允许使用变量来定义数组的大小，那么编译器就无法在编译时确定数组的大…...
20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码，而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库，可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画，可以包含在你的网页或应用项目中。 3.An…...
搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1）准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2）服务端安装软件：bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...
Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换
目录 关键点 技术实现1 技术实现2 摘要： 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式（自动驾驶、人工驾驶、远程驾驶、主动安全），并通过实时消息推送更新车…...