<p>老师这是HelloWorld.vue</p>
<template>
<div class="hello">
<h3>Hello World</h3>
<ul>
<li v-for="(item, index) in banner" :key="index">
<p>{{ item.title }}</p>
</li>
</ul>
</div>
</template>
<script>
import api from "../api";
export default {
name: "HelloWorld",
data() {
return {
banner: [],
};
},
created() {},
mounted() {
// axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php").then(res =>{
// this.banner = res.data.banner
// })
// /**
// * user_id=iwen@qq.com&password=iwen123
// */
// axios.post("http://iwenwiki.com/api/blueberrypai/login.php",qs.stringify({
// user_id:"iwen@qq.com",
// password:"iwen123",
// verification_code:"crfvw"
// })).then(res =>{
// console.log(res.data);
// })
api.getBanner().then((res) => {
this.banner = res.data.banner;
});
api.getLogin({
user_id: "iwen@qq.com",
password: "iwen123",
verification_code: "crfvw",
}).then(res =>{
console.log(res.data);
}).catch(error =>{
console.log(error);
})
},
updated() {},
destoryed() {},
};
</script>/*request.js文件*/
import axios from "axios"
import qs from "querystring"
/*
*错误信息处理函数
*/
const errorsHandle = (status,info) =>{
switch(status){
case 400:
console.log("语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求。")
break;
case 401:
// token:令牌
console.log("服务器认证失败")
break;
case 403:
console.log("服务器已经理解请求，但是拒绝执行它");
break;
case 404:
console.log("请检查网络请求地址")
break;
case 500:
console.log("服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的程序码出错时出现。")
break;
case 502:
console.log("作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。")
break;
default:
console.log(info)
break;
}
}
/*
*创建Axios的实例对象
*/
var instance = axios.create({
timeout: 5000,
});
/*
*拦截器
*/
instance.interceptors.request.use(
config =>{
if(config.method === "post"){
config.date = qs.stringify(config.data)
}
return config;
},
error =>{
return Promise.reject(error);
}
)
/*
*响应拦截
*/
instance.interceptors.request.use(
response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response) ,
error =>{
const { response } = error;
if(response){
errorsHandle(response.status,response.info);
}else{
console.log("请求被中断了");
}
}
)
export default instance;/*base.js文件*/
/*
*存储网路请求路径
*/
const base = {
baseUrl:"http://iwenwiki.com", // 公共地址
banner:"/api/blueberrypai/getIndexBanner.php", // 主页banner数据
login:"/api/blueberrypai/login.php" // 登陆地址
}
export default base;/*index.js文件*/
/*
*提供网路请求方法
*/
import axios from "../utils/request"
import base from "./base"
const api = {
getBanner(){
return axios.get(base.baseUrl + base.banner)
},
getLogin(params){ //params是一个对象类型
return axios.post(base.baseUrl + base.login,params)
}
}
export default api;
老师，帮我看一下是网络路径错了吗？
京公网安备 11011402011233号