时间戳

首页 > 解决方案 > 如何使用服务器端渲染将我的反应服务器与 django 服务器结合起来？

html - 如何使用服务器端渲染将我的反应服务器与 django 服务器结合起来？

问题描述

当我部署我的 django 项目时

python manage.py runserver，以及我的反应应用程序npm start，

我不知道哪一个是我的“真正的项目”。我认为这个问题归结为客户端渲染与服务器端渲染，现在我想使用服务器端渲染，因为我对 django 比对 react 更熟悉。这意味着我必须使用 django/drf 正确设置 url 和视图？如果是这样，我的问题如下......

  1. 每当我访问一个 url（例如，website.com/items）时，我如何“调用”做出反应。我想以格式良好的 html 文件返回我所有项目的列表。我怀疑这与 path() 函数中的模板参数有关。

  2. 如何防止用户访问 api 视图（website.com/api/items），这是我用来处理 django-rest-framework 的 api 调用的 url，但我不希望人们看到这个但也想做出反应“看到”这个。

  3. 因为我正在做服务器端渲染，除了对我的 api url 进行正确的 http 调用并使我的 html 模板看起来漂亮之外，我的 react 应用程序还需要做什么？

项目网址：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('App.urls')),
    path('api/',include('App.api.urls'))
]

应用网址：

urlpatterns = [
    path('', views.index, name='index'), #nothing much here yet
]

API 网址：

urlpatterns = [
    path('item',views.ListItem.as_view())
]

我的基本 React App.js 只是抓取所有项目并显示它们

class App extends Component {
    state = {
    items: []
    };
   async componentDidMount(){
    try{
    const res = await fetch('http://127.0.0.1:8000/api/item');
    const items = await res.json();
    this.setState({
        items});
    }
    catch (e){
        console.log(e);}
   }
    render(){
        return(
            <div>
                {this.state.items.map(item =>(
                    <div key={item.id}>
                        <h1>{item.item}</h1>
                        <h1>{item.price}</h1>
                         <span>{item.description}</span>
                    </div>
                ))}
             </div>
         );
        }

}
export default App;

标签： htmlreactjsdjango-rest-framework

解决方案

如果你想在服务器端渲染你的 react 应用程序，你必须在你的 django 应用程序的模板视图中设置你的 javascript。现在你在不同的服务器上运行你的 react 应用程序和 django 应用程序，所以这就是为什么你没有为 react 应用程序获得服务器端渲染。这将涉及使用 webpack 或 pacel 创建反应。

我要做的是将反应应用程序捆绑在 django 视图中，即服务器端渲染。

我希望这是有道理的。

推荐阅读