React电商练手项目：如何实现复杂数据库查询需求？

方案1：用json-server增强db.json的查询能力（最快上手，无需更换数据库） #

如果不想立刻切换到数据库，json-server可以给你的db.json文件添加mockapi同款的查询、排序功能，完全满足练手需求：

• 安装：在项目根目录执行 npm install json-server --save-dev
• 配置：在package.json里添加启动脚本：

  "scripts": {
    "server": "json-server --watch db.json --port 3001"
  }
  

• 启动后端：运行 npm run server
• 前端请求示例：
  • 获取ID为1、2、3的商品：fetch('http://localhost:3001/products?id=1&id=2&id=3')
  • 按价格升序排序：fetch('http://localhost:3001/products?_sort=price&_order=asc')
  • 还支持分页、范围过滤（比如价格≥100：?price_gte=100），完全覆盖mockapi的常用功能。

方案2：搭建PHP+MySQL后端（你提到的技术栈） #

如果想尝试传统后端技术，步骤如下：

1. 搭建环境：下载XAMPP，启动Apache和MySQL服务
2. 创建数据库：
   • 打开phpMyAdmin（默认地址http://localhost/phpmyadmin），创建名为ecommerce的数据库
   • 创建products表，字段包括id（主键自增）、name、price、category_id等
3. 写PHP接口：在XAMPP的htdocs目录下创建api文件夹，新建get_products.php：

   <?php
   header("Content-Type: application/json");
   $conn = new mysqli("localhost", "root", "", "ecommerce");
   
   // 处理批量ID查询
   $ids = $_GET['ids'] ?? '';
   // 处理排序
   $sortBy = $_GET['sortBy'] ?? 'id';
   $order = $_GET['order'] ?? 'asc';
   
   $sql = "SELECT * FROM products";
   if ($ids) {
       $idArray = explode(',', $ids);
       $idPlaceholders = implode(',', array_fill(0, count($idArray), '?'));
       $sql .= " WHERE id IN ($idPlaceholders)";
   }
   $sql .= " ORDER BY $sortBy $order";
   
   $stmt = $conn->prepare($sql);
   if ($ids) {
       $stmt->bind_param(str_repeat('i', count($idArray)), ...$idArray);
   }
   $stmt->execute();
   $result = $stmt->get_result();
   $products = $result->fetch_all(MYSQLI_ASSOC);
   
   echo json_encode($products);
   $stmt->close();
   $conn->close();
   ?>
   

4. 前端请求：
   • 获取ID1、2、3的商品：fetch('http://localhost/api/get_products.php?ids=1,2,3')
   • 按价格降序：fetch('http://localhost/api/get_products.php?sortBy=price&order=desc')

方案3：Node.js+Express+MySQL（更适配React的全栈练手） #

如果想和React用同一种语言写后端，这个方案更合适：

1. 初始化Node项目：在项目外新建backend文件夹，执行 npm init -y，然后安装依赖：npm install express mysql2 cors
2. 写后端接口：新建server.js：

   const express = require('express');
   const mysql = require('mysql2');
   const cors = require('cors');
   const app = express();
   app.use(cors());
   
   const db = mysql.createConnection({
       host: 'localhost',
       user: 'root',
       password: '',
       database: 'ecommerce'
   });
   
   // 获取商品接口
   app.get('/api/products', (req, res) => {
       const { ids, sortBy, order } = req.query;
       let sql = 'SELECT * FROM products';
       let params = [];
   
       if (ids) {
           const idList = ids.split(',');
           sql += ' WHERE id IN (?)';
           params.push(idList);
       }
       sql += ` ORDER BY ${sortBy || 'id'} ${order || 'asc'}`;
   
       db.query(sql, params, (err, results) => {
           if (err) throw err;
           res.json(results);
       });
   });
   
   app.listen(3001, () => console.log('Backend running on port 3001'));
   

3. 启动后端：node server.js
4. 前端请求和方案2类似，地址换成http://localhost:3001/api/products即可

内容的提问来源于stack exchange，提问作者ghustaff Strudiewic