【Vue3从零开始-实战】S12：首页列表数据动态化

2022-10-08 119

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue3从零开始-实战】S12：首页列表数据动态化

@@DVBVTGC2D7ROIYF4YK_@O.png

前言

实战已经开始了！之前的文章中，我们把登录注册并且都可以调用接口请求的功能做完了，而且把逻辑和组件都拆分出来单独维护。本篇文章主要是为后面的商家详情页做准

备，在首页中有一个店铺的列表，之前是在页面组件中把数据固定起来的，现在就需要将数据做成动态化了。而且还会将axios初始化的部分拆分出来，定义一些新的数据。

mock接口

🌀 动态化数据最关键的第一步就是把接口配置出来。

👉 在fastmock官网中配置列表接口

VT_5V37VTPYQ1D9J~3CLF1B.png

列表接口无需传参，所以使用get请求。

返回数据中配置了data，就是动态列表数据了。

封装get请求

👉 打开utils目录下面的request.js文件

PG(]NR$I0TG7N_Z25SIT0RN.png

👉 由于get请求也需要配置baseURL，所以需要将baseURL提取出来。

const $axios = axios.create({
  baseURL: 'https://www.fastmock.site/mock/eb925863ecc46f2108cd43d75f96c1cd/pro',
  time: 10000
})
复制代码

axios.create方法是初始化axios

初始化的时候，可以传入一个对象。

baseURL就可以放在对象里面，time就表示多长时间算请求超时。

👉 get请求函数

export const get = (url, params = {}) => {
  return new Promise((resolve, reject) => {
    $axios.get(url, { params }).then((response) => {
      resolve(response)
    }, err => {
      reject(err)
    })
  })
}
复制代码

get请求传入的是一个params。

需要结构出params中的数据才能传入接口，axios中的get函数会自动帮我们拼接解构出来的params。

Nearby.vue组件请求接口

🌀 在组件中请求接口，可以参考之前的Login和Register页面。

👉 引入所需的方法

import { ref } from 'vue'
import { get } from '../../utils/request'
复制代码

👉 在setup函数外层将逻辑封装

const useNearbyListEffect = () => {
  const nearbyList = ref([])
  const getNearbyList = async () => {
    const result = await get('/api/shop/list')
    if (result.data.code === 0 && result.data.data.length) {
      nearbyList.value = result.data.data
    }
  }
  return { nearbyList, getNearbyList }
}
复制代码

👉 setup函数中引用useNearbyListEffect函数

setup () {
    const { nearbyList, getNearbyList } = useNearbyListEffect()
    getNearbyList()
    return { nearbyList }
}
复制代码

进入首页就要获取列表数据，所以需要直接在setup函数中调用getNearbyList函数。

Nearby.vue组件改造

PZ@WQPU`%DJHJXN0[@4$C}D.png

🌀 由于接口定义的数据项和页面中有些部分不太吻合，所以我们需要重新改造一下。

👉 修改适配的数据值

<div class="nearby__item" v-for="item in nearbyList" :key="item.id">
    <img :src="item.imgUrl" class="nearby__item__img">
    <div class="nearby__content">
      <div class="nearby__content__title">{{item.name}}</div>
      <div class="nearby__content__tags">
        <span class="nearby__content__tag">月售：{{item.sales}}</span>
        <span class="nearby__content__tag">起送：{{item.expressLimit}}</span>
        <span class="nearby__content__tag">基础运费：{{item.expressPrice}}</span>
      </div>
      <p class="nearby__content__highlight">{{item.slogan}}</p>
    </div>
</div>
复制代码

中间的tags的数据并没有按照之前的数组形式返回，所以就无须嵌套循环了。

BHX7KLB$R[VV%RFO%WWW9{M.png

【Vue3从零开始-实战】S12：首页列表数据动态化

前言

mock接口

封装get请求

Nearby.vue组件请求接口

Nearby.vue组件改造

总结

热门文章

最新文章

相关课程

相关电子书