SpringBoot+Vue实现增删改查 |
您所在的位置：网站首页 › vue分页功能实现axios › SpringBoot+Vue实现增删改查 |
SpringBoot+Vue实现增删改查
|
项目简述：一个小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代码展示： 用户信息 用户信息表 新增 男 女 取 消 确 定 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); }) } } })项目展示：
该页面实现了对数据的添加，删除，更新，查询以及分页的功能。同时也与数据库建立了实时的更新关系 这样这个增删改查的小Demo就完成了！ 结语：坚定目标，日日精进，必有所成。共勉！ ！ |
【本文地址】