使用spring-data-jpa+spirngboot整合swagger+vuejs实现一套简单的增删改查demo
2019-06-04 21:31
1166 查看
昨天使用了springboot整合springdatajpa写了一套简单的增删改查功能，今天想实现前后端分离来写一套简单的增删改查demo，于是就用了自己最近才有点接触的东西来搞一波节奏。
后端开发还是用的springboot整合springdatajpa:
但是为了使用swagger，我们需要加一点东西，先是在pom文件中加入swagger的依赖。
依赖我是网上找的,如果大家有不同版本，也不必跟我的用同一版。依赖如下:
<dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <version>2.2.2</version> </dependency> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger-ui</artifactId> <version>2.2.2</version> </dependency>
然后我们在启动类上加入注解:
@EnableSwagger2
然后需要配置一个叫config的文件夹、是用来配置swagger的config文件的。配置一个叫SwaggerConfig的类，类的代码如下:
package com.zerol.jap_vue.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
@EnableSwagger2public class SwaggerConfig {
@Bean
public Docket createRestApi() {
return new Docket(DocumentationType.SWAGGER_2)
.apiInfo(apiInfo())
.select()
//选择controller包
//这里我们需要改的就是自己控制层所在的位置,其他东西不想改可以不改
.apis(RequestHandlerSelectors.basePackage("com.zerol.jap_vue.controller"))
.paths(PathSelectors.any())
.build();
}
private ApiInfo apiInfo() {
return new ApiInfoBuilder()
//自定义信息可按需求填写
.title("Spring Data Jpa中使用Swagger2构建前后端分离开发")
.description("demo")
//这里大家可以放自己的博客名
.termsOfServiceUrl("https://blog.csdn.net/ZEROl_")
//这个是作者名
.contact("ZEROl")
.version("1.0")
.build();
}
}
然后可以写增删改查了，由于昨天已经发过一篇jpa的博客了，所以今天就不列出关于jpa的代码了
然后我们启动项目，成功启动后进入到http://localhost:8080/swagger-ui.html#/ 访问这个地址即可
使用swagger来操作我们的的后端的 jpa demo了
这些方法点进入就可以执行相应的功能，后端就暂时告一段落。
然后进入前端，前端我是在b站看的黑马的vue教程，讲的很详细，不过看到组件就没看下去了（实在是太详细了，听得人昏昏欲睡），由于本人审美不是太好，所以就只建立一个简单的表格来进行增删改查。前段代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 通过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>
</head>
<body>
<div id="app">
<input type="text" name="name" v-model="name" placeholder="请输入要查询的姓名"/>
<input type="button" name="" id="sub" value="提交" @click="findAll(name)"/>
<table border="1" cellspacing="0" cellpadding="20">
<tr>
<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>
<a href="#" @click="Delete(student.id)">删除</a>
<a href="#" @click="Edit(student)">编辑</a>
</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>
<button type="button" @click="Save">保存</button>
</td>
</tr>
</template>
<template>
<a href="javascript:void(0);" @click="pgUd(0)" style="margin-right: 20px;">首页</a>
<a href="javascript:void(0);" @click="pgUd(students.number-1)" style="margin-right: 20px;">上一页</a>
<a href="javascript:void(0);" @click="pgUd(students.number+1)" style="margin-right: 20px;">下一页</a>
<a href="javascript:void(0);" @click="pgUd(students.totalPages-1)" style="margin-right: 20px;">尾页</a>
<span>当前页:{{students.number+1}}</span><span>当前页:{{students.totalPages}}</span>
</template>
</table>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
//模糊查询用的参数
name:"",
//这个是查出来的并循环的学生对象 即 v-for中的item
student: {
id: '',
name: '',
sex: '',
gradeId: ''
},
//这个是查出来的学生对象 即 v-for中的items
students: []
},
methods: {
//查询的方法，在其中集成了模糊查询与分页
findAll: function(name,page,size) {
var _this = this;
axios.get('http://localhost:8080/student/getAll',{
params:{
name:name,
page:page,
size:size
}
})
.then(function(response) {
_this.students = response.data;
})
.catch(function(error) {
console.log(error);
});
},
//新增的方法
Save: function() {
var _this = this;
var student = JSON.stringify(_this.student)
if (student.id != null && student.id != '') { //修改
axios.put('http://localhost:8080/student/update', student, {
headers: {
"Content-Type": "application/json;charset=utf-8" //头部信息
}
})
.then(function(response) {
//保存完之后查询所有的信息
_this.student.name = null;
_this.student.sex = null;
_this.student.gradeId = null;
_this.findAll();
})
.catch(function(error) {
console.log(error);
});
} else { //新增
axios.post('http://localhost:8080/student/save', student, {
headers: {
"Content-Type": "application/json;charset=utf-8" //头部信息
}
})
.then(function(response) {
//保存完之后查询所有的信息
if (_this.student.id != null) {
_this.student.id = 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/delete', {
params: {
id: sid
}
})
.then(function(response) {
_this.findAll();
})
.catch(function(error) {
console.log(error);
});
},
//修改的方法
Edit: function(student) {
this.student = student;
},
//点击上一页、下一页、首页、尾页触发的方法
pgUd:function(num){
var pages = this.students.totalPages-1;
var name=this.name;
if(num>pages){//判断是否到了最后一页
num = pages;//如果到了最后一页就不让继续往下点击了
}
this.findAll(name,num,3);//分页还得执行一次查询方法才能有数据
}
},
//这边需要注意的是这个钩子函数，这个函数是一创建vue对象就会运行的函数，所以我把集成分页以及模糊查询姓名的方法放到这个里面来
created: function() { //创建vue对象的时候自动调用查询所有的方法
this.findAll();
}
})
</script>
</body>
</html>
然后我们会发现一个神奇的事情，请求跨域了，无法获取数据。这时候我们需要在后端或者前端做跨域处理，这里我使用后端的处理方法，因为本人不是走前端的，所以就用的后端的处理方法。我的处理方法是在后端的config文件夹中创一个类。类中的代码如下:
package com.zerol.jap_vue.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)
//放行哪些原始域(请求方式)如果还有更多的请求方式建议放*，这里我只用了这4种请求方式、所以就都写上了
.allowedMethods("GET", "POST", "PUT", "DELETE")
//放行哪些原始域(头部信息)
.allowedHeaders("*")
//暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
.exposedHeaders("Header1", "Header2");
}
};
}
}
至此，我的前后端分离小demo就写完了。效果如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- SpringBoot中使用Spring Data Jpa 实现简单的动态查询的两种方法
- Spring-data-jpa+vue+swagger 实现一个前端后分离的小Demo
- idea+HBuilderX实现springboot+springdata-jpa+vue+axios前后端分离增删改查，分页+解决跨域问题的idea页面
- SpringBoot中使用Spring Data Jpa 实现简单的动态查询的两种方法
- springboot整合mongoDB写一套简单的增删改查demo
- SpringBoot整合Spring Data JPA、MySQL、Druid并使用Mockito实现单元测试
- Spring Boot中使用Spring-data-jpa实现数据库增删查改
- 文章标题spring-boot + spring-data-jpa 实现简单的增删改查
- Spring Boot中使用Spring-data-jpa让数据访问更简单、更优雅
- Spring Boot（7）— Spring Boot中使用Spring-data-jpa让数据访问更简单、更优雅
- Spring Boot中使用Spring-data-jpa让数据访问更简单、更优雅
- 使用spring boot 整合spring jpa做基于restful风格的增删改查(maven ,mysql)
- （五）spring-boot中使用spring-data-jpa（hibernate实现）
- SpringBoot2.0使用Spring Data-JPA实现增删改查
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
- 在Spring Boot中使用Spring-data-jpa实现分页查询
- 在Spring Boot中使用Spring-data-jpa实现分页查询
- Spring Boot 中使用 Spring-data-jpa 重写分页接口并实现动态传条件以及排序字段
- Spring Boot中使用Spring-data-jpa让数据访问更简单、更优雅
- 用spring boot和spring data jpa做简单的增删查改