Django项目对接React.js 迁移HTML+Bootstrap UI并实现HTTP请求交互

• 先安装Bootstrap依赖：在React项目根目录执行npm install bootstrap，随后在入口文件（通常是src/index.js）顶部导入样式：import 'bootstrap/dist/css/bootstrap.min.css'，原有HTML用到的Bootstrap类名只需把class改成React要求的className即可完全复用样式，效果和之前的HTML页面完全一致。
• 原有自定义样式可以直接复制到React项目的src目录下，在对应组件顶部导入即可，比如import './custom-style.css'，不需要修改原有样式规则。
• 静态HTML结构直接迁移到React组件的return渲染区域即可，之前需要JS操作的动态内容，换成React的useState状态变量绑定到JSX中即可。

后端Django侧配置 #

• 首先解决跨域问题：安装django-cors-headers包，在settings.py的INSTALLED_APPS中添加corsheaders，在MIDDLEWARE列表的最上方添加corsheaders.middleware.CorsMiddleware，然后添加配置CORS_ALLOWED_ORIGINS = ['http://localhost:3000']（替换为你React服务的实际访问地址）。
• 接口可以直接用JsonResponse返回JSON格式数据，示例视图代码如下：

from django.http import JsonResponse

def test_api(request):
    if request.method == 'GET':
        # 业务逻辑处理
        res_data = {
            "code": 200,
            "msg": "请求成功",
            "data": {"content": "测试返回内容"}
        }
        return JsonResponse(res_data)
    elif request.method == 'POST':
        # 接收前端提交的JSON数据
        import json
        req_data = json.loads(request.body)
        # 处理提交逻辑
        return JsonResponse({"code": 200, "msg": "提交成功"})

• 最后在urls.py中绑定接口路由：path('api/test/', test_api, name='test_api')。

前端React侧请求实现 #

• 可以直接用浏览器内置的fetch API发送请求，也可以安装axios库简化请求逻辑，结合你提供的App组件，请求示例如下：

import { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [resData, setResData] = useState(null);

  // 组件挂载时发起GET请求获取Django接口数据
  useEffect(() => {
    fetch('http://localhost:8000/api/test/')
      .then(response => response.json())
      .then(data => {
        setResData(data);
      })
      .catch(err => console.log('请求错误', err));
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <h1>wow sucess</h1>
        {/* 渲染接口返回数据 */}
        {resData && <p>{resData.data.content}</p>}
      </header>
    </div>
  );
}

export default App;

• 如果需要发送POST请求，只需给fetch添加配置参数即可，示例如下：

fetch('http://localhost:8000/api/test/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({name: '测试内容'})
})
.then(res => res.json())
.then(data => console.log(data))

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