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();
 }
}

4.可以为主键id创建 添加一个类(雪花…忘了叫啥了)

package com.zzq.springdatajpa02.util;

import java.lang.management.ManagementFactory;
import java.net.InetAddress;
import java.net.NetworkInterface;

/**
 * <p>名称:IdWorker.java</p>
 * <p>描述:分布式自增长ID</p>
 * <pre>
 *     Twitter的 Snowflake JAVA实现方案
 * </pre>
 * 核心代码为其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左右,完全满足需要。
 * <p>
 * 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();
    }

    /**
     * <p>
     * 获取 maxWorkerId
     * </p>
     */
    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);
    }

    /**
     * <p>
     * 数据标识id部分
     * </p>
     */
    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);
}

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完事,哈哈

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
		<!-- 通过CDN引入axios -->
		<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<students.totalPages-1" 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>
上一篇:Spring Boot Swagger2自动生成接口文档和Mock模拟数据


下一篇:使用Swagger2生成API文档