springBoot整合swaggers+vue，解决跨域问题

最新推荐文章于 2024-06-17 10:09:25 发布
最新推荐文章于 2024-06-17 10:09:25 发布
阅读量1.8k 收藏
点赞数 3
文章标签： springBoot 跨域问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/I_No_dream/article/details/90785671
版权

做自己没做过的事情叫做成长
做自己不愿做的事情叫做改变
做自己不敢做的事情叫做突破
共勉

目录结构

在这里插入图片描述

实体类

@Data
@Entity
public class Student {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;
    private String name;
    private String sex;
    private Integer gradeId;
}

服务层

接口

public interface StudentService {

    /**
     * 新增
     * @param student 新增对象
     * @return springData提供的方法是返回的对象，所以我们也需要返回对象
     */
    Student save(Student student);

    /**
     * 修改
     * @param student 修改对象
     * @return springData提供的方法是返回的对象，所以我们也需要返回对象
     */
    Student update(Student student);

    /**
     * 删除
     * @param id 根据id删除
     */
    void delete(Integer id);

    /**
     * 分页
     * @param page 页码
     * @param size 每页数量
     * @param student 用于存储模糊查询参数
     * @return
     */
    Page<Student> findByPage(Integer page, Integer size, Student student);

    /**
     * 通过id 查询
     * @param id 根据id查询，用于修改
     * @return springData提供的方法是返回的对象，所以我们也需要返回对象
     */
    Student findById(Integer id);
}

实现类

@Service
public class StudentServiceImpl implements StudentService {

    @Autowired
    private StudentDao studentDao;

    /**
     * 新增
     * @param student 新增对象
     * @return springData提供的方法是返回的对象，所以我们也需要返回对象
     */
    @Override
    public Student save(Student student) {
        return studentDao.save(student);
    }

    /**
     * 修改
     * @param student 修改对象
     * @return springData提供的方法是返回的对象，所以我们也需要返回对象
     */
    @Override
    public Student update(Student student) {
        return studentDao.save(student);
    }

    /**
     * 删除
     * @param id 根据id删除
     */
    @Override
    public void delete(Integer id) {
        studentDao.deleteById(id);
    }

    /**
     * 分页
     * @param page 页码
     * @param size 每页数量
     * @param student 用于存储模糊查询参数
     * @return
     */
    @Override
    public Page<Student> findByPage(Integer page, Integer size, Student student) {
        //模糊查询，需要注意的是 name要和你所需要查询的字段名相同
        ExampleMatcher matcher = ExampleMatcher.matching().withMatcher("name",ExampleMatcher.GenericPropertyMatchers.startsWith());
        // Example.of(student,matcher);因为第一个参数只能是对象，所以我们需要用对象存储查询条件
        Example<Student> studentExample = Example.of(student,matcher);
        //分页初始化
        PageRequest request = PageRequest.of(page, size);
        //分页查询
        Page<Student> studentPage =studentDao.findAll(studentExample,request);
        return studentPage;
    }

    /**
     * 通过id 查询
     * @param id 根据id查询，用于修改
     * @return springData提供的方法是返回的对象，所以我们也需要返回对象
     */
    @Override
    public Student findById(Integer id) {
        return studentDao.findById(id).get();
    }
}

dao层

public interface StudentDao extends JpaRepository<Student,Integer> {
}

控制层

@RestController
@RequestMapping("/student")
@Api(value = "swagger ui 注释 api 级别")
public class StudentController {

    @Autowired
    private StudentService studentService;

    /**
     * 页面跳转
     * @return
     */
    @RequestMapping("/add")
    @ApiOperation(value = "跳转到增加页面",notes = "跳转到增加页面")
    public String add(){
        return "add";
    }

    /**
     * 新增
     *
     * @param student
     * @return
     */
    @RequestMapping("/save")
    @ApiOperation(value = "新增学生",notes = "")
    public Student save(@RequestBody Student student) {
        System.out.println(student);
        return studentService.save(student);
    }

