SpringBoot+Vue实现增删改查

已于 2022-03-18 22:46:31 修改
阅读量1.1w 收藏 182
点赞数 21
分类专栏： spring 文章标签： vue.js spring boot 后端 数据库 sql
于 2022-03-18 22:43:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CoCo629vanilla/article/details/123572807
版权

项目简述：一个小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就完成了！

结语：坚定目标，日日精进，必有所成。共勉！ ！

Popuessing's Jersey
关注
  • 21
    点赞
  • 踩
  • 182
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
vue+springboot增删改查之改
m0_58877726的博客
11-17 315
在前端提交数据时，后端报异常 org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.reflection.ReflectionException: There is no getter for property named ‘publish_date’ in ‘class com.example.springboot.entity.Book’ 因为一场后半段时说我创建的实体类没有getter方法，所以
Springboot+vue学习——实现增删改查
weixin_44502431的博客
04-14 3290
src文件夹的内容包括项目的大致结构，src文件夹里面包含main文件夹，main文件夹是java和resource文件夹。其中java里保存的spring后台的框架，resource中有static文件夹是存放静态页面的地方，application.yml用于连接数据库。另外，common包含一个通用配置文件夹里面包含Result（一个返回json数据的包装类）和WebMvcConfig（用于配置跨域访问）的配置类。在Spring data JPA中集成了很多操作数据库的方法，我们可以直接拿来使用。
SpringBoot和Vue 实现增删改查、分页查询、模糊查询
qq_45726327的博客
03-07 2003
SpringBoot实现增删改查、分页查询、模糊查询。
springboot+vue 项目中实现增删改查
最新发布
hxy319的博客
05-28 388
最后运行该项目就可以进行数据的增删改查了。
SpringBoot-Vue实现增删改查
m0_62121751的博客
09-30 1111
【代码】SpringBoot-Vue实现增删改查。
SpringBoot+Vue实现CURD(增删改查)
qq_44410220的博客
09-04 2371
SpringBoot+Vue实现CURD(增删改查)
springboot+vue实现增删改查+分页查询
justleavel的博客
09-20 4342
1：首先。创建一个springboot项目，这里我使用以及构建好基本框架的脚手架，打开是这个样子： Result类：已经封装好了三种返回类型的包装类：code，msg，data 2：创建数据库叫mytest(可以自己取名字) CREATE TABLE `user` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '序号', `name` varchar(20) COLLATE utf8mb4_unicode_ci DEFAULT NULL COM
springboot+vue开发后台增删改查
m0_63040701的博客
07-20 651
【代码】后台用户管理的源码来啦。
基于SpringBoot+Vue实现增删改查和分页查询DEMO（源码+数据库)
04-17
springboot项目,基于SpringBoot+Vue实现增删改查分页DEMO（源码+数据库) 技术栈 数据库：MySQL 后端框架：SpringBoot+Spring Data JPA 前端框架：Vue-ElementUI
springboot+vue+element增删改查Demo
05-24
springboot+vue+element增删改查Demo 集成了： 1. ​ restful接口定义 2. ​ 增删改查定义，路径参数定义 3. ​ 跨域处理 4. ​ 参数校验 5. ​ 异常拦截 6. ​ swagger文档 7. ​ 测试用例 8. ​ logback...
springboot+vue+bootstrap实现用户增删改查
12-19
在本项目中，"springboot+vue+bootstrap"的组合被用来实现一个基本的用户管理功能，包括用户信息的增加、删除、修改和查询。这是一个常见的Web应用开发场景，涉及后端服务处理与前端界面展示的协同工作。下面将详细...
SpringBoot+Thymeleaf+SSM+Vue.js实现简单的增删改查
01-27
SpringBoot配置SSM实现简单的增删改查Demo，SQL文件导入可直接运行，用于学习。
springboot+vue-cli脚手架开发-实现用户增删改查（前端脚手架代码）
12-19
springboot+vue-cli脚手架开发-实现用户增删改查（前端脚手架代码）
springboot+vue+bootstrap+mysql实现用户增删改查
12-09
springboot+vue+bootstrap+mysql实现用户增删改查，使用后台springboot技术，前端使用vue和bootstrap，数据库是mysql
springboot+vue+elementui实现增删改查和分页查询
09-20
在本项目中，"springboot+vue+elementui实现增删改查和分页查询"是一个基于现代Web技术栈的简单但实用的应用示例。它整合了Spring Boot、Vue.js和Element UI，这三个组件分别在后端、前端和UI设计方面发挥关键作用，...
springboot+vue的增删改查，前后端使用axios
weixin_45954137的博客
08-09 891
Springboot+vue+axios 增删改查案例
Vue3学习(二)集成ElementPlus实现增删改查
m0_64393446的博客
06-25 3055
表格新增弹窗导入包装数据所需的组件定义变量点击新增数据时功能实现。
基于Vue3 + Element Plus 的后台管理系统详细教程
热门推荐
一步一个脚印，踏实努力，向着目标前进
06-13 2万+
以上是使用 Vue3 和 Element Plus 创建后台管理系统的基本步骤，但如果你想要实现一个实用的后台管理系统，还需要实现登录、权限管理、数据增删改查等功能。Vue 3 中最大的新特性是引入了 Composition API，它允许开发人员按照逻辑相关的方式组织代码，可以更好地复用组件和处理复杂的逻辑。在 data 中声明登录所需参数，初始化表单验证规则并在 method 中实现表单的提交、参数的验证与登录状态的切换。使用 Element Plus 提供的表格、表单等组件实现数据的增删改查。
使用springboot，mybatis-plus和vue的简单增删改查
m0_64600800的博客
09-30 950
使用springboot，mybatis-plus和vue的简单增删改查
springboot＋vue实现增删改查
05-04
Spring Boot和Vue.js可以很好地搭配使用，实现前后端分离的Web应用程序。以下是一个简单的例子，演示如何使用Spring Boot和Vue.js实现增删改查功能。 1. 创建一个Spring Boot项目，包含Spring Web和Spring Data JPA依赖。创建一个实体类和一个Repository接口，用于操作数据库。 ```java @Entity public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; private String email; // 省略getter和setter } @Repository public interface UserRepository extends JpaRepository<User, Long> { } ``` 2. 创建一个RESTful API，使用Spring MVC和Spring Data REST实现，用于获取、创建、更新和删除用户。 ```java @RestController @RequestMapping("/api/users") public class UserController { @Autowired private UserRepository userRepository; @GetMapping public List<User> findAll() { return userRepository.findAll(); } @PostMapping public User create(@RequestBody User user) { return userRepository.save(user); } @PutMapping("/{id}") public User update(@PathVariable Long id, @RequestBody User user) { user.setId(id); return userRepository.save(user); } @DeleteMapping("/{id}") public void delete(@PathVariable Long id) { userRepository.deleteById(id); } } ``` 3. 创建一个Vue.js应用程序，使用axios库与后端进行通信。创建一个组件，用于显示用户列表，以及一个表单组件，用于创建或更新用户。 ```html <template> <div> <table> <tr> <th>ID</th> <th>Name</th> <th>Email</th> <th>Actions</th> </tr> <tr v-for="user in users" :key="user.id"> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.email }}</td> <td> <button @click="edit(user)">Edit</button> <button @click="remove(user)">Remove</button> </td> </tr> </table> <form v-if="editing" @submit.prevent="save"> <input type="text" v-model="user.name" placeholder="Name"> <input type="email" v-model="user.email" placeholder="Email"> <button type="submit">{{ editing.id ? 'Update' : 'Create' }}</button> </form> </div> </template> <script> import axios from 'axios'; export default { data() { return { users: [], user: {}, editing: false, }; }, methods: { async fetchUsers() { const { data } = await axios.get('/api/users'); this.users = data; }, async save() { if (this.editing.id) { await axios.put(`/api/users/${this.editing.id}`, this.user); } else { await axios.post('/api/users', this.user); } this.editing = false; this.user = {}; await this.fetchUsers(); }, async remove(user) { await axios.delete(`/api/users/${user.id}`); await this.fetchUsers(); }, edit(user) { this.editing = true; this.user = { ...user }; }, }, async mounted() { await this.fetchUsers(); }, }; </script> ``` 4. 在Spring Boot应用程序中配置静态资源路径，将Vue.js应用程序打包为静态资源，并在Spring Boot应用程序中提供静态资源服务。 ```properties spring.mvc.static-path-pattern=/static/** spring.resources.static-locations=classpath:/static/ ``` 5. 打包Vue.js应用程序，并将生成的dist目录复制到Spring Boot应用程序的静态资源目录中。 6. 运行Spring Boot应用程序，访问http://localhost:8080/static/index.html即可看到用户列表和表单。现在可以使用Vue.js应用程序与后端进行交互，实现增删改查功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值