如何编写前后端（React与后端）共用的请求参数配置文件？

要实现前后端统一请求参数名、避免硬编码，最直接的方式是用JSON格式的共用配置文件——它跨语言、易维护，前后端都能直接解析。以下是具体实现步骤：

1. 创建共用配置文件 #

在项目根目录（或前后端都能访问的共享目录）创建api-params.json，定义所有需要统一的参数名：

{
  "userPhone": "phone"
}

这里userPhone是语义化的键名，phone是实际接口使用的参数名，后续修改参数名只需要更新这个文件。

2. 后端（Django ApiView）实现 #

编写配置加载工具 #

在Django app下创建api_config.py，用来加载配置文件：

import json
import os

def load_api_params():
    # 根据项目结构调整配置文件路径，确保能正确读取
    config_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), '../api-params.json')
    with open(config_path, 'r', encoding='utf-8') as f:
        return json.load(f)

# 全局加载配置，避免重复读取文件
API_PARAMS = load_api_params()

在View中使用配置 #

修改你的ApiView代码，从配置中读取参数名：

from rest_framework.views import APIView
from .api_config import API_PARAMS

class UserView(ApiView):
    def get(self, request):
        username = request.GET.get(API_PARAMS['userPhone'])
        # 后续业务逻辑处理

3. 前端（React）实现 #

React支持直接导入JSON文件，在请求代码中使用配置即可：

import axios from 'axios';
import apiParams from '../api-params.json'; // 路径根据项目结构调整

// 发送GET请求示例
const fetchUser = () => {
  axios.get('/api/user', {
    params: {
      [apiParams.userPhone]: '138xxxxxxx' // 使用配置中的参数名
    }
  })
  .then(res => {
    console.log(res.data);
  })
  .catch(err => {
    console.error(err);
  });
};

注意事项 #

• 版本同步：把api-params.json加入Git仓库，前后端开发者更新配置后同步拉取，避免参数名不一致。
• 路径适配：根据项目目录结构调整配置文件的读取路径，后端可使用绝对路径避免出错。
• 类型校验（可选）：如果前端用TypeScript，可给配置文件添加类型定义；后端可使用Pydantic对配置做校验，防止键名拼写错误。

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