    /**
     * 修改
     *
     * @param student
     * @return
     */
    @ApiOperation(value = "修改学生",notes = "")
    @RequestMapping("/update")
    public Student update(Student student) {
        return studentService.save(student);

    }

    /**
     * 删除
     *
     * @param id
     */
    @RequestMapping("/delete")
    @ApiOperation(value = "删除学生",notes = "")
    public int delete(Integer id) {
        try {
            studentService.delete(id);
            return 1;
        } catch (Exception e) {
            e.printStackTrace();
            return 2;
        }
    }

    /**
     * 分页
     * 在服务层我已经表明的很清楚啦，就不再一一解释了
     * @param page
     * @param size
     * @return
     */
    @RequestMapping("/findByPage")
    @ApiOperation(value = "分页查询",notes = "")
    public Page<Student> findByPage(Integer page, Integer size, Student student) {
        if (page == null) {
            page = 0; //初始化页码，注意他是从0开始
        }
        if (size == null) {
            size = 3; //初始化每页条数
        }
        Page<Student> byPage = studentService.findByPage(page, size,student);
        return byPage;

    }

    /**
     * 通过id 查询
     *
     * @param id
     * @return
     */
    @RequestMapping("/findById")
    @ApiOperation(value = "id查询",notes = "")
    public Student findById(Integer id) {
        Student byId = studentService.findById(id);
        return byId;
    }
}

swagger2的配置

@Configuration
@EnableSwagger2
public class SwaggerConfig {
    @Bean
    public Docket createRestApi(){
        return  new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo()).select().apis(RequestHandlerSelectors.basePackage("com.student.controller"))
                .paths(PathSelectors.any()).build();
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("Spring Boot整合Swagger2生产接口文档")
                .description("如果前端妹子看不懂可随时来询问我")
                .termsOfServiceUrl("https://blog.csdn.net/I_No_dream")
                .contact("name")
                .version("2.2")
                .build();
    }
}

解决跨域问题

@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");
            }
        };
    }
}

main函数

@SpringBootApplication
@EnableSwagger2
public class DemoApplication {

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

}

配置文件

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/student?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
    username: root
    password: 123456
  jpa:
    show-sql: true  #显示sql语句
    hibernate:
      ddl-auto: update
      naming:
        implicit-strategy: org.hibernate.boot.model.naming.ImplicitNamingStrategyComponentPathImpl
        physical-strategy: org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl
    database: mysql #配置现在所使用的数据库

pom.xml文件

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

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!--接口文档生产-->
        <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>
    </dependencies>

html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<table border="1" 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)">刪除</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><input type="text" placeholder="请输入年纪" v-model="student.gradeId" /></td>
						<td>
							<button type="button" @click="save()">保存</button>
						</td>
					</tr>
				</template>
			</table>
			第<span v-text="students.number+1"></span>页/共<span v-text="students.totalPages"></span>页<br />
			<a href="#" @click="pageJump(0)">首页</a>
			<a href="#" @click="pageJump(students.number-1)">上一页</a>
			<a href="#" @click="pageJump(students.number+1)">下一页</a>
			<a href="#" @click="pageJump(students.totalPages-1)">尾页</a>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					student: {
						id: '',
						name: '',
						sex: '',
						gradeId: ''
					},
					students: [],
					page: 0
				},
				methods: {
					findAll: function(page) {
						var _this = this;
						axios.get("http://localhost:8080/student/findByPage", {
								params: {
									page: page
								}
							})
							.then(function(res) {
								_this.students = res.data;
							})
							.catch(function(err) {
								console.log(err);
							})
					},
					save: function() {
						var _this = this;
						var student = JSON.stringify(_this.student);
						if (student.id != null && student.id != '') {
							this.student = s;
							axios.put("http://localhost:8080/student/update", student, {
									headers: {
										"Content-Type": "application/json;charset=utf-8"
									}
								})
								.then(function(res) {
									_this.student.name = null;
									_this.student.sex = null;
									_this.student.gradeId = null;
									_this.findAll();
								})
								.catch(function(err) {
									console.log(err);
								});
						} else {
							axios.post("http://localhost:8080/student/save", student, {
									headers: {
										"Content-Type": "application/json;charset=utf-8"
									}
								})
								.then(function(res) {
									_this.student.name = null;
									_this.student.sex = null;
									_this.student.gradeId = null;
									_this.findAll();
								})
								.catch(function(err) {
									console.log(err);
								});
						}
					},
					Delete: function(sid) {
						var _this = this;
						axios.delete("http://localhost:8080/student/delete", {
								params: {
									id: sid
								}
							})
							.then(function(res) {
								_this.findAll();
							})
							.catch(function(err) {
								console.log(err);
							})
					},
					Edit:function(student){
						this.student = student;
					},
					pageJump:function(number){
						this.findAll(number);
					}
				},
				created: function() {
					this.findAll();
				}
			})
		</script>
	</body>
