使用 Django、webpack、reactjs、react-router 解耦前后端

Question

我试图在我的项目中分离我的前端和后端。我的前端由 reactjs 组成，路由将由 react-router 完成，我的后端如果由 Django 组成，我计划使用前端来制作 API (ajax) 调用 Django。

现在我不确定如何让这两个端正确地相互交谈。

这是我的项目link

这是我的项目结构：

/cherngloong
  /app (frontend)
  /cherngloong
    /templates
      index.jtml
    urls.py
    settings.py
    ...
  /contact
    urls.py
    views.py

我使用 webpack 构建我所有的 JS 和 CSS 并将其放入 index.html 和 webpack_loader 中，如下所示：

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example</title>
  </head>

  <body>
    <div id="app"></div>
    {% render_bundle 'main' %}
  </body>
</html>

在 Django 这是我的 cherngloong/urls.py:

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'', TemplateView.as_view(template_name='index.html')),
    url(r'^api/', include('contact.urls'))
]

urlpatterns += staticfiles_urlpatterns()

我不想从 Django 提供我的应用程序或让 Django 在任何 url.

上提供相同的视图

这是我的 react-router 路线：

var routes = (
    <Router>
        <Route path="/" component={ Views.Layout } >
            <Route path="contact"  component={ Views.Contact }/>
        </Route>
        <Route path="*" component={ Views.RouteNotFound } />
    </Router>
);

export default routes;

我目前可以运行服务器，但是当我运行前端部分时，我在开发者工具中看到了这个

http://localhost:8000/static/public/js/main.js Failed to load resource: the server responded with a status of 404 (NOT FOUND)

Answer 1

您的 settings.py 定义如下：

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'app'),
)

这将提供 /app/ 目录中的文件。所以 url /static/public/js/ 转换为 /app/public/js/ 目录。

您想要的是提供 /public/ 目录中的文件。使用以下设置：

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'public'),
)

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'js/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json')
    }
}

此外，您在此处发布的代码与 github 中的 url 不同。 url(r'', Templa... 将匹配所有 url，即使在调用 /api/ 时也只呈现 index.html。将此行移到底部：

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'^api/', include('contact.urls')),
]

urlpatterns += staticfiles_urlpatterns()

urlpatterns += [
    url(r'', TemplateView.as_view(template_name='index.html')),
]

使用 Django、webpack、reactjs、react-router 解耦前后端

decoupled frontend and backend with Django, webpack, reactjs, react-router

python

django

reactjs

webpack

react-router