springboot+springdata-jpa+vue+swagger ui2+axios實現前後端分離一套增刪改查，分頁+解決跨域問題

今天整合了springboot+springdata-jpa+vue+swagger ui2+axios實現前後端分離寫了一套增刪改查，分頁。希望可以給初學者一些幫助。

後端(idea中SpringBoot項目)

配置文件  application.yml

#springboot數據源
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/studentjpa?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
    password: root
    username: root
#配置spring-data-jpa
  jpa:
    show-sql: true   #控制檯輸出sql語句
    database: mysql  #jpa使用的數據庫
    hibernate:
      ddl-auto: update
      naming:
        physical-strategy: org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl

server:
  port: 8081

SpringBoot整合Swagger-ui 引入依賴

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger2</artifactId>
    <version>2.9.2</version>
</dependency>

<!-- https://mvnrepository.com/artifact/io.springfox/springfox-swagger-ui -->
<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger-ui</artifactId>
    <version>2.9.2</version>
</dependency>

SpringdatajpaApplication類

package com.changan.springdatajpa;


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

@SpringBootApplication
/*開啓swaggerUI 的註解*/
@EnableSwagger2
public class SpringdatajpaApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringdatajpaApplication.class, args);
    }
}

entity（實體類）

package com.changan.springdatajpa.entity;

import lombok.Data;

import javax.persistence.*;

@Data
/*對應數據庫中的表*/
@Table(name = "student")
@Entity
public class Student {

    /*Id表示主鍵  主鍵有生成策略GenerationType.IDENTITY*/
    /*GenerationType.AUTO*/
    /*Oracle中是沒有自動增長的 設置SEQUENCE  使用序列進行增長*/
    /*GeneratedValue 自動增長生成的value值*/
    @Id
    @GeneratedValue(strategy= GenerationType.IDENTITY)
    private Integer id;

    @Column(name = "name",columnDefinition = "varchar(25) comment '姓名'")
    private String name;

    @Column
    private String sex;

    private Integer gradeId;
}

Service層(實現層)的接口和類

service接口

package com.changan.springdatajpa.service;


import com.changan.springdatajpa.entity.Student;
import org.springframework.data.domain.Page;

import java.util.List;

public interface StudentService {

    /**
     * 新增學生信息
     * @param student
     * @return
     */
    Student save(Student student);

    /**
     * 查詢所有信息
     * @return
     */
    List<Student> findAll();

    /**
     * 修改學生信息
     * @param student
     * @return
     */
    Student update(Student student);

    /**
     * 刪除學生信息
     * @param id
     */
    void delete(Integer id);

    /**
     * 分頁查詢
     * @param page
     * @param size
     * @return
     */
    Page<Student> findByPage(Integer page,Integer size);

    /**
     * 查詢前兩行
     * @return
     */
    List<Student> findTop();

    /**
     * 根據id查詢
     * @param id
     * @return
     */
    Student findById(Integer id);

    /**
     * 根據姓名模糊查詢
     * @param name
     * @return
     */
    List<Student> findLikeName(String name);

    /**
     * 根據姓名模糊查詢
     * @param name
     * @return
     */
    List<Student> findByName(String name);
}

Impl實現類

package com.changan.springdatajpa.service.impl;

import com.changan.springdatajpa.dao.StudentDao;
import com.changan.springdatajpa.entity.Student;
import com.changan.springdatajpa.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;

@Service
public class StudentServiceImpl implements StudentService {

    @Autowired
    private StudentDao studentDao;


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

    /**
     * 查詢所有信息
     * @return
     */
    @Override
    public List<Student> findAll() {
        return studentDao.findAll();
    }

    /**
     * 修改學生信息
     * @param student
     * @return
     */
    @Override
    public Student update(Student student) {
        Student s = studentDao.save(student);
        return s;
    }

    /**
     * 刪除學生信息
     * @param id
     */
    @Override
    public void delete(Integer id) {
        studentDao.deleteById(id);
    }

    /**
     * 分頁查詢
     * @param page
     * @param size
     * @return
     */
    @Override
    public Page<Student> findByPage(Integer page,Integer size) {
        PageRequest of = PageRequest.of(page, size);
        Page<Student> pages = studentDao.findAll(of);
        return pages;
    }

    /**
     * 查詢前兩行信息
     * @return
     */
    @Override
    public List<Student> findTop() {
        return studentDao.findTop2By();
    }

