SpringBoot+Vue实现增删改查

本文详细介绍了如何使用Vue.js前端框架和SpringBoot后端框架,结合Element UI和JQuery,实现数据的增删改查和分页功能。从创建项目、配置依赖、构建工程结构,到数据库操作和接口实现,再到前端页面的展示,一步步展示了整个开发过程。最后,页面实现了与数据库的实时交互,具备完整的CRUD操作和分页查询功能。

项目简述:一个小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接口,完成与数据库的交互

评论 10
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值