vue2.0 + vux （五）api接口封装 及 首页 轮播图制作

npm install jquery --save
npm install whatwg-fetch --save

/**
* 引入 异步请求API
*/
import "whatwg-fetch"const host_addr='http://192.168.1.110:8081/'/**
* 获取资讯列表
*/
export let getList = async (page, tag) => {
let response = await fetch(host_addr + `news_list?pageIndex=${page}&pageSize=20&catalog=${tag}`, {
method: 'GET',
mode: 'cors'
}).catch((error) => {
console.log(error)
})
return await response.json().catch((error) => {
console.log(error)
})
}/**
* 获取资讯详情
*/
export let getNewsDetail = async (id) => {
let response = await fetch(host_addr + `news_detail?id=${id}`, {
method: 'GET',
mode: 'cors'
}).catch((error) => {
console.log(error)
})
return await response.json().catch((error) => {
console.log(error)
})
}/**
* 获取博客列表
*/
export let getBlogList = async (page, tag) => {
let response = await fetch(host_addr + `blog_list?pageIndex=${page}&pageSize=20&catalog=${tag}`, {
method: 'GET',
mode: 'cors'
}).catch((error) => {
console.log(error)
})
return await response.json().catch((error) => {
console.log(error)
})
}/**
* 获取问答列表
*/
export let getQuestionList = async (page, tag) => {
let response = await fetch(host_addr + `question_list?pageIndex=${page}&pageSize=20&catalog=${tag}`, {
method: 'GET',
mode: 'cors'
}).catch((error) => {
console.log(error)
})
return await response.json().catch((error) => {
console.log(error)
})
}/**
* 获取活动列表
*/
export let getEventList = async (page, tag) => {
let response = await fetch(host_addr + `event_list?pageIndex=${page}&pageSize=20&catalog=${tag}`, {
method: 'GET',
mode: 'cors'
}).catch((error) => {
console.log(error)
})
return await response.json().catch((error) => {
console.log(error)
})
}

<!-- 资讯 -->
<template>
<div>
<!-- 轮播图 -->
<swiper :list="imgs" auto style="width:100%;height:120px;margin:0 auto;" dots-class="custom-bottom" dots-position="center"></swiper>
</div>
</template><script>
// 引入 vux 内部组件
import { Swiper } from 'vux'
// 引入 api接口文档
import { getList } from '../../api' // 轮播图列表
const imgList = [
'http://file06.16sucai.com/2016/0222/17714c3b51079911760e5ef7fdb553f6.jpg',
'http://pic.58pic.com/58pic/15/67/98/93C58PICjeM_1024.jpg',
'http://file06.16sucai.com/2016/0315/1df566087c24a94cd9534bc9bc1871ff.jpg'
]; // 轮播图图片地址列表
const urlList = imgList.map((one, index) => ({
url: 'javascript:', //这里填写图片点击的链接
img: one
})); export default {
name: 'NewsList',
components:{
Swiper
},
data(){
return {
imgs:urlList,
}
}
}
</script>