Vue3 京东到家项目实战第二篇（商家详情页面及购物车完整逻辑开发） 进阶式掌握vue3完整知识体系

目录

封装axios请求💙

商家详情页面的实现 💜 

页面样式实现

页面防抖

省略号表示多余内容

通过 watchEffect 巧妙的进行代码拆分

底部购物车样式开发❤️ 

购物车数据联动 💚 

同步改变选中数字与金额

根据购物车选中状态实现计算金额

清空购物车功能

本地存储保存购物车数据

---

个人主页：小杰学前端

Vue3 京东到家项目实战第一篇：京东到家（首页及登录功能开发）

项目源码在文章最后哦🙋🙋🙋

封装axios请求 💨 

在第一篇中我们的附近店铺是写死的数据，我们把它通过接口请求过来。 

在 util 下的 request.js 中我们还需要写一个 get 请求来获取附近店铺的数据，那我们创建一个 axios 实例对象，在里面配置参数，这样就不需要在每个请求里都设置 baseURL 了。

const instance = axios.create({
  baseURL: 'https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd',
  timeout: 10000
})

这样我们把原来的 post 进行一下封装：

export const post = (url, data = {}) => {
  return new Promise((resolve, reject) => {
    instance.post(url, data, {
      headers: {
        'Content-Type': 'application/json'
      }
    }).then((response) => {
      resolve(response)
    }, err => {
      reject(err)
    })
  })
}

然后再写一个 get 请求：

export const get = (url, params = {}) => {
  return new Promise((resolve, reject) => {
    instance.get(url, { params }).then((response) => {
      resolve(response)
    }, err => {
      reject(err)
    })
  })
}

现在附近店铺的数据我们是写在 setup 里：

现在我们就要改成从后端接口来请求相关数据 ，删掉这些数据然后把刚刚定义的get方法引入进来，向接口发送get请求，这里请求的接口在接口文档里：

我们调用封装的 get 请求，把url设置为热门店铺的接口地址 ：

import { ref } from 'vue'
import { get } from '../../utils/request'
export default ({
  name: 'NearBy',
  setup () {
    const nearbyList = ref([])
    const getNearbyList = async () => {
      const result = await get('/api/shop/hot-list')
      console.log(result)
    }
    getNearbyList()
    return {
      nearbyList,
      getNearbyList
    }
  }
})

打印一下返回的结果，启动项目，查看控制台输出：

现在后端的数据就被我们接收到了。

我们修改一下 NearBy 中的代码：

export default ({
  name: 'NearBy',
  setup () {
    // const router = useRouter()
    const nearbyList = ref([])
    const getNearbyList = async () => {
      const result = await get('/api/shop/hot-list')
      if (result.data.errno === 0) {
        nearbyList.value = result.data.data
      }
    }
    getNearbyList()
    return {
      nearbyList
    }
  }
})

把原来的 nearblList 通过ref设置为响应式的数组，然后把 get 请求回来的数据赋给我们定义好的数组，当然视图模板里的内容也需要改动，我们先看一下接口信息：

在原来的视图模板中，循环列表里的信息时，key我们定义的是 id ，但是在后端给我们的接口数据结构中就不是 id 了，而是 _id，所以我们都得参照这个数据结构进行修改，修改后的代码如下：