VUE构建微商城七：分类页面的实现

前端

2023-12-17 00:05:57

VUE微商城分类页面：实现商品浏览与分类管理

分类页面概述

分类页面在VUE微商城项目中扮演着至关重要的角色，它允许用户浏览和挑选商品。本文将深入探讨分类页面的设计与实现，涵盖以下关键主题：

分类页面布局
左侧一级分类菜单
右侧商品列表
一级分类数据获取

分类页面布局

分类页面采用标准的布局，分为两部分：

左侧一级分类菜单： 显示所有的一级分类，用户可点击相应分类查看其下的二级分类和商品。
右侧商品列表： 展示当前一级分类下的所有商品。

左侧一级分类菜单

左侧菜单负责显示一级分类。可以通过以下步骤实现：

发送API请求获取分类数据。
循环遍历获取的分类数据并渲染为列表项。

右侧商品列表

右侧商品列表展示当前一级分类下的商品。实现步骤如下：

发送API请求获取商品数据。
循环遍历获取的商品数据并渲染为列表项。

一级分类数据获取

通过API请求获取一级分类数据，具体步骤如下：

在App.vue组件中发送API请求获取一级分类数据。
使用响应数据填充一级分类菜单。

代码示例

获取一级分类数据（App.vue）

import { ref } from 'vue'

export default {
  setup() {
    const categories = ref([])

    fetch('/api/categories')
      .then(res => res.json())
      .then(data => {
        categories.value = data
      })

    return {
      categories
    }
  }
}

渲染一级分类菜单（CategoryView.vue）

<template>
  <ul class="category-list">
    <li v-for="category in categories" :key="category.id">
      <a :href="'/category/' + category.id">{{ category.name }}</a>
    </li>
  </ul>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const categories = ref([])

    fetch('/api/categories')
      .then(res => res.json())
      .then(data => {
        categories.value = data
      })

    return {
      categories
    }
  }
}
</script>

渲染商品列表（ProductListView.vue）

<template>
  <ul class="product-list">
    <li v-for="product in products" :key="product.id">
      <a :href="'/product/' + product.id">{{ product.name }}</a>
    </li>
  </ul>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const products = ref([])

    fetch('/api/products')
      .then(res => res.json())
      .then(data => {
        products.value = data
      })

    return {
      products
    }
  }
}
</script>