Springboot統合vue(swagger 2 uiを使用)
77449 ワード
1.必要なswagger 2の依存
2.構成クラスを自分で作成する必要がある
3.プログラム入口に注記@EnableSwagger 2を記入してください
エンティティークラス
4.プライマリ・キーidの作成にクラスを追加できます(雪...名前を忘れました)
<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.プログラム入口に注記@EnableSwagger 2を記入してください
@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つを し、- を する を たします.
* 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 とサービス //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>