通过Django，webpack，reactjs等解耦前端和后端

2018-07-01 17:59:14

我试图在我的项目中解耦我的前端和后端。我的前端由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看起来像这样：

{% 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)

您的settings.py定义了以下内容：

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

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

你想要的是提供/public/ dir中的文件。使用以下设置：

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')),
]

链接地址: http://www.djcxy.com/p/88523.html

上一篇: decoupled frontend and backend with Django, webpack, reactjs, react

下一篇: Gradle, error could not find or load main class 'test.Main'