石家庄网站建设诚荐优度网络,一键生成app软件下载,十四冶建设集团技工学校网站,企业建网站多少钱第一步#xff1a;具体封装工具#xff1a;
在项目根目录下创建utils目录#xff0c;然后在其中创建文件http.js#xff1a;
// 二次封装axios
import axios from axios// 全局配置
// 根据环境变量区分接口默认地址#xff08;前缀#xff09;
switch (process.env.NO…第一步具体封装工具
在项目根目录下创建utils目录然后在其中创建文件http.js
// 二次封装axios
import axios from axios// 全局配置
// 根据环境变量区分接口默认地址前缀
switch (process.env.NODE_ENV) {case prod:axios.defaults.baseURL http:/www.hcshow.online/blogbreakcase test:axios.defaults.baseURL http://localhost/blogbreakdefault:// devaxios.defaults.baseURL http://127.0.0.1/blog
}
// 请求超时时间
axios.defaults.timeout 6000// CROS跨域是否允许凭证
axios.defaults.withCredentials true// axios.post默认情况下传递到后台的数据是JSON格式的
// 通过下面方式设置POST请求头告诉服务器请求主体的数据格式aaaaabbbbb
// 需要导入 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: // 当前请求需要用户登录一般是未登录breakcase 403: // 服务器已经理解请求但是拒绝执行它一般是TOKEN过期localStorage.removeItem(token)// 跳转的登录页面breakcase 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_ENVtestvue-cli-service serve,comment1: 生产环境,serve:prod: set NODE_ENVprodvue-cli-service serve,
……
},之后采用npm run serve:test会启动测试环境此时对应的服务器连接根地址为http://localhost/blog……
第二步服务器代码
GetMapping(/f11)
public String f11(Integer pageNum, Integer pageSize) {return pageNum : pageSize;
}
PostMapping(/f21)
public String f21(RequestBody String param) {return param;
}第三步API集中式管理
采用集中式管理API是为了便于管理接口。 在项目根目录下创建目录api然后依次在其中创建user.js、blog.js、api.js
user.js
import axios from ../utils/httpfunction login () {return axios.post(/f21, {data: {username: zhagnsan,password: 1234}})
}export default {login
}blog.js
import axios from ../utils/httpfunction getBlogsWithPage () {return axios.get(/f11, {params: {pageNum: 11,pageSize: 8}})
}export default {getBlogsWithPage
}api.js用来进行集中导入
// 定义数据请求的唯一入口
import user from ./user
import blog from ./blogexport default {user,blog
}第四步在main.js文件中全局引入
import api from ./api/api
Vue.prototype.$api api第五步在vue页面中具体使用
templatediv classhomebutton clickgetFun发送get请求/buttonbutton clickpostFun发送post请求/button/div
/templatescriptexport default {methods: {getFun () {this.$api.blog.getBlogsWithPage().then(res {console.log(res)})},postFun () {this.$api.user.login().then(res {console.log(res)})}}}
/script启动项目测试
