与Django,webpack,reactjs,react-router解耦前端和后端

Lio*_*cer 7 python django reactjs webpack react-router

我试图在我的项目中将我的前端和后端分离.我的前端由reactjs路由完成,路由将完成react-router,我的后端如果形成Django,我打算使用前端对Django进行API(ajax)调用.

现在我不确定如何让这两个方面正确地相互交谈.

这是我项目的链接

这是我的项目结构:

/cherngloong
  /app (frontend)
  /cherngloong
    /templates
      index.jtml
    urls.py
    settings.py
    ...
  /contact
    urls.py
    views.py
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

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()
Run Code Online (Sandbox Code Playgroud)

我不想从django提供我的应用程序或让django在任何网址上提供相同的视图.

这是我的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;
Run Code Online (Sandbox Code Playgroud)

我现在可以运行服务器但是当我运行前端部分时,我在开发人员工具中看到了这一点

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

Ars*_*ngh 4

您的settings.py定义如下:

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'app'),
)
Run Code Online (Sandbox Code Playgroud)

这将为目录中的文件提供服务/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')
    }
}
Run Code Online (Sandbox Code Playgroud)

此外,您在此处发布的代码和 github 中的 url 也不同。将url(r'', Templa...匹配所有 url,并且index.html即使在调用/api/. 将此行移动到底部:

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')),
]
Run Code Online (Sandbox Code Playgroud)