一、封装请求和发送请求1.封装axiosimport axios from ‘axios’const host = ‘http://localhost:3000’import Qs from ‘qs’var Net = { //请求问题接口 getqueslist(cp_id, c_id, type, page) { return new Promise(function(resolve, reject) { axios .get(${host}/api/question/list, { params: { cp_id, c_id, type, page } }) .then(function(res) { res.data.code == 0 ? resolve(res) : reject(‘错误:’, res.status) }) }) }, collect(user_id, q_id) { return axios.post( ${host}/api/favourite/add, Qs.stringify({ user_id, q_id }) ) },}export default Net2.组件调用接口import Net from ‘@/pages/api/net’export default { async asyncData() { let res1 = await Net.getanswerList() let res2 = await Net.getcard() let res3 = await Net.getSort() res3.data.data.splice(4, res3.data.data.length - 4) return { answerList: res1.data.data, cardList: res2.data.data[0].banner_list, sortList: res3.data.data } }}二、nuxt使用swiper<template> <div> <div class=“answerpeople”> <div class=“peoplediv” v-if=“answerList.length>0” v-swiper:mySwiper=“swiperOption”> <div class=“swiper-wrapper”> <div :key=“index” class=“swiperdiv swiper-slide” v-for="(item,index) of answerList"> <img :src=“item.headImg” alt> <p>{{item.nickname}}正在疯狂刷题中</p> </div> </div> </div> </div> </div></template><script>import Vue from ‘vue’import ‘swiper/dist/css/swiper.css’if (process.browser) { const VueAwesomeSwiper = require(‘vue-awesome-swiper/dist/ssr’) Vue.use(VueAwesomeSwiper)}export default { props: { answerList: { type: Array, required: true } }, data() { return { swiperOption: { direction: ‘vertical’, slidesPerView: 3, loop: true, observeParents: true, observer: true, autoplay: { disableOnInteraction: false, delay: 1000 } } } }}</script><style lang=“stylus” scoped>.answerpeople margin-top 0.8rem /* 30/37.5 / padding 0rem 0.533333rem / 20/37.5 / margin-bottom 2.4rem / 90/37.5 / font-size 13px .peoplediv background-image url(‘http://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xearn.png') background-repeat no-repeat background-size 100% height 3.653333rem / 137/37.5 / overflow hidden border-radius 8px .swiperdiv display flex height 0.8rem / 30/37.5 / !important padding 0.133333rem / 5/37.5 / 0rem background-color rgba(255, 255, 255, 0.73) border-radius 15px margin-bottom 5px img width 0.8rem / 30/37.5 / height 0.8rem / 30/37.5 */ border-radius 100% margin-right 5px p align-self center</style>
