SpringDataJPA+SpringBoot+Swagger2+vue.js前后端分离实现基本CURD

Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue.js官网 ==> https://cn.vuejs.org/

vue.js菜鸟教程学习文档 ==> https://www.runoob.com/vue2/vue-tutorial.html

Swagger 官网 ==> https://swagger.io/

Swagger 2简介

它可以轻松的整合到Spring Boot中，并与Spring MVC程序配合组织出强大RESTful API文档。它既可以减少我们创建文档的工作量，同时说明内容又整合入实现代码中，让维护文档和修改代码整合为一体，可以让我们在修改代码逻辑的同时方便的修改文档说明。另外Swagger2也提供了强大的页面测试功能来调试每个RESTful API。

话不多说开始撸码

先导入pom.xml依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.5.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.zhaolei</groupId>
    <artifactId>jpa-swagger-vue</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>jpa-swagger-vue</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
		
		<!--下面两个是swagger2所需要的依赖-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.8.0</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.8.0</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

（注意导入swagger2相关的依赖）
pojo实体类

package com.zhaolei.jpaswaggervue.pojo;

import lombok.Data;

import javax.persistence.*;
import java.io.Serializable;

/**
 * @author 15579
 * 2019/6/3 14:09
 * 文件说明：Student实体类
 */
@Data
@Table
@Entity //数据库没有此实体类对应的表就会自动生成
public class Student implements Serializable {
    //自动增长
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

    @Column
    private String name;

    @Column
    private String sex;
    
    @Column
    private  Integer gradeId;
}

Dao层

package com.zhaolei.jpaswaggervue.dao;

import com.zhaolei.jpaswaggervue.pojo.Student;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
import org.springframework.data.jpa.repository.Query;
import org.springframework.stereotype.Repository;

/**
 * @author 15579
 * 2019/6/3 14:21
 * 文件说明：StudentDao层
 */
@Repository
public interface StudentDao extends JpaRepository<Student,Integer>, JpaSpecificationExecutor<Student>{
    //nativeQuery =true 表示这是原生SQL
    @Query(value = "SELECT * from student where `name` like concat('%',?,'%')",nativeQuery = true)
    Page<Student> findLikeNameByPage(String name, Pageable pageable);
}

Service层

package com.zhaolei.jpaswaggervue.service;

import com.zhaolei.jpaswaggervue.pojo.Student;
import org.springframework.data.domain.Page;

import java.util.List;

/**
 * @author 15579
 * 2019/6/4 14:26
 * 文件说明：
 */
public interface StudentService {
    /**
     * 新增学生信息
     * @param student
     * @return
     */
    Student save(Student student);

    /**
     * 修改
     * @param student
     * @return
     */
    Student update(Student student);

    /**
     * 删除学生
     * @param id
     */
    void deleteStu(Integer id);

    /**
     * 分页查询
     * @param pageNum
     * @param pageSize
     * @return
     */
    Page<Student> findByPage(Integer pageNum, Integer pageSize, Student student);

    /**
     * 根据编号查询
     * @param id
     * @return
     */
    Student findStudentById(Integer id);
}

impl层

package com.zhaolei.jpaswaggervue.service.impl;

import com.zhaolei.jpaswaggervue.dao.StudentDao;
import com.zhaolei.jpaswaggervue.pojo.Student;
import com.zhaolei.jpaswaggervue.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @author 15579
 * 2019/6/4 14:27
 * 文件说明：
 */
@Service
public class StudentServiceImpl implements StudentService {
    @Autowired
    private StudentDao studentDao;

    /**
     * 新增学生信息
     *
     * @param student
     * @return
     */
    @Override
    public Student save(Student student) {
        return studentDao.save(student);
    }

    /**
     * 修改
     *
     * @param student
     * @return
     */
    @Override
    public Student update(Student student) {
        return studentDao.save(student);
    }

    /**
     * 删除学生
     *
     * @param id
     */
    @Override
    public void deleteStu(Integer id) {
        studentDao.deleteById(id);
    }

    /**
     * 分页查询
     *
     * @param pageNum
     * @param pageSize
     * @return
     */
    @Override
    public Page<Student> findByPage(Integer pageNum, Integer pageSize,Student student) {
        if(pageNum==null||pageNum==0){
            pageNum=1;
        }
        if(pageSize==null||pageSize==0){
            pageSize=2;
        }
//        第一种方式模糊查询并且分页
//        ExampleMatcher matcher = ExampleMatcher.matching()
//                .withMatcher("name", ExampleMatcher.GenericPropertyMatchers.startsWith())//模糊查询匹配开头，即{username}%
//                .withIgnorePaths("sex")
//                .withIgnorePaths("id");
//        Example<Student> example = Example.of(student, matcher);

        PageRequest of=PageRequest.of(pageNum-1,pageSize);
        //第一种方式
        // Page<Student> page=studentDao.findAll(example,of);
        //第二种方式模糊查询并且分页
        Page<Student> page=studentDao.findLikeNameByPage(student.getName()==null?"":student.getName(),of);
        return page;
    }

