技术问询：是否创建data.js存储JSON数据？React+Redux搜索结果页方案

方案一：直接创建data.js存放数据 #

• 适合简单场景，直接在data.js里导出JSON对象，示例代码：

  // data.js
  export const mockSearchResults = [
    { id: 1, title: "搜索结果1", content: "对应内容描述..." },
    { id: 2, title: "搜索结果2", content: "对应内容描述..." }
  ];
  

• 优点：不需要额外服务器，本地直接导入使用，开发速度快
• 缺点：没法模拟真实HTTP请求的完整流程，比如加载状态、请求失败等场景；数据更新得改代码重新编译

方案二：用http-server托管独立JSON文件 #

• 创建search-data.json文件存放数据，示例：

  {
    "results": [
      { "id": 1, "title": "搜索结果1", content: "对应内容描述..." },
      { "id": 2, "title": "搜索结果2", content: "对应内容描述..." }
    ]
  }
  

• 启动http-server后，通过fetch('/search-data.json')或者Redux异步中间件（比如Redux Thunk）发起请求获取数据
• 优点：完全模拟真实API请求流程，能测试加载、错误状态；修改数据直接改JSON文件就行，不用重新编译
• 缺点：需要额外启动静态服务器，但http-server本身很轻量，npx http-server命令就能快速启动

方案三：使用Mock服务工具（进阶） #

• 比如用json-server，它支持路由、查询参数、分页等更贴近真实API的功能，适合复杂搜索场景
• 示例：创建db.json后，启动npx json-server --watch db.json，就能通过GET /results?q=关键词模拟带搜索过滤的接口
• 优点：支持搜索、分页、增删改等RESTful操作，能更好地模拟真实后端行为，适合需要复杂交互的搜索页
• 缺点：比http-server多一点学习成本，但配置简单，性价比很高

总结建议 #

• 若只是快速搭建静态搜索页，data.js足够用；
• 若需要模拟真实请求流程，优先选http-server托管JSON文件；
• 若搜索逻辑复杂（比如需要关键词过滤、分页），直接用json-server更省心。

内容的提问来源于stack exchange，提问作者justsach.in