第一步 使用 脚手架安装vue/axios 具体相关百度文档
第二步 在src文件里面新建文件夹api,在api文件里面新建两个js(ajax.js和index.js)
ajax.js里面对axios进行封装
import axios from 'axios' //引用安装好的axios
const baseURL = 'http://admin.baidu.com/'
const service = axios.create({
baseURL: baseURL, // url = base url + request url
withCredentials: true, // send cookies when cross-domain requests
// timeout: 5000, // request timeout
crossDomain: true
})
//params 用于get请求 拼接在url后面
//data 用于post请求放在请求体里面
export default function ajax(url = '', params = {}, data = {}) {
// 1. 定义promise对象
let promise;
return new Promise((resolve, reject) => {
/* 拼在URL后面的参数 */
let paramsStr = '';
//如果所有接口有一个统一的必传的值可在这设置
/* paramsStr += 'version' + '=' + "1.4" + '&'; //版本
paramsStr += 'app' + '=' + "1" + '&'; //app */
Object.keys(params).forEach(key => {
paramsStr += key + '=' + params[key] + '&'
});
if (paramsStr !== '') {
paramsStr = paramsStr.substr(0, paramsStr.lastIndexOf('&'))
}
url += '?' + paramsStr;
promise = service.post(url, data)
// 3. 返回请求的结果
promise.then((response) => {
resolve(response.data)
}).catch(error => {
reject(error)
})
})
}
index.js
import ajax from './ajax' //引用封装好的axios
const api = {} //新建一个api对象 里面放开发时使用的一系列接口
api.homePage = (params, data) => ajax(`api/home/homePage`, params, data)
export default api //将新建好的api对象模块指定默认输出
在main.js里面进行引用
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import index from "./api/index.js" //引用 存放一系列接口的api对象
Vue.prototype.$api = index; //设置全局变量 可以在各个页面中使用调用接口 不用在每个页面中单独导入使用
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
在某个页面中进行使用 比如在home.vue中使用
<template>
<div>
<van-search v-model="value" placeholder="请输入搜索关键词" input-align="center" />
<van-swipe class="my-swipe" indicator-color="#3499fc" :autoplay="3000">
<van-swipe-item v-for="(item,index) in banner" :key='index'>
<van-image :src="item.img" fit="cover" width="100%" height="140px" />
</van-swipe-item>
</van-swipe>
<van-grid>
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
</van-grid>
</div>
</template>
<script>
export default {
data() {
return {
value: "sa",
banner: ''
}
},
methods: {
uindex() {
//直接调用全局方法 homePage 为你在index.js里面 设置的api.xxx方法 直接调用使用即可
this.$api.homePage({
screen_type: "",
screen_id: "",
screen_name: ""
}, {
token: ''
}).then(res => {
// console.log(res)
this.banner = res.data.list.banner
}).catch(function(error) {
console.log(error);
});
}
},
mounted() {
//对调用接口方法进行加载
this.uindex()
},
onLoad() {
}
}
</script>
<style scoped>
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
line-height: 150px;
text-align: center;
background-color: #39a9ed;
}
.van-image {
display: block;
}
</style>
网友评论