    /**
     * 根據Id查詢
     * @param id
     * @return
     */
    @Override
    public Student findById(Integer id) {
        return studentDao.findById(id).get();
    }

    /**
     * 根據姓名模糊查詢
     * @param name
     * @return
     */
    @Override
    public List<Student> findLikeName(String name) {
        return studentDao.findByNameContaining(name);
    }

    /**
     * 根據姓名模糊查詢
     * @param name
     * @return
     */
    @Override
    public List<Student> findByName(String name) {
        return studentDao.findByName(name);
    }
}

Dao(數據訪問層)接口

package com.changan.springdatajpa.dao;

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

import java.util.List;

public interface StudentDao extends JpaRepository<Student,Integer> {
    /**
     * 查詢前兩行
     * @return
     */
    List<Student> findTop2By();

    /**
     * 根據姓名模糊查詢
     * @param name
     * @return
     */
    List<Student> findByNameContaining(String name);

    //select * form student where name like %name% or sex='' and gradeId = '';
    //List<Student> findByNameContainingOrSexAndGradeId();

    /**
     * 根據姓名模糊查詢
     * @param name
     * @return
     */
    @Query(value = "select * from Student where name like concat('%',?,'%') ",nativeQuery = true)
    List<Student> findByName(String name);
}

Controller(控制層)類

package com.changan.springdatajpa.controller;

import com.changan.springdatajpa.dao.StudentDao;
import com.changan.springdatajpa.entity.Student;
import com.changan.springdatajpa.service.StudentService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.models.auth.In;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/api")
@Api(value = "swagger ui 註釋 api 級別")
//@Controller+@ResponseBody  以json數據進行返回
public class StudentController{

    @Autowired
    private StudentService studentService;

    @Autowired
    private StudentDao studentDao;

    /*restful風格實現*/
    @ApiOperation(value = "新增學生信息",notes = "新增學生信息")
    @PostMapping("/save")
    //@RequestMapping(method = RequestMethod.POST)
    public Student save(@RequestBody Student student){
        return studentService.save(student);
    }


    @ApiOperation(value = "查詢學生信息",notes = "查詢學生信息")
    @GetMapping("/student")
    public List<Student> findAll(){
        return studentService.findAll();
    }

    @ApiOperation(value = "刪除學生信息",notes = "刪除學生信息")
    @DeleteMapping("delete")
    public int delete(Integer id){
        try {
            studentService.delete(id);
            return 1;
        } catch (Exception e){
            e.printStackTrace();
            return 0;
        }
    }

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

    @ApiOperation(value = "分頁查詢學生信息",notes = "分頁查詢學生信息")
    @GetMapping("/findByPage")
    public Page<Student> findByPage(Integer page,Integer size){
        Page<Student> students = studentService.findByPage(page, size);
        return students;
    }

    @ApiOperation(value = "查詢前兩行學生信息",notes = "查詢前兩行學生信息")
    @GetMapping("/findtop")
    public List<Student> findTop(){
        return studentService.findTop();
    }

    @ApiOperation(value = "根據Id查詢學生信息",notes = "根據Id查詢學生信息")
    @GetMapping("/findById")
    public Student findById(Integer id){
        return studentService.findById(id);
    }

    @ApiOperation(value = "根據姓名查詢學生信息",notes = "根據Id查詢學生信息")
    @GetMapping("/findLikeName")
    public List<Student> findLikeName(String name){
        return studentService.findLikeName(name);
    }

    @ApiOperation(value = "根據姓名查詢學生信息",notes = "根據Id查詢學生信息")
    @GetMapping("/findByName")
    public List<Student> findByName(String name){
        return studentService.findByName(name);
    }
}

config

SwaggerConfig類

package com.changan.springdatajpa.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.springdatajpa.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();
    }
}

運行前往https://swagger.io/tools/swagger-ui/ Swagger官網

訪問

使用其一種方法測試（此處選擇delete刪除）

成功！

前端

導入vue.js,axios.js

進入BootCDN官網：https://www.bootcdn.cn/ 查找vue.js網絡路徑。
進入Axios文檔 https://www.kancloud.cn/yunye/axios/234845 查找axios.js網絡路徑。

<!-- 通過CDN引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 通過CDN引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

js代碼

