springboot整合vue(使用swagger2 ui)
1.所需要swagger2的依赖
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>2.7.0</version>
</dependency>
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>2.7.0</version>
</dependency>
2.需要自己编写配置类
@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");
}
};
}
@Configuration
@EnableSwagger2
public class SwaggerConfig {
@Bean
public Docket createRestApi() {
return new Docket(DocumentationType.SWAGGER_2)
.apiInfo(apiInfo())
.select()
.apis(RequestHandlerSelectors.basePackage("com.zzq.sprintboot_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();
}
3.在程序入口记得写上注解@EnableSwagger2
@SpringBootApplication
@EnableSwagger2
public class SprintbootVueApplication {
public static void main(String[] args) {
SpringApplication.run(SprintbootVueApplication.class, args);
}
@Bean
public IdWorker getIdWorker(){
return new IdWorker();
}
}
实体类
package com.zzq.sprintboot_vue.pojo;
import lombok.Data;
import javax.persistence.*;
@Data
@Table(name = "student3")
@Entity
public class Student2 {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer stuid;
private String name;
private String sex;
private Integer gradeId;
}
4.可以为主键id创建 添加一个类（雪花…忘了叫啥了）
package com.zzq.springdatajpa02.util;
import java.lang.management.ManagementFactory;
import java.net.InetAddress;
import java.net.NetworkInterface;
/**
* 名称：IdWorker.java
* 描述：分布式自增长ID
*
* Twitter的 Snowflake JAVA实现方案
*
* 核心代码为其IdWorker这个类实现，其原理结构如下，我分别用一个0表示一位，用—分割开部分的作用：
* 1||0---0000000000 0000000000 0000000000 0000000000 0 --- 00000 ---00000 ---000000000000
* 在上面的字符串中，第一位为未使用（实际上也可作为long的符号位），接下来的41位为毫秒级时间，
* 然后5位datacenter标识位，5位机器ID（并不算标识符，实际是为线程标识），
* 然后12位该毫秒内的当前毫秒内的计数，加起来刚好64位，为一个Long型。
* 这样的好处是，整体上按照时间自增排序，并且整个分布式系统内不会产生ID碰撞（由datacenter和机器ID作区分），
* 并且效率较高，经测试，snowflake每秒能够产生26万ID左右，完全满足需要。
*
* 64位ID (42(毫秒)+5(机器ID)+5(业务编码)+12(重复累加))
*
* @author Polim
*/
public class IdWorker {
// 时间起始标记点，作为基准，一般取系统的最近时间（一旦确定不能变动）
private final static long twepoch = 1288834974657L;
// 机器标识位数
private final static long workerIdBits = 5L;
// 数据中心标识位数
private final static long datacenterIdBits = 5L;
// 机器ID最大值
private final static long maxWorkerId = -1L ^ (-1L << workerIdBits);
// 数据中心ID最大值
private final static long maxDatacenterId = -1L ^ (-1L << datacenterIdBits);
// 毫秒内自增位
private final static long sequenceBits = 12L;
// 机器ID偏左移12位
private final static long workerIdShift = sequenceBits;
// 数据中心ID左移17位
private final static long datacenterIdShift = sequenceBits + workerIdBits;
// 时间毫秒左移22位
private final static long timestampLeftShift = sequenceBits + workerIdBits + datacenterIdBits;
private final static long sequenceMask = -1L ^ (-1L << sequenceBits);
/* 上次生产id时间戳 */
private static long lastTimestamp = -1L;
// 0，并发控制
private long sequence = 0L;
private final long workerId;
// 数据标识id部分
private final long datacenterId;
public IdWorker(){
this.datacenterId = getDatacenterId(maxDatacenterId);
this.workerId = getMaxWorkerId(datacenterId, maxWorkerId);
}
/**
* @param workerId
* 工作机器ID
* @param datacenterId
* 序列号
*/
public IdWorker(long workerId, long datacenterId) {
if (workerId > maxWorkerId || workerId < 0) {
throw new IllegalArgumentException(String.format("worker Id can't be greater than %d or less than 0", maxWorkerId));
}
if (datacenterId > maxDatacenterId || datacenterId < 0) {
throw new IllegalArgumentException(String.format("datacenter Id can't be greater than %d or less than 0", maxDatacenterId));
}
this.workerId = workerId;
this.datacenterId = datacenterId;
}
/**
* 获取下一个ID
*
* @return
*/
public synchronized long nextId() {
long timestamp = timeGen();
if (timestamp < lastTimestamp) {
throw new RuntimeException(String.format("Clock moved backwards. Refusing to generate id for %d milliseconds", lastTimestamp - timestamp));
}
if (lastTimestamp == timestamp) {
// 当前毫秒内，则+1
sequence = (sequence + 1) & sequenceMask;
if (sequence == 0) {
// 当前毫秒内计数满了，则等待下一秒
timestamp = tilNextMillis(lastTimestamp);
}
} else {
sequence = 0L;
}
lastTimestamp = timestamp;
// ID偏移组合生成最终的ID，并返回ID
long nextId = ((timestamp - twepoch) << timestampLeftShift)
| (datacenterId << datacenterIdShift)
| (workerId << workerIdShift) | sequence;
return nextId;
}
private long tilNextMillis(final long lastTimestamp) {
long timestamp = this.timeGen();
while (timestamp <= lastTimestamp) {
timestamp = this.timeGen();
}
return timestamp;
}
private long timeGen() {
return System.currentTimeMillis();
}
/**
*
* 获取 maxWorkerId
*
*/
protected static long getMaxWorkerId(long datacenterId, long maxWorkerId) {
StringBuffer mpid = new StringBuffer();
mpid.append(datacenterId);
String name = ManagementFactory.getRuntimeMXBean().getName();
if (!name.isEmpty()) {
/*
* GET jvmPid
*/
mpid.append(name.split("@")[0]);
}
/*
* MAC + PID 的 hashcode 获取16个低位
*/
return (mpid.toString().hashCode() & 0xffff) % (maxWorkerId + 1);
}
/**
*
* 数据标识id部分
*
*/
protected static long getDatacenterId(long maxDatacenterId) {
long id = 0L;
try {
InetAddress ip = InetAddress.getLocalHost();
NetworkInterface network = NetworkInterface.getByInetAddress(ip);
if (network == null) {
id = 1L;
} else {
byte[] mac = network.getHardwareAddress();
id = ((0x000000FF & (long) mac[mac.length - 1])
| (0x0000FF00 & (((long) mac[mac.length - 2]) << 8))) >> 6;
id = id % (maxDatacenterId + 1);
}
} catch (Exception e) {
System.out.println(" getDatacenterId: " + e.getMessage());
}
return id;
}
}
5.dao层和service层
//dao层
public interface StudentDao extends JpaRepository<Student2,Long> {
Page<Student2> findByNameOrGrade_Gid(Integer pageNum, Integer size);
}
//service层
package com.zzq.sprintboot_vue.service;
import com.zzq.sprintboot_vue.pojo.Student2;
import org.springframework.data.domain.Page;
public interface StudentService {
Page<Student2> findAll(Integer pageNum, Integer size);
Student2 save(Student2 student2);
void del(Integer stuid);
Student2 getByID(Integer stuid);
}
实现类
package com.zzq.sprintboot_vue.service.impl;
import com.zzq.sprintboot_vue.dao.StudentDao;
import com.zzq.sprintboot_vue.pojo.Student2;
import com.zzq.sprintboot_vue.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;
@Service
public class StudentServiceImpl implements StudentService {
@Autowired
private StudentDao studentDao;
@Override
public Page<Student2> findAll(Integer pageNum, Integer size) {
if (pageNum==null||pageNum<0){
pageNum=0;
}
if (size==null){
size=3;
}
PageRequest of = PageRequest.of(pageNum, size);
return studentDao.findAll(of);
}
@Override
public Student2 save(Student2 student2) {
return studentDao.save(student2);
}
@Override
public void del(Integer stuid) {
studentDao.deleteById(stuid);
}
@Override
public Student2 getByID(Integer stuid) {
return studentDao.findById(stuid).get();
}
}
6.控制层
package com.zzq.sprintboot_vue.controller;
import com.zzq.sprintboot_vue.pojo.Student2;
import com.zzq.sprintboot_vue.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.*;
@RestController
@Api(value = "swagger ui 注释")
@RequestMapping("/student")
public class StudentController {
@Autowired
private StudentService studentService;
@GetMapping("/getAll")
@ApiOperation(value = "查询所有学生", notes = "查询所有学生")
public Page<Student2> getAll(Integer pageNum, Integer size) {
Page<Student2> all = studentService.findAll(pageNum, size);
return all;
}
@PostMapping("/student")
@ApiOperation(value = "新增学生", notes = "新增学生")
public Student2 add(@RequestBody Student2 student2){
Student2 student21 = studentService.save(student2);
return student21;
}
@PutMapping("/student")
@ApiOperation(value = "修改学生信息", notes = "修改学生信息")
public Student2 update(@RequestBody Student2 student2){
Student2 student21 = studentService.save(student2);
return student21;
}
@DeleteMapping("/student/{stuid}")
@ApiOperation(value = "删除学生", notes = "删除学生")
public int del(@PathVariable("stuid") Integer stuid){
try {
System.out.println("id==============="+stuid);
studentService.del(stuid);
return 1;
}catch (Exception e){
e.printStackTrace();
return 0;
}
}
}
7.页面需要引入的
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
8.vue代码 直接ctrl+cv完事，哈哈
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script src="js/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
head>
<body>
<div id="app">
<table border="1">
<tr>
<td>编号td>
<td>姓名td>
<td>性别td>
<td>年级td>
<td>操作td>
tr>
<tr v-for="stu in students.content">
<td>{{stu.stuid}}td>
<td>{{stu.name}}td>
<td>{{stu.sex}}td>
<td>{{stu.gradeId}}td>
<td>
<button v-on:click="Edit(stu)">编辑button>
<button v-on:click="Delete(stu.stuid)">删除button>
td>
tr>
<tr>
<td><button v-on:click="tiao(0)">首页button>td>
<td><button v-on:click="tiao(students.number-1)">上一页button>td>
<td><button v-if="students.number" v-on:click="tiao(students.number+1)">下一页button>td>
<td><button v-on:click="tiao(students.totalPages-1)">尾页button>td>
tr>
<tr>
<td><input type="text" placeholder="此处无需填写" v-model="student.stuid" readonly="readonly">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 colspan="2">
<button v-on:click="Save(student)">保存button>
td>
tr>
table>
div>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
student:{
stuid:'',
name:'',
sex:'',
gradeId:''
},
students:[]
},
methods:{
findAll:function(){
var _this=this;
axios.get('http://localhost:8080/student/getAll')
.then(function(respons){
_this.students=respons.data
})
.catch(function(error){
console.log(error)
})
},
Save:function(s){
var _this=this;
if(s.stuid==null||s.stuid==''){
_this.student=s;
axios.post('http://localhost:8080/student/student',_this.student,{
headers: {
"Content-Type": "application/json;charset=utf-8" //头部信息
}
})
.then(function(respons){
_this.student.name=null;
_this.student.sex=null;
_this.student.gradeId=null;
_this.findAll();
})
.catch(function(error){
console.log(error)
})
}else{
_this.student=s;
axios.put('http://localhost:8080/student/student',_this.student,{
headers: {
"Content-Type": "application/json;charset=utf-8" //头部信息
}
})
.then(function(respons){
_this.student.stuid=null;
_this.student.name=null;
_this.student.sex=null;
_this.student.gradeId=null;
_this.findAll();
})
.catch(function(error){
console.log(error)
})
}
},
Delete:function(sid){
var _this=this;
axios.delete('http://localhost:8080/student/student/'+sid)
.then(function(respons){
_this.findAll();
})
.catch(function(error){
console.log(error)
})
},
Edit:function(s){
var _this=this;
_this.student=s;
},
tiao:function(p){
var _this=this;
axios.get('http://localhost:8080/student/getAll',{
params:{
pageNum:p
}
})
.then(function(respons){
_this.students=respons.data
})
.catch(function(error){
console.log(error)
})
}
},
created:function () {
this.findAll();
}
})
script>
body>
html>