</html>
菜鸟想飞的很高
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring Boot引入swagger-ui 后swagger-ui.html无法访问404的问题
09-07
以下是对这个问题的详细分析和解决方案： 首先，要引入Swagger的相关依赖，需要在项目的`pom.xml`文件中添加Springfox的`springfox-swagger2`和`springfox-swagger-ui`两个依赖项，如下所示： ```xml <groupId>...
swaggers:Nordea Open Banking API Swagger和Postman文件
04-08
在"swaggers-master"压缩包中，很可能包含了Nordea Open Banking API的Swagger规格文件，文件可能以`.yaml`或`.json`格式存在。这些文件详细列出了API的所有端点（endpoints）、请求参数、响应状态码以及每个端点所...
springboot vue 跨域问题的解决
08-26
主要介绍了springboot vue 跨域问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-spring boot跨域问题
aoirok的博客
04-25 81
因前端端口号8080，后端端口号9090，运行之后报了一堆错，下面是报错内容截图： 以下是解决方法： ①在我们的项目里面新建一个config的包，在包里面建一个名叫CorsConfig的类，看图 ②在CorsConfig.java文件里面粘贴以下代码： package com.example.demo.config; import org.springframework.context.annotation.Bean; import org.springframework.context.an
盘点 Spring Boot 解决跨域请求的几种方法
最新发布
程序员志哥的博客
06-17 993
同源策略，简单的说就是当浏览器访问 web 服务器资源时，只有源相同才能正常进行通信，即协议、域名、端口号都完全一致，否则就属于跨域请求。
springboot+vue前后端分离跨域问题配置
zhuang_kang
11-20 541
只需要增加一个配置类即可 /** * 解决跨域问题 * @author kangzhuang * @date 2020/11/20 */ @Component public class CorsFilter implements Filter { @Override public void init(FilterConfig filterConfig) throws ServletException { } @Override public void.
spring boot+vue解决跨域
qq_30591163的博客
09-11 291
spring boot+vue解决跨域 后台设置 import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import ...
vue+springboot解决跨域
mrb1289798400的博客
09-05 795
跨域请求：顾名思义客户端请求不一样的域名会出现跨域失败； 解决办法： 第一：前端解决 点击参考 一：index.js下配置 proxyTable: { '/': { target: 'http://localhost:8088/', changeOrigin: true, pathRewrite: { '^...
Swagger links-crx插件
04-02
语言:English 此扩展名允许存储swagger src文档的链接，以轻松显示它们或...此扩展程序需要具有以下权限：-访问swagger编辑器网页，以便能够显示您的swaggers（强制性）； -提取您提供的网址以获取相应的代码（可选）。
SpringBoot+Vue前后端跨域问题
qq_38856939的博客
03-25 1566
随着分布式微服务的兴起，越来越多的公司在开发web项目的时候选择前后端分离的模式开发，前后端分开部署，使得分工更加明确，彻底解放了前端。 我们知道，http请求都是无状态，现在比较流行的都是jwt的形式处理无状态的请求，在请求头上带上认证参数（token等），前后端分离有好处，也有坏处，第一次开发前后端分离项目的人，肯定会遇到前端请求跨域的问题，这个怎么处理呢？在说处理方案前，有必要说明一下为什么会跨域和什么是跨域？ 一、为什么会跨域？ 出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）
Springboot+VUE 解决跨域问题
qq_42786016的博客
04-02 304
1、新建一个配置类，如下 @Configuration public class MvcConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { // 这里匹配了所有的URL，允许所有的外域发起跨域请求，允许外域发起请求任意HTTP Method，允许跨域请求包含任意的头信息。 registry.addMapping("
Spring boot 和Vue开发中CORS跨域问题解决
12-11
跨域资源共享CORS（Cross-origin Resource Sharing），是W3C的一个标准，允许浏览器向跨源的服务器发起XMLHttpRequest请求，克服ajax请求只能同源使用的限制。关于CORS的详细解读，可参考阮一峰大神的博客：跨域资源共享CORS详解。 1. 遇到的问题： 我用spring-boot 做Rest服务，Vue做前端框架，用了element-admin-ui这个框架做后台管理。在调试的过程中遇到了如下错误: Preflight response is not successful 2. 分析问题 这个问题是典型的CORS跨域问题。 所谓跨域： 跨域
springboot 和vue前后端分离 跨域配置
qq_27865749的博客
07-14 322
全局跨域配置 package com.eaos.util.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfigurat...
springboot和vue前后端分离跨域配置
felix
07-07 334
1，后端配置 package org.lht.boot.security.server.common.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.scheduling.concurrent.ConcurrentTaskExecutor; import org
springboot+vue解决前端请求跨域问题
ABC_efg123456的博客
09-09 143
在springboot项目config包下新建配置即可 /** * 跨域配置 */ @Configuration public class CorsConfig { private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); /** * 允许任何域名 */ cors
Vue+SpringBoot实现前后端分离开发跨域配置
java_programmer_huan的博客
03-16 176
起初在使用Vue和SpringBoot开发的时候，因为没有实现前后端分离，所以每次需要在前端使用命令npm run build打包完，再将dist包放置到后端项目，在本地开发还好，觉得问题不会很大，但到了要部署项目的时候，这时候头大了，每次得重复前端打包，后端打包，再用后端驱动前端项目去运行，耗费了大量时间。因此，下定决心搞一下前后端分离开发，这样一来，两者之间的耦合度大大降低，提高开发效...
SpringBoot+Vue：一站式解决跨域问题
05-05 1516
跨域问题（CORS，Cross-Origin Resource Sharing）是由于浏览器的同源策略导致的一种安全限制。当一个请求的域名、协议或端口与当前页面不一致时，就会触发跨域问题。
SpringBoot+Vue跨域问题的解决方法
Chenbaozeng的博客
06-27 353
跨域指的就是浏览器进行网页中的JS代码时候，由于浏览器的同源策略的限制，只能访问同源的资源，例如同一个域名（端口）下的网页地址，跨端口的跨域名其实就是跨域的问题！我这里主要说一说CROS：这个其实主要就是在后端的一种解决方案，在SpringBoot中，添加如下代码即可。还有一种方式就是加注解@CrossOrigin。要解决跨域的问题，就要先知道什么是跨域？
针对前后端分离项目（springboot+vue）跨域问题总结
wangluoxiehui的专栏
05-24 314
跨域请求指的是在 Web 应用程序中，通过 JavaScript 代码向另一个域名（或端口、协议）发起 AJAX 请求。跨域请求分为简单跨域请求和复杂跨域请求。
swangger字段排序
07-28
您可以使用以下代码来对一个包含swaggers字段的列表进行排序： ```python swaggers = [...] # 包含swaggers字段的列表 sorted_swaggers = sorted(swaggers, key=lambda x: x['swaggers']) ``` 这将按照swaggers...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值