    /**
     * 根据编号查询
     *
     * @param id
     * @return
     */
    @Override
    public Student findStudentById(Integer id) {
        return studentDao.findById(id).get();
    }
}

controller层

package com.zhaolei.jpaswaggervue.controller;

import com.zhaolei.jpaswaggervue.pojo.Student;
import com.zhaolei.jpaswaggervue.service.StudentService;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

/**
 * @author 15579
 * 2019/6/3 14:28
 * 文件说明：Student控制层
 */
@RestController
@Api(value = "Swagger2 api 注释 Student控制层")
public class StuController {
    @Autowired
    private StudentService studentService;

    //根据条件分页查询
    @GetMapping("/findByPage")
    @ApiOperation(value = "分页查询",notes = "根据姓名模糊查询并分页")
    public Object findByPage(Integer pageNum, Integer pageSize, Student student){
        if(pageNum==null||pageNum<=0){
            pageNum=1;
        }
        Page<Student> page = studentService.findByPage(pageNum, pageSize,student);
       return  page;
    }

    //根据ID删除学生
    @DeleteMapping("/deleteStu")
    @ApiOperation(value = "删除",notes = "根据ID删除学生")
    public  int delteStu(@RequestParam("id") Integer id){
        System.out.println(id);
        try {
            studentService.deleteStu(id);
            return 1;
        }catch (Exception e){
            return 0;
        }
    }

    //修改学生信息
    @PutMapping("/updateStu")
    @ApiOperation(value = "修改",notes = "修改学生信息")
    public  Object updateStu(@RequestBody Student student){
        Student updStudent = studentService.update(student);
        return  updStudent;
    }

    //新增学生信息
    @PostMapping("/addStu")
    @ApiOperation(value = "新增",notes = "新增学生信息")
    public Object addStu(@RequestBody Student student){
        System.out.println(student.getName());
        Student save = studentService.save(student);
        return  save;
    }


    //跳转至编辑页面
    @GetMapping("/gotoEdit")
    @ApiOperation(value = "跳转至编辑页面",notes = "根据编号判断是修改还是新增")
    public String gotoEdit(Integer id,Model model){
        if(id!=null){
            //根据ID查询学生信息并显示在页面
            Student student = studentService.findStudentById(id);
            model.addAttribute("stu",student);
        }
        return "edit";
    }
}

然后编写swagger2的配置类

package com.zhaolei.jpaswaggervue.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.zhaolei.jpaswaggervue.controller"))//改成你项目的controller层路径
                .paths(PathSelectors.any())
                .build();
    }

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

注意：需要在SpringBoot项目的应用程序入口类中开启swagger2如下所示

package com.zhaolei.jpaswaggervue;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

@SpringBootApplication
@EnableSwagger2      //开启swagger2 api接口文档
public class JpaSwaggerVueApplication {
    public static void main(String[] args) {
        SpringApplication.run(JpaSwaggerVueApplication.class, args);
    }
}

让后就可以启动我们的项目我的端口号是8080：浏览器输入
http://localhost:8080/swagger-ui.html
然后会出现如下页面就代表你的swagger2 ui 的api接口已经生成好了

