첫 번째 단계: 특정 패키징 도구:
프로젝트 루트 디렉터리 아래에 utils 디렉터리를 만들고 그 안에 http.js 파일을 만듭니다.
// 二次封装axios
import axios from 'axios'
// 全局配置
// 根据环境变量区分接口默认地址（前缀）
switch (process.env.NODE_ENV) {
case 'prod':
axios.defaults.baseURL = 'http:/www.hcshow.online/blog'
break
case 'test':
axios.defaults.baseURL = 'http://localhost/blog'
break
default:// dev
axios.defaults.baseURL = 'http://127.0.0.1/blog'
}
// 请求超时时间
axios.defaults.timeout = 6000
// CROS跨域是否允许凭证
axios.defaults.withCredentials = true
// axios.post默认情况下传递到后台的数据是JSON格式的
// 通过下面方式设置POST请求头，告诉服务器请求主体的数据格式：a=aaaa&b=bbbb
// 需要导入 import qs from 'qs'
// axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
// axios.defaults.transformRequest = data => qs.stringify(data)
// 请求拦截器：axios前置拦截
axios.interceptors.request.use(config => {
// config指请求对象
// 通过axios请求拦截器添加token，保证拥有获取数据的权限
const token = window.localStorage.getItem('token')
if (token !== null) {
config.headers.Authorization = token
}
return config
}, error => {
// 如果拦截失败返回失败信息
return Promise.reject(error)
})
// // 自定义响应成功的HTTP状态码（一般情况下用配置）
// // 设置什么才算成功，什么时候才算失败
// axios.defaults.validateStatus = status => {
// // 默认大于等200小于300的才算成功
// return /^(2|3)\d{2}$/.test(status) //设置2和3开头的都算成功
// }
// 响应拦截器：axios后置拦截
axios.interceptors.response.use(res => {
return res
}, error => {
// 请求已发送，只不状态码不是200系列，设置不同状态码的不同处理
if (error.response) {
// 如果服务器有返回信息
switch (error.response.status) {
case 401: // 当前请求需要用户登录（一般是未登录）
break
case 403: // 服务器已经理解请求，但是拒绝执行它（一般是TOKEN过期）
localStorage.removeItem('token')
// 跳转的登录页面
break
case 404: // 请求失败，资源没有找到
break
}
return Promise.reject(error.response)
} else {
// 如果服务器没有返回信息
// 断网处理
if (!window.navigator.onLine) {
// 网络断开时，让其跳转到其它网页
return
}
return Promise.reject(error)
}
})
export default axios
프로젝트가 환경 변수에 따라 인터페이스의 기본 주소를 구별할 수 있도록 하려면 package.json에서 이를 구성해야 합니다.
"scripts": {
"serve": "vue-cli-service serve",
"comment1": "测试环境",
"serve:test": "set NODE_ENV=test&&vue-cli-service serve",
"comment1": "生产环境",
"serve:prod": "set NODE_ENV=prod&&vue-cli-service serve",
……
},
그 후 npm run Serve:test를 이용해 테스트 환경을 시작하면, 이때 해당 서버 연결 루트 주소는 http://localhost/blog…
2단계: 서버 코드
@GetMapping("/f11")
public String f11(Integer pageNum, Integer pageSize) {
return pageNum + " : " + pageSize;
}
@PostMapping("/f21")
public String f21(@RequestBody String param) {
return param;
}
3단계: API 중앙 집중식 관리
관리 인터페이스의 용이성을 위해 중앙 집중식 관리 API가 채택되었습니다.
프로젝트 루트 디렉터리 아래에 api 디렉터리를 생성한 후 그 안에 user.js, blog.js, api.js를 차례로 생성합니다.
- user.js
import axios from '../utils/http'
function login () {
return axios.post('/f21', {
data: {
username: 'zhagnsan',
password: '1234'
}
})
}
export default {
login
}
- blog.js
import axios from '../utils/http'
function getBlogsWithPage () {
return axios.get('/f11', {
params: {
pageNum: 11,
pageSize: 8
}
})
}
export default {
getBlogsWithPage
}
- api.js: 중앙 집중식 가져오기에 사용됩니다.
// 定义数据请求的唯一入口
import user from './user'
import blog from './blog'
export default {
user,
blog
}
4단계: main.js 파일에 전역적으로 소개합니다.
import api from './api/api'
Vue.prototype.$api = api
5단계: vue 페이지에서 구체적으로 사용합니다.
<template>
<div class="home">
<button @click="getFun">发送get请求</button>
<button @click="postFun">发送post请求</button>
</div>
</template>
<script>
export default {
methods: {
getFun () {
this.$api.blog.getBlogsWithPage().then(res => {
console.log(res)
})
},
postFun () {
this.$api.user.login().then(res => {
console.log(res)
})
}
}
}
</script>