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

最新推荐文章于 2025-01-27 08:00:00 发布

转载最新推荐文章于 2025-01-27 08:00:00 发布 · 618 阅读

文章标签：

#javascript #json #ViewUI

本文介绍了一个使用whatwg-fetch进行API封装的方法，并展示了如何在前端项目中实现轮播图功能。通过具体实例，文章详细解释了API请求的处理方式及轮播图组件的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装 jquery 和 whatwg-fetch (优雅的异步请求API)

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

2.api接口封装

api/index.js

/**
 * 引入 异步请求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)
  })
}

3.轮播图

<!-- 资讯 -->
<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>

4.效果图