<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					student: {
						id: '',
						name: '',
						sex: '',
						gradeId: ''
					},
					students: []
				},
				methods: {
					/* findAll: function(page) {
						var _this = this;
						axios.get('http://localhost:8082/api/findByPage',{
							params:{
								page : page,
								size : '3'
							}
						})
							.then(function(response) {
								_this.students = response.data;
							})
							.catch(function(error) {
								console.log(error);
							});
					}, */
					//分頁查詢
					findByPage:function(page,size){
						axios.get('http://localhost:8082/api/findByPage', {
								params: {
										page:page,
										size:size,
									}
								})
							.then((response) => {
								this.students = response.data;
							})
							.catch(function(error) {
								console.log(error);
							});
					},
					//調用分頁查詢方法
					pgup:function(page){
						this.findByPage(page,2);
					},
					//新增和修改信息
					Save: function(page) {
						var _this = this;
						var student = JSON.stringify(_this.student)
						if (student.id != null && student.id != '') { //修改
							axios.put('http://localhost:8082/api/update', student, {
									headers: {
										"Content-Type": "application/json;charset=utf-8" //頭部信息
									}
								})
								.then(function(response) {
									//保存完之後查詢所有的信息
											this.cleanstudent();
										this.pgup(page)
								})
								.catch(function(error) {
									console.log(error);
								});
						} else { //新增
							axios.post('http://localhost:8082/api/save', student, {
									headers: {
										"Content-Type": "application/json;charset=utf-8" //頭部信息
									}
								})
								.then(function(response) {
									//保存完之後查詢所有的信息
									if (_this.student.id != null) {
										_this.student.id = null;
									}
									this.cleanstudent();
										this.pgup(page)
								})
								.catch(function(error) {
									console.log(error);
								});
						}
					},
					//刪除信息
					Delete: function(id,page) {
						var _this = this;
						axios.delete('http://localhost:8082/api/delete', {
								params: {
									 id: id
								}
							})
							.then(function(response) {
								this.cleanstudent();
								this.pgup(page)
							})
							.catch(function(error) {
								console.log(error);
							});
					},
					Edit: function(student) {
						this.student = student;
					},
					cleanstudent:function(){
						this.student.id = null;
						this.student.name = null;
						this.student.sex = null;
						this.student.gradeId = null;
					}
				},
				//創建
				created: function() { //創建vue對象的時候自動調用查詢所有的方法
					this.findByPage(0,2);
				}
			})
		</script>

html代碼

<div id="app">
			<table border="1" cellspacing="0" cellpadding="5">
				<tr>
					<th>編號</th>
					<th>姓名</th>
					<th>性別</th>
					<th>年級</th>
					<th>操作</th>
				</tr>
				<template v-for="student in students.content">
					<tr>
						<td>{{student.id}}</td>
						<td>{{student.name}}</td>
						<td>{{student.sex}}</td>
						<td>{{student.gradeId}}</td>
						<td>
							<a href="#" @click="Delete(student.id,students.number)">刪除</a>
							<a href="#" @click="Edit(student)">編輯</a>
						</td>
					</tr>
				</template>
					<template>
					<tr>
						<td><a href="#" @click="pgup(0)">首頁</a></td>
						<td><a href="#" @click="pgup(students.number-1)" v-if="students.number>0">上一頁</a></td>
						<td><a href="#" @click="pgup(students.number+1)" v-if="students.number<students.totalPages-1">下一頁</a></td>
						<td><a href="#" @click="pgup(students.totalPages-1)">尾頁</a></td>
						<td>當前頁<label>{{students.number+1}}</label></td>
					</tr>
				</template>
				<template>
					<tr>
						<td><input type="text" placeholder="不需要自己填充" readonly="readonly" v-model="student.id" /></td>
						<td><input type="text" placeholder="請輸入用戶名" v-model="student.name" /></td>
						<td><input type="text" placeholder="請輸入性別" v-model="student.sex" /></td>
						<td><input type="text" placeholder="請輸入年級" v-model="student.gradeId" /></td>
						<td>
							<button type="button" @click="Save(students.totalPages-1)">保存</button>
						</td>
					</tr>
				</template>
			</table>
		</div>
 </div>

運行項目測試會發現出現一個angularjs flask跨域問題 XMLHttpRequest cannot load. No 'Access-Control-Allow-Origin’的錯誤

簡單的處理方式是再後端idea中的SpringBoot項目config包下加一個WebMvcConfig.java類

WebMvcConfig.java代碼

package com.changan.springdatajpa.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 WebMvcConfig implements WebMvcConfigurer {
    //ngnix反響代理實現跨域
    //ngnix負載均衡   單點故障   數據庫單點故障  容災
    //redis  主從複製  投票


    //跨域配置
    @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");
            }
        };
    }
}

再運行項目就成功了！