项目简述：一个小Demo，这是一个实现了数据的增删改查和分页功能的页面
所用技术：
前端——Vue+Element+JQuery
后端——SpringBoot+Springdata jpa
项目流程：
1、创建项目
选择Spring Initializr，确定项目的名称、位置、依赖、域名、SDK等属性
注意：初学者SDK和JDK不要选择太高了，避免出现一些不必要的BUG或者未了解新的特性
点击Next，可以设置Spring Boot版本，同理不要设置的太高了。
同时，在此页面可以导入依赖，本次项目只需要导入三个包：Spring Web——spring框架的核心类；Spring Data JPA——整合数据库操作；MYSQL Driver——数据库驱动
2、导入自己的本地依赖
导入完成就OK了
3、构建工程结构
SpringBoot 项目一般外层只有两个文件，pom.xml文件 和src文件夹。
pom.xml文件的内容是Spring的一些依赖配置
src文件夹的内容包括项目的大致结构，点开src文件夹里面包含main文件夹，点开main文件夹是java和resource文件夹。其中java里保存的spring后台的框架，resource中有static文件夹是存放静态页面的地方，application.yml用于连接数据库。
简单介绍下spring框架各个部件的功能：
SpringCrudApplication：它是Spingboot的一个启动类
common：它是一个通用配置文件夹里面包含Result（一个返回json数据的包装类）和WebMvcConfig（用于配置跨域访问）
controller：控制层，控制业务逻辑
service：业务层，控制业务
dao：持久层，主要用于数据库交互
entity：实体层，数组库在项目中的类
4、创建数据库
创建一个数据库表
给表中添加一些数据
5、实现CRUD功能
框架和数据库表都搭建好了之后，接下来就可以开始实现后台的增删改查了。
(1)首先实现一个与我们创建的表对应的entity实体类。注意，实体类中的每一个字段都要与数据库表的字段对应
设置实体类中的属性，让属性与数据库中的表属性一一对应，并且实现每一个属性的getter和setter方法。
（2）配置dao接口，完成与数据库的交互
（3）实现Service类
在Spring data JPA中集成了很多操作数据库的方法，我们可以直接拿来使用。
先创建一个Service类，给一个Service注解
然后倒入数据库接口
分别实现增删改查的方法：
新增和修改：
删除：
查询：
分页查询:
自己实现的模糊查询方法：
6、实现后台接口
如果前端要访问后台，那么需要通过接口来拿到访问数据，通过接口的url来进行操作
创建Controller类，作为接口访问层
引入userService
新增用户
更新用户
删除用户
根据id查询
根据用户名模糊查询
7、实现前端的页面
后台的工作已经大致完成了，接下来就来完成前端的页面的展示了.
将前端框架组件导入到static文件夹
在index.html页面完成页面。
以下是index.html代码展示：
<!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="6" style="margin-bottom: 10px">
<el-button type="primary" @click="add">新增</el-button>
<el-input v-model="name" style="width: 70%" @keyup.enter.native="loadTable(1)"></el-input>
</el-col>
</el-row>
<el-table
:data="page.content"
stripe
border
style="width: 100%">
<el-table-column
prop="name"
label="用户名"
>
</el-table-column>
<el-table-column
prop="age"
label="年龄"
width="180">
</el-table-column>
<el-table-column
prop="sex"
label="性别">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column
prop="phone"
label="电话">
</el-table-column>
<el-table-column
fixed="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-pagination
layout="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-dialog
title="用户信息"
: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-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',
data: {
page: {},
name: '',
pageNum: 1,
pageSize: 8,
dialogVisible: false,
form: {}
},
created() {
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);
})
} else {
// 新增
$.ajax({
url: '/user',
type: 'post',
contentType: 'application/json',
data: data
}).then(res => {
this.dialogVisible = false;
this.loadTable(1);
})
}
},
del(id) {
$.ajax({
url: '/user/' + id,
type: 'delete',
contentType: 'application/json'
}).then(res => {
this.loadTable(1);
})
}
}
})
</script>
</body>
</html>
项目展示：
该页面实现了对数据的添加，删除，更新，查询以及分页的功能。同时也与数据库建立了实时的更新关系
这样这个增删改查的小Demo就完成了！文章来源：https://www.toymoban.com/news/detail-430759.html
结语：坚定目标，日日精进，必有所成。共勉！ ！文章来源地址https://www.toymoban.com/news/detail-430759.html
到了这里，关于SpringBoot+Vue实现增删改查的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
