使用 Django、webpack、reactjs、react-router 解耦前端和后端
Posted
技术标签:
【中文标题】使用 Django、webpack、reactjs、react-router 解耦前端和后端【英文标题】：decoupled frontend and backend with Django, webpack, reactjs, react-router 【发布时间】：2016-01-21 04:40:15 【问题描述】：我正在尝试在我的项目中分离我的前端和后端。我的前端由reactjs 组成，路由将由react-router 完成，我的后端如果由Django 组成，我计划使用前端对Django 进行API（ajax）调用。
现在我不确定如何让这两端正确地相互通信。
这是我的项目的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)
【问题讨论】：
您访问哪个 URL 以使该错误显示在开发人员工具上？ 查看我之前对这个问题的回答here @user2719875localhost:8000/
@krs 感谢您的帮助。不幸的是，我尝试了您添加 urlpatterns += staticfiles_urlpatterns() 的建议，但是我仍然遇到相同的错误 =[
【参考方案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 并仅呈现 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')),
]
【讨论】：
以上是关于使用 Django、webpack、reactjs、react-router 解耦前端和后端的主要内容，如果未能解决你的问题，请参考以下文章
如何将带有 django 的 react.js webpack 部署到 heroku？
如何使用 reactjs 和 webpack 允许 Access-Control-Allow-Origin？