Django/React应用程序：如何在我的web应用程序中兼容Django URL（用于api发送数据）和React URL（用于呈现我的组件）

2024-10-02 02:34:32 发布

您现在位置：Python中文网/ 问答频道 /正文
8271 3

我刚刚在这个stackoverflow帖子之后，将它添加到我的react文件夹：re_path(r'^(?:.*)/?$', views.index),中的url.py中：react routing and django url conflict。我在开发工具中的错误是：未知的URL方案

然而，在我的情况下，这会产生问题。我将JSON发送到react的方法是通过url:"api/leads,"，该url现在不可访问。我如何为我的react URL提供一种与django URL和谐共存的方式？附件是我的django urls.py, react--> App.js, urls.py, views.py, index.html, and DataFetching.py（在这里您可以看到我如何从api发送数据）

Django:url.py

from django.urls import path
from . import views

urlpatterns = [
    path('api/lead/', views.LeadListCreate.as_view()),

]

Django项目：url.py

from django.contrib import admin
from django.urls import path, include, re_path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('leads.urls')),
    path('', include('frontend.urls')),
    
]

反应-->；url.py

from django.urls import path, re_path
from . import views

urlpatterns = [
    #path('', views.index),
    re_path(r'^(?:.*)/?$', views.index),
]

顺便说一句，我试图查看URL的文档（r^…），它没有告诉我如何导入它，而是说URL基本上与re_path相同；这可能是问题所在，但我仍然不知道解决办法

反应-->；views.py

from django.shortcuts import render


def index(request):
    return render(request, 'frontend/index.html')

反应-->；App.js

import './index.css';
import BellIcon from './icons/bell.svg';
import MessengerIcon from './icons/messenger.svg';
import CaretIcon from './icons/caret.svg';
import PlusIcon from './icons/plus.svg';
import DataFetching from "../DataFetching";
import DropdownMenu from "../DropDown";
import React, { useState } from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";


function App() {
  return (
    <Router>
    <div className="App">
      <Navbar>
        <NavItem icon={<PlusIcon />} />
        <NavItem icon={<BellIcon />} />
        <NavItem icon={<MessengerIcon />} />
        <NavItem icon={<CaretIcon />}>
          <h1> Hello World </h1>
          <DropdownMenu></DropdownMenu>
        </NavItem>
      </Navbar>
      
      <Switch>
          <Route path="/about">
            <About />
            <DataFetching />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
    </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

（还有更多，但并不相关）

DataFetching.js

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

function DataFetching() {
    const [leads, setLeads] = useState([])

    useEffect(() => {
        axios.get("api/lead")
            .then(res =>{
                console.log(res)
                setLeads(res.data)
            })
            .catch(err => {
                console.log(err)
            })
    }, [])
    return (
        <div>
            <ul>
                {
                    leads.map(lead => <li key={lead.id}>{lead.name} says {lead.message}</li>)
                }
            </ul>
        </div>
    )
}

export default DataFetching

index.html

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet">
    <title>React App</title>
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root">
      <!-- React will load here -->
  </div>
  {% load static %}
  <script src="{% static "frontend/main.js" %}"></script>
</body>

</html>

如果您有更好的方法将数据发送到我的react应用程序或其他有用的见解，请随时加入聊天

编辑进度：无，仍然没有关于这个问题从何处开始的线索，在这个主题上找不到任何有意义的东西


Tags： pathdjangofrompyimporturlindexreturn
2条回答
网友
1楼 · 编辑于 2024-10-02 02:34:32

以下是我对你的问题的看法：

首先，在路径api/leads/处没有任何URL，但在url.py中定义了api/lead/。可能是打字错误。同样在axios上，您应该使用axios.get("/api/lead/")

其次，您的URL应该协调一致。由于URL的顺序：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('leads.urls')), 
    path('', include('frontend.urls')), 
    
]

如果在路径/处点击django服务器，首先它会尝试使用第一个路径，因为它在/admin处不匹配，所以会转到第二个路径。它也不匹配，所以最后它在第三个路径与regex ^(?:.*)/?$（任何路径都应该匹配）匹配，因此React应用程序应该在那里可见。因此，如果你纠正了打字错误，它应该会起作用

第三，最好让React应用程序的服务方式与使用Django不同。您可以使用Nginx在生产中单独为React应用程序提供服务。或者有documentations关于如何在生产中提供服务。在本地计算机中，可以使用npm start或yarn start运行应用程序。然后，在React中会出现AuthenitAction和session的问题。您可以使用Token based authentication来解决这个问题

网友
2楼 · 编辑于 2024-10-02 02:34:32

我就是这样解决这个问题的：

Django项目URL.py

from django.contrib import admin
from django.urls import path, include, re_path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('leads.urls')),
    path('', include('frontend.urls')),

]

django应用程序（API）的URL

from django.urls import path
from . import views

urlpatterns = [
    path('lead/', views.LeadListCreate.as_view()),
    path('profiles/', views.ProfileAPI.as_view()),

]

前端URL

from django.urls import path, re_path
from . import views
from django.conf.urls import url

urlpatterns = [
    #path('', views.index),
    url('', views.index)
]

相关问题 更多 >

    编程相关推荐

    热门问题