《VUE+Django：电商独立站打造详解》2.7.4 商品集市页功能实现

在前面的页面设计中，我们希望商品集市呈现这样的效果

这个页面通过分页的方式展现当前上架的所有商品，包括：分类筛选、按条件排序、商品展示、分页

1.分类筛选：提供下拉选项，用户可以选择关注的商品类型，例如衣服、鞋子、奶瓶等

2.按条件排序：可根据综合、销量、价格排序。也可以选择价格区间进行筛选

3.商品展示：使用卡片的方式展示商品，包括主图展示和价格信息

4.分页：由于上架的商品很多，不可能一次性展示所有的商品，通过分页方式，每次获取固定数量的商品
 

在src/pages/AllProducts.vue中加入以下代码。主要是使用ElementUI以下几个控件。后面在实现服务端功能时对代码中需要动态获取的数据功能进行完善。

1. el-select实现下拉选项
2. el-radio-group实现单选
3. el-input-number实现计数器
4. el-pagination实现分页功能​

<template>
  <div>
    <el-row>
      <el-col :span="6">
        <div class="filter">
          <h3>所有分类</h3>
          <el-row>
            <el-col :span=&