前言
实战已经开始了！之前的文章中，我们把登录注册并且都可以调用接口请求的功能做完了，而且把逻辑和组件都拆分出来单独维护。本篇文章主要是为后面的商家详情页做准
备，在首页中有一个店铺的列表，之前是在页面组件中把数据固定起来的，现在就需要将数据做成动态化了。而且还会将axios初始化的部分拆分出来，定义一些新的数据。
mock接口
🌀 动态化数据最关键的第一步就是把接口配置出来。
👉 在fastmock官网中配置列表接口
- 列表接口无需传参，所以使用get请求。
- 返回数据中配置了data，就是动态列表数据了。
封装get请求
👉 打开utils目录下面的request.js文件
![PG(]NR$I0TG7N_Z25SIT0RN.png](https://ucc.alicdn.com/pic/developer-ecology/482075a9552e4beb88d5efd117fa421f.png?x-oss-process=image/resize,w_1400/format,webp "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组件改造
🌀 由于接口定义的数据项和页面中有些部分不太吻合，所以我们需要重新改造一下。
👉 修改适配的数据值
<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的数据并没有按照之前的数组形式返回，所以就无须嵌套循环了。
总结
由于本篇文章是为了之后的商家详情页的内容做准备，所以内容比较简单，主要是巩固之前学习的请求接口的方式和封装逻辑的方法。
