用springboot+springdata-jpa+vue实现简单的前后端分离增删改查

用springboot+springdata-jpa+vue实现简单的前后端分离增删改查

话不多说 先上pom文件

    org.springframework.boot
    spring-boot-starter-parent
    2.1.5.RELEASE
     


com.changan
springboot_vue
0.0.1-SNAPSHOT
springboot_vue
Demo project for Spring Boot


    1.8



    
        org.springframework.boot
        spring-boot-starter-web
    

    
        org.springframework.boot
        spring-boot-starter-data-jpa
    

    
        org.springframework.boot
        spring-boot-devtools
        runtime
        true
    
    
    
        mysql
        mysql-connector-java
        8.0.13
    
    
    
        io.springfox
        springfox-swagger2
        2.7.0
    
    
        io.springfox
        springfox-swagger-ui
        2.7.0
    
    
        org.projectlombok
        lombok
        true
    
    
        org.springframework.boot
        spring-boot-starter-test
        test
    

    
    
        io.springfox
        springfox-swagger2
        2.7.0
    
    
        io.springfox
        springfox-swagger-ui
        2.7.0
    

*swargger是自动生成接口文档 便于前台得知接口的一些信息 如参数，返回数据等等
进入接口文档：http://localhost:8080/swagger-ui.html#
进入swagger后：
配置config层

代码奉上：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

@Configuration
@EnableSwagger2
public class SwaggerConfig {
    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.changan.springboot_vue.controller"))
                .paths(PathSelectors.any())
                .build();
    }

private ApiInfo apiInfo() {
    return new ApiInfoBuilder()
            .title("Spring Boot中使用Swagger2实现前后端分离开发")
            .description("此项目只是练习如何实现前后端分离开发的小Demo")
            .termsOfServiceUrl("https://blog.csdn.net/ca1993422")
            .contact("聂长安")
            .version("1.0")
            .build();
}
}

springdata-jpa是一个对于简易增删改查极方便的一个框架

数据库无需建立表 依靠javabean即可自动生成数据表 具体请看咱们的实体类：

import lombok.Data;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Data
@Entity
public class Student {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

    private String name;

    private String sex;

    private Integer gradeId;
}

同时springdata-jpa也不需要传统springboot的mybatis 自带简单的增删改查语句dao层接口继承org.springframework.data.jpa.repository.JpaRepository;接口即可实现
我们可以看到JpaRepository接口中自带了许多增删改查的方法
dao层代码:

package com.changan.springboot_vue.dao;

import com.changan.springboot_vue.entity.Student;
import org.springframework.data.jpa.repository.JpaRepository;

public interface StudentDao extends JpaRepository {

}

service层普通调用dao层接口即可使用

control层的接口可以通过swagger自动生成接口文档

 package com.changan.springboot_vue.controller;

import com.changan.springboot_vue.entity.Student;
import com.changan.springboot_vue.service.StudentService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;
//https://www.kancloud.cn/yunye/axios/234845
@RestController
@RequestMapping("/student")
@Api(value = "swagger ui 注释 api 级别")
public class StudentController {

    @Autowired
    private StudentService studentService;

    @GetMapping("/getAll")
    @ApiOperation(value = "查询所有学生",notes = "查询所有学生")
    public List getAll(){
        return studentService.getAll();
    }

    @PostMapping("/save")
    public Student save(@RequestBody Student student){
        System.out.println(student.getName());
        return studentService.save(student);
    }

    @PutMapping("/update")
    public Student update(Student student){
        return studentService.update(student);
    }

    @DeleteMapping("delete")
    public int delete(Integer id){
        try {
            studentService.delete(id);
            return 1;
        } catch (Exception e) {
            e.printStackTrace();
            return 0;
        }
    }
}

y欲知前端vue如何渲染页面可见我其他的博客 今天咱们主要讲的是使用axios类似于ajax对数据进行增删改查：

简单的一个查询方法 我们发送请求到http://localhost:8080/student/getAll，然后返回数据到response然后我们通过response.data即可拿到数据
做新增or修改操作时 我们可以将前端的对象转为json传到我们的后台 注意：转json传递对象时一定要标明我们的头部信息：

	headers: {
											"Content-Type": "application/json;charset=utf-8" //头部信息
										}
									}

然后在后台我们还需要一个注解@requestbody 否则我们后台接收不到前台传过去的对象

具体项目可以查看我的码云https://gitee.com/wyjsworkspace/springdatajpa-vue-springboot.git
注：记得新建一个test的mysql数据库！