Vue Springboot前后端交互
一、Axios的使用
1、简介
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
2、请求配置
这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。
{
// `url` 是用于请求的服务器 URL
url: '/user',
// `method` 是创建请求时使用的方法
method: 'get', // default
// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL: 'https://some-domain.com/api/',
// `headers` 是即将被发送的自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `params` 是即将与请求一起发送的 URL 参数
// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
params: {
ID: 12345
},
// `data` 是作为请求主体被发送的数据
// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
// 在没有设置 `transformRequest` 时，必须是以下类型之一：
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 浏览器专属：FormData, File, Blob
// - Node 专属： Stream
data: {
firstName: 'Fred'
},
// `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // default
// `transformRequest` 允许在向服务器发送前，修改请求数据
// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
transformRequest: [function (data, headers) {
// 对 data 进行任意转换处理
return data;
}],
// `transformResponse` 在传递给 then/catch 前，允许修改响应数据
transformResponse: [function (data) {
// 对 data 进行任意转换处理
return data;
}],
......
}
3、响应结构
某个请求的响应包含以下信息
{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 服务器响应的头
headers: {},
// `config` 是为请求提供的配置信息
config: {},
// 'request'
// `request` is the request that generated this response
// It is the last ClientRequest instance in node.js (in redirects)
// and an XMLHttpRequest instance the browser
request: {}
}
使用 then 时，你将接收下面这样的响应 :
axios.get('/user/12345')
.then(function(response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});
4.安装
二、后端的代码实现（整合Springboot）
1.pom文件
4.0.0
org.springframework.boot
spring-boot-starter-parent
2.5.0
com.example
usersystem
0.0.1-SNAPSHOT
usersystem
Demo project for Spring Boot
1.8
org.springframework.boot
spring-boot-starter-web
org.mybatis.spring.boot
mybatis-spring-boot-starter
2.2.2
mysql
mysql-connector-java
runtime
org.projectlombok
lombok
true
org.springframework.boot
spring-boot-starter-mail
org.springframework.boot
spring-boot-starter-test
test
org.springframework.boot
spring-boot
2.5.0
org.aspectj
aspectjweaver
1.8.13
com.baomidou
mybatis-plus-boot-starter
3.5.1
io.springfox
springfox-boot-starter
3.0.0
com.baomidou
mybatis-plus-generator
3.5.1
org.apache.velocity
velocity
1.7
cn.hutool
hutool-all
5.7.20
org.apache.poi
poi-ooxml
4.1.2
com.auth0
java-jwt
3.10.3
org.springframework.boot
spring-boot-maven-plugin
org.projectlombok
lombok
2.yml文件
server:
port: 9090
spring:
mail:
host: smtp.qq.com
username: [email protected]
password: lrtxztoxiuodecic
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/usersystem?serverTimezone=GMT%2b8
username: root
password: skd2580
mvc:
hiddenmethod:
filter:
enabled: true
pathmatch:
matching-strategy: ant_path_matcher
mybatis:
mapper-locations: classpath:mapper/*.xml #扫描所哟mybatis文件
mybatis-plus:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl3、建立实体类、maper.xml、controller等层
三、Vue前端代码实现
1、APP.vue
2、vue配置跨域跳转
在vue项目中config目录下的index.js文件中设置跨域
proxyTable: {
'/apis':{
target: 'http://localhost:8089',//这里是你的sprintboot项目中的后台接口
changeOrigin: true,//允许跨域
pathRewrite: {//重写路径
'^/apis':'/apis'//写'/apis'就相当于写'http://localhost:8089/apis'
}
}
四、前后端分离跨域问题
方案：全局配置的方式
package com.wn.rbac.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
* @author ：fengSir
* @date ：Created By 2022-05-06 22:08
* @description ：TODO
*/
//@EnableWebMvc
@Configuration
public class MvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
//每次调用registry.addMapping可以添加一个跨域配置，需要多个配置可以多次调用registry.addMapping
registry.addMapping("/**")
.allowedOrigins("*") //放行哪些原始域
.allowedMethods("PUT", "DELETE","POST", "GET") //放行哪些请求方式
.allowedHeaders("*") //放行哪些原始请求头部信息
//.exposedHeaders("header1", "header2") //暴露哪些头部信息
.allowCredentials(false) //是否发送 Cookie
.maxAge(3600);
// Add more mappings...
}
}