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代码展示：

    
    
    
    



    
用户信息表

    
        
            新增
            
        
    

    
        
        
        
        
        
        
        
        
        
        
        
            
        
    
    
        
        
    

    
        
            
                
            
            
                
            
            
                男
                女
            
            
                
            
            
                
            
        
        
            取 消
            确 定
        
    

项目展示：

 该页面实现了对数据的添加，删除，更新，查询以及分页的功能。同时也与数据库建立了实时的更新关系

这样这个增删改查的小Demo就完成了！

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