Django连接React|极客教程

Django连接React

简介

在Web开发中，经常会使用Django作为后端框架和React作为前端框架。Django提供了强大的后端支持和API开发功能，而React则提供了优秀的前端组件化和状态管理能力。本文将详细介绍如何在Django项目中集成React，并实现前后端的数据交互。

步骤

1. 创建Django项目

首先，我们需要创建一个Django项目。假设我们的项目名为my_django_project，执行以下命令：

django-admin startproject my_django_project
cd my_django_project

2. 创建Django App

接着，我们创建一个Django应用程序。假设我们的应用程序名为my_app，执行以下命令：

python manage.py startapp my_app

3. 配置Django项目

3.1 在settings.py中安装CORS

安装Django CORS插件，支持跨域资源共享：

pip install django-cors-headers

在settings.py中配置CORS：

INSTALLED_APPS = [
    ...
    'corsheaders',
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True

3.2 配置URL

在urls.py中配置url：

from django.urls import path
from my_app import views

urlpatterns = [
    path('api/', views.api),
]

在views.py中定义视图函数：

from django.http import JsonResponse

def api(request):
    data = {'message': 'Hello from Django'}
    return JsonResponse(data)

4. 创建React App

在Django项目根目录下创建React应用程序。假设我们的React应用程序名为my_react_app，执行以下命令：

npx create-react-app my_react_app
cd my_react_app

5. 连接React和Django

5.1 安装Axios

Axios是一个HTTP客户端，用于在JavaScript中发送HTTP请求。我们将使用Axios在React应用程序中发送GET请求到Django后端。

在React应用程序中安装Axios：

npm install axios

5.2 编写React组件

在App.js中编写React组件，实现从Django后端获取数据并显示在页面上：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    axios.get('http://localhost:8000/api/')
      .then(res => {
        setMessage(res.data.message);
      });
  }, []);

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
}

export default App;

6. 运行项目

分别在Django项目和React项目根目录下运行以下命令：

# 运行Django项目
python manage.py runserver

# 运行React项目
npm start

在浏览器中打开http://localhost:3000，即可看到从Django后端获取到的数据显示在页面上。

结论

通过以上步骤，我们成功地在Django项目中连接了React，并实现了前后端的数据交互。这为我们开发复杂的Web应用提供了一种有效的解决方案，同时也展示了Django和React在现代Web开发中的重要性和灵活性。

Django连接React