后端代码基本已经编写完毕接下来使用写前段页面接收后端返回的json数据
我前段使用的框架是vue.js 使用的软件是HbuilderX

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	<body>
		<div id="app">
			<label>姓名：</label>
			<input type="text" name="likeName" v-model="likeName" />
			<input type="button" v-on:click="findByPage(1)" value="查询"  />
			<table border="1" cellspacing="1" cellpadding="20">
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年级</th>
					<th>操作</th>
				</tr>
				<template v-for="stu in stuList">
					<tr>
						<td>{{stu.id}}</td>
						<td>{{stu.name}}</td>
						<td>{{stu.sex}}</td>
						<td>{{stu.gradeId}}</td>
						<td>
							<a href="javascript:void(0)" v-on:click="del(stu.id)">删除</a>
							<a href="javascript:void(0)" v-on:click="edit(stu)">编辑</a>
						</td>
					</tr>
				</template>
			</table>
			<template>
				<table>
					<tr>
						<td>
							编号:<input type="text" name="id" v-model="student.id" placeholder="编号无需自己填写" readonly="readonly" />
						</td>
						<td>
							姓名:<input type="text" name="name" v-model="student.name" />
						</td>
						<td>
							性别:<input type="text" name="sex" v-model="student.sex" />
						</td>
						<td>
							年级:<input type="text" name="gradeId" v-model="student.gradeId" />
						</td>
						<td>
							<input type="button" value="保存" v-on:click="add(student)" />
						</td>
					</tr>
				</table>
			</template>
			<a href="javascript:void(0)" v-on:click="findByPage(1)">首页</a>
			<a href="javascript:void(0)" v-on:click="findByPage(page.number)">上一页</a>
			<a href="javascript:void(0)" v-on:click="findByPage(page.number+2)">下一页</a>
			<a href="javascript:void(0)" v-on:click="findByPage(page.totalPages)">尾页</a>
			当前第<span v-text="page.number+1"></span>页/共{{page.totalPages}}页
		</div>
	</body>
		<!-- vue.js代码 -->
		<script>
		var app = new Vue({
			el: "#app",
			data: {
				likeName:"",
				student: {
					id: "",
					name: "",
					sex: "",
					gradeId: ""
				},
				stuList: [],
				page:{}
			},
			methods: {
				findByPage: function(pageNum) {
					var _this = this;
					var likeName=this.likeName;
					if(pageNum!=null||pageNum!=''){
						if(pageNum>_this.page.totalPages){
							pageNum=_this.page.totalPages
						}
					}
					axios.get('http://localhost:8080/findByPage', {
							params: {
								pageNum: pageNum,
								name: likeName
							}
						})
						.then(function(response) {
							console.log(response.data)
							_this.page=response.data;
							_this.stuList = response.data.content;
						})
						.catch(function(error) { // 请求失败处理
							console.log(error);
						});
				},
				del: function(id) {
					var _this = this;
					console.log(id)
					let delId = id;
					axios.delete('http://localhost:8080/deleteStu', {
							params: {
								id: delId
							}
						})
						.then(function(response) {
							console.log(response.data)
							if (response.data == 1) {
								_this.findByPage();
								alert("删除成功");
							}
						})
						.catch(function(error) { // 请求失败处理
							console.log(error);
						});
				},
				add: function(student) {
					var _this = this;
					console.log(student.id);
					if (student.id != null&&student.id !='') {
						var stu = JSON.stringify(student);
						axios.put('http://localhost:8080/updateStu',stu, {
								headers: {
									'Content-Type':'application/json;charset=utf-8'
								}
							})
							.then(function(response) {
								alert("修改成功")
								_this.findByPage();
								_this.student.id=null;
								_this.student.name=null;
								_this.student.sex=null;
								_this.student.gradeId=null;
							})
							.catch(function(error) { // 请求失败处理
								console.log(error);
							});

					} else {
						axios.post('http://localhost:8080/addStu',student, {
								headers: {
									'Content-Type':'application/json;charset=utf-8'
								}
							})
							.then(function(response) {
								alert("新增成功")
								_this.findByPage();
								_this.student.name=null;
								_this.student.sex=null;
								_this.student.gradeId=null;
							})
							.catch(function(error) { // 请求失败处理
								console.log(error);
							});
					}
				},
				edit: function(student) {
					this.student = student;
				}
			},
			// 钩子 在Vue创建时就运行
			created: function() {
				this.findByPage();
			}
		})
	</script>
</html>

注意：

对象参数类型JSON化： data:JSON.stringify(object)
头部信息headers：“Content-Type”: “application/json; charset=UTF-8”
controller层中请求方式写为POST
后台controller中获得参数方式：@RequestBody String Object
String转换为json：JSONObject accident=JSONObject.fromObject(newsObject);

保存ctrl+r选择浏览器运行然后会发现页面数据出不来按F12会发现报错

出现这个错误的原因是因为没有考虑到跨域问题，所以还需要在后端SpringBoot项目添加一个解决跨域问题的配置类代码如下：

package com.zhaolei.jpaswaggervue.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    //跨域配置
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            //重写父类提供的跨域请求处理的接口
            public void addCorsMappings(CorsRegistry registry) {
                //添加映射路径
                registry.addMapping("/**")
                        //放行哪些原始域
                        .allowedOrigins("*")
                        //是否发送Cookie信息
                        .allowCredentials(true)
                        //放行哪些原始域(请求方式)
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        //放行哪些原始域(头部信息)
                        .allowedHeaders("*")
                        //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
                        .exposedHeaders("Header1", "Header2");
            }
        };
    }
}

然后重启项目并刷新页面

数据出来了！问题完美解决so easy！打完收功！
最后附上后端git仓库地址：https://gitee.com/riven666/jpa-swagger-vue

Riven^^

发布了26 篇原创文章 · 获赞 12 · 访问量 1万+

私信关注

SpringDataJPA+SpringBoot+Swagger2+vue.js前后端分离实现基本CURD

Vue.js 是什么

linux安装cuda和cudnn

Mellanox网卡开启SR-IOV

模拟手机设备：使用 Playwright 实现移动端自动化测试

全面系统的AI学习路径，帮助普通人也能玩转AI

HTML 00 Tutorial

从零开始：使用 Playwright 脚本录制实现自动化测试

uni-app实现上拉加载

vue3编译优化之“静态提升”

又是一个月-20240513

flask 如何保证返回json有序

MySQL將查詢出的結果insert至新表

MySQL將查詢結果有小數位就保留，如果小數位是0，轉爲整數

使用SpringDataJPA+Thymeleaf完成基本的CRUD+模糊查詢加分頁

SpringDataJPA+SpringBoot+Swagger2+vue.js前後端分離實現基本CURD

SpringBoot整合Redis實現一套CRUD的簡單緩存

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結