电商筛选革命：用Refine+MedusaJS打造毫秒级价格过滤体验-优快云博客

电商筛选革命：用Refine+MedusaJS打造毫秒级价格过滤体验

【免费下载链接】refine 一个用于构建内部工具、管理面板、仪表盘和B2B应用程序的React框架，具有无与伦比的灵活性。项目地址: https://gitcode.com/GitHub_Trending/re/refine

你是否还在为电商网站卡顿的价格筛选功能头疼？客户流失、转化率低迷、服务器负载过高——这些问题可能都源于低效的过滤实现。本文将展示如何利用Refine框架与MedusaJS电商后端，构建一个高性能、用户友好的产品价格筛选系统，让你在30分钟内掌握企业级筛选逻辑的设计精髓。

读完本文你将学到：

如何用Refine的useTable钩子实现服务端价格过滤
MedusaJS产品数据模型的最佳实践
前端滑块组件与后端API的高效协作模式
10万级商品数据下的性能优化技巧

技术架构概览

Refine作为React生态中专注于管理面板的框架，提供了声明式的数据获取与状态管理能力；而MedusaJS则是新兴的开源电商后端，以其模块化设计和灵活的数据模型著称。两者结合能快速构建复杂的电商筛选功能。

mermaid

核心技术栈

模块	技术选择	职责
前端框架	React + Refine	UI渲染与状态管理
数据网格	Ant Design Table	商品列表与筛选UI
电商后端	MedusaJS	产品数据管理与API
数据获取	Refine Medusa数据提供者	前后端数据交互
价格筛选	自定义Slider组件 + 服务端过滤	价格区间处理

实现步骤

1. 环境准备与项目初始化

首先确保已安装Node.js(16+)和npm(7+)，通过Refine的CLI创建项目并集成MedusaJS数据提供者：

npx create-refine-app@latest price-filter-demo --preset=antd
cd price-filter-demo
npm install @refinedev/medusa medusa-js

2. 配置MedusaJS数据提供者

在src/providers/data-provider.ts中配置Medusa数据提供者，连接到你的Medusa后端服务：

import { dataProvider } from "@refinedev/medusa";

export const medusaDataProvider = dataProvider({
  apiUrl: "https://your-medusa-backend.com",
  // 本地开发环境可使用 http://localhost:9000
});

3. 实现价格筛选UI组件

在src/components/PriceFilter.tsx中创建价格滑块组件，使用Ant Design的Slider组件实现区间选择：

import { Slider, Row, Col, Typography } from "antd";
import { useTable } from "@refinedev/core";

const { Text } = Typography;

export const PriceFilter = () => {
  const { setFilters } = useTable();
  
  const handlePriceChange = (value: number[]) => {
    setFilters([
      {
        field: "price",
        operator: "between",
        value: [value[0], value[1]],
      },
    ]);
  };
  
  return (
    <div style={{ padding: "20px" }}>
      <Row gutter={16}>
        <Col span={24}>
          <Text strong>价格区间筛选</Text>
        </Col>
        <Col span={24}>
          <Slider
            range
            min={0}
            max={1000}
            step={10}
            defaultValue={[0, 1000]}
            onChange={handlePriceChange}
            tooltip={{ formatter: (value) => `¥${value}` }}
          />
        </Col>
      </Row>
    </div>
  );
};

4. 集成筛选逻辑到商品列表页

在商品列表页面(src/pages/products/list.tsx)中，结合Refine的useTable钩子和Ant Design Table实现完整筛选功能：

import { useTable, useMany } from "@refinedev/core";
import { Table, Space, Tag } from "antd";
import { PriceFilter } from "@components/PriceFilter";

export const ProductList: React.FC = () => {
  const { tableProps, filters } = useTable({
    resource: "products",
    filters: {
      initial: [
        {
          field: "price",
          operator: "between",
          value: [0, 1000],
        },
      ],
    },
  });

  return (
    <div>
      <PriceFilter />
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="name" title="商品名称" />
        <Table.Column 
          dataIndex="price" 
          title="价格"
          render={(price) => `¥${price.toFixed(2)}`} 
        />
        <Table.Column 
          dataIndex="category" 
          title="分类"
          render={(category) => <Tag>{category}</Tag>} 
        />
      </Table>
    </div>
  );
};

5. 服务端过滤实现

MedusaJS后端需要支持价格区间查询，在产品服务中添加过滤逻辑。以下是MedusaJS产品控制器的示例代码：

// src/api/controllers/product.js
const ProductService = require("../services/product.service");

module.exports = {
  async listProducts(req, res) {
    const productService = new ProductService();
    const { price_min, price_max } = req.query;
    
    const filter = {};
    if (price_min || price_max) {
      filter.price = {};
      if (price_min) filter.price.$gte = Number(price_min);
      if (price_max) filter.price.$lte = Number(price_max);
    }
    
    const products = await productService.list({
      where: filter,
      select: ["id", "name", "price", "category", "thumbnail"],
    });
    
    res.json({ products });
  },
};

关键代码解析

Refine数据获取与过滤逻辑

在examples/store/src/lib/search-props.tsx中可以看到Refine与MedusaJS结合的典型用法：

// examples/store/src/lib/search-props.tsx
export const getSearchStaticProps = async () => {
  const medusaDataProvider = dataProvider(API_URL);
  
  const categories = await medusaDataProvider.getList({
    resource: "collections",
  });
  
  return {
    props: { categories },
    revalidate: 200, // 数据缓存时间(秒)
  };
};

这段代码展示了如何通过Refine的Medusa数据提供者获取产品分类数据，类似的模式可用于实现价格筛选的数据获取。

商品卡片组件实现

在examples/blog-next-refine-pwa/src/components/ProductCards.tsx中定义了商品展示卡片，包含价格显示逻辑：

// examples/blog-next-refine-pwa/src/components/ProductCards.tsx
const ProductCards: React.FC<Props> = ({
  price,
  title,
  category,
  description,
  cardImage,
}) => {
  return (
    <div className="relative max-w-xs pb-2 outline outline-[#042940]">
      <div className="relative flex items-center justify-center bg-[#fff] py-4">
        <img src={cardImage} alt={title} className="h-56 max-w-xs" />
      </div>
      <div className="px-4">
        <p className="mb-1 text-lg font-semibold text-black">{title}</p>
        <div className="flex justify-between">
          <p className="mb-2 mt-2 bg-[#042940] p-1 text-white">
            ${price}
          </p>
          <button className="mb-2 mt-2 bg-[#042940] p-1 text-white">
            Add to cart
          </button>
        </div>
        <p>{`${description.slice(0, 100)}`}...</p>
        <p className="bg-[#D6D58E] px-2 py-0.5 text-sm text-gray-600">
          {category}
        </p>
      </div>
    </div>
  );
};

性能优化策略

1. 数据库索引优化

为产品价格字段添加索引，显著提升查询性能：

// MedusaJS使用MongoDB时的索引创建
db.products.createIndex({ price: 1 });

2. 前端缓存与节流

使用Refine的useQuery钩子缓存和节流请求：

const { data, isLoading } = useQuery({
  queryKey: ["products", filters],
  queryFn: () => fetchProducts(filters),
  staleTime: 5 * 60 * 1000, // 5分钟缓存
});

3. 分页与虚拟滚动

当商品数量超过100条时，使用分页或虚拟滚动减少DOM节点数量：

<Table 
  {...tableProps}
  pagination={{ pageSize: 20 }}
  scroll={{ y: 600 }} // 固定高度启用虚拟滚动
/>

实际应用案例

在Refine的官方示例中，examples/store项目展示了完整的电商应用实现，其中examples/store/src/components/search.tsx文件实现了商品搜索与分类筛选功能，可作为价格筛选的参考：

// examples/store/src/components/search.tsx
export default function Search({ products }: { products?: MedusaProduct[] }) {
  const [filtersVisible, setFiltersVisible] = React.useState(false);
  const { data: categories } = useList<ProductCollection>({
    resource: "collections",
  });

  const router = useRouter();
  const { handle, q } = router.query;
  
  // 分类筛选逻辑
  const activeCategory = categories?.data?.find(
    (cat: ProductCollection) => cat.handle === handle,
  );
  
  return (
    <Container>
      <div className="mb-20 mt-3 grid grid-cols-1 gap-4 lg:grid-cols-12">
        {/* 侧边筛选栏 */}
        <div className="order-1 col-span-8 lg:order-none lg:col-span-2">
          {/* 分类筛选实现 */}
        </div>
        {/* 商品列表 */}
        <div className="order-3 col-span-8 lg:order-none">
          {/* 商品展示逻辑 */}
        </div>
      </div>
    </Container>
  );
}

总结与扩展

通过Refine与MedusaJS的结合，我们实现了一个功能完善、性能优异的电商价格筛选系统。关键收获包括：

Refine的声明式数据获取大幅简化了前端状态管理
MedusaJS提供了灵活的电商数据模型和API
服务端过滤确保了大数据量下的查询效率
组件化设计使功能扩展变得容易

后续扩展方向

添加多条件组合筛选（价格+分类+评分）
实现筛选结果的导出功能
集成用户行为分析，优化热门筛选区间
添加筛选条件的URL持久化，支持页面刷新和分享

要获取完整代码，可以访问项目仓库：

git clone https://gitcode.com/GitHub_Trending/re/refine.git
cd refine/examples/store
npm install
npm run dev

通过本文介绍的方法，你可以快速为电商平台添加专业级的价格筛选功能，提升用户体验和转化率。Refine的灵活架构和MedusaJS的电商能力相结合，为企业级应用开发提供了强大支持。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考