去耦前端和后端与Django，webpack，反应，反应路由器 [英] decoupled frontend and backend with Django, webpack, reactjs, 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
我使用 webpack 构建我所有的JS和CSS，将其放在 index.html 中，其中包含 webpack_loader ，如下所示：
{％从webpack_loader％载入render_bundle}
<！DOCTYPE html>
< html>
< head>
< meta charset =UTF-8>
< title>示例< / title>
< / head>
< body>
< div id =app>< / div>
{％render_bundle'main'％}
< / body>
< / html>
在 Django 这里是我的 cherngloong / urls.py ：
urlpatterns = [
url '^ 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在任何网址上提供相同的视图。
我的反应路由器路由：
var routes =（
<路由器>
<路径路径=/component = {Views.Layout}>
<路径路径=contactcomponent = {Views.Contact} />
< / Route>
<路径路径=*component = {Views.RouteNotFound} />
< / Router>
）;
导出默认路由;
我可以运行服务器，但是当我运行前端部分时，我在开发人员中看到工具
http：// localhost：8000 / static / public / js / main.js无法加载资源：服务器响应状态为404（NOT FOUND）
code> settings.py 定义了以下内容：
STATICFILES_DIRS =（
os.path.join（BASE_DIR，'app'），
）
/ app / 目录中的文件。所以url / static / public / js / 转换为 / app / public / js / 目录。 p>
您想要的是在 / 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 ... 将匹配所有网址，只需渲染 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 '）），
]
I am trying to decouple my frontend and my backend in my project. My frontend is made up of reactjs and routing will be done with react-router, My backend if made form Django and I plan to use the front end to make API (ajax) calls to Django.
Right now I'm not sure how to get these two ends to talk to each other correctly.
Here is the link to my project
Here is my project structure:
/cherngloong
/app (frontend)
/cherngloong
/templates
index.jtml
urls.py
settings.py
...
/contact
urls.py
views.py
I use webpack to build all my JS and CSS and place it into index.html with webpack_loader which looks like this:
{% 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>
In Django here are my 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()
I don't want to serve my app from django or make django to serve the same view on ANY url.
Here are my react-router routes:
var routes = (
<Router>
<Route path="/" component={ Views.Layout } >
<Route path="contact" component={ Views.Contact }/>
</Route>
<Route path="*" component={ Views.RouteNotFound } />
</Router>
);
export default routes;
I can currently run the server but when I run the front end portion, I see this in the developer tools
http://localhost:8000/static/public/js/main.js Failed to load resource: the server responded with a status of 404 (NOT FOUND)
Your settings.py defines the following:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'app'),
)
This will serve the files in /app/ directory. so the url /static/public/js/ translates to the /app/public/js/ directory.
What you want is to serve the files in the /public/ dir. Use the following settings:
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')
}
}
Also, the urls are different in the code you posted here and in github. The url(r'', Templa... will match ALL urls and just render index.html even when making calls to /api/. Move this line to the bottom:
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，反应，反应路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
