nuxt一些知識點（待補充）

1、封裝請求和發送請求
1.封裝axios

import 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 Net

2.組件調用接口

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
    }
  }
}

2、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>