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

2024-04-15

我正在尝试在项目中解耦我的前端和后端。我的前端由以下组成reactjs和路由将完成react-router,我的后端如果做成形式Django我计划使用前端对 Django 进行 API (ajax) 调用。

现在我不确定如何让这两端正确地相互通信。

这里是link https://github.com/liondancer/django-cherngloong到我的项目

这是我的项目结构:

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

I use webpack构建我所有的 JS 和 CSS 并将其放入index.html with 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>

In 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 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;

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

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定义如下:

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

这将为文件提供服务/app/目录。所以网址/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...将匹配所有网址并仅渲染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')),
]
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Django、webpack、reactjs、react-router 解耦前端和后端 的相关文章

随机推荐

  • 如何在 json 中的事件标题中添加换行符

    我无法弄清楚的一件事是能够添加 html 而不会被转义或实际创建新行 这是我的 json id 30 title Basics n Awesome Abs Butt Blast n Danielle B start 2010 05 11T0
  • 在服务器运行时使用tinytest测试Meteor客户端

    是否可以在服务器运行时使用tinytest测试Meteor客户端 这是我仅测试客户端的示例 Tinytest add Add object to a collection function test var people new Meteo
  • Apache 重写规则将所有请求重定向到包含另一个 .htaccess 的子目录和重写规则

    我的网络服务器上有公共和私人项目 我将所有公开内容放入网络服务器根目录中 并且我有一个private我只能从本地网络访问该文件夹 由其中的 htaccess 设置 我想简单地将每个私人项目放在private文件夹并自动处理请求 但希望 UR
  • 检查字符串列表是否可以链接

    Question 实现一个功能bool chainable vector
  • 如何在Android移动网站中强制使用数字键盘

    我有一个移动网站 它有一些 HTMLinput其中的元素 如下所示
  • CMake:如何标准化路径? [复制]

    这个问题在这里已经有答案了 是否有一种可靠的方法来标准化 CMake 中的路径 例子 Let s assume that an environment variable MY ROOT DIR is set that points to s
  • Windows Phone 8 上“无法安装公司应用程序”

    我为 Windows Phone 8 开发了一个公司应用程序 并完成了所有建议的步骤来设置它进行安装 我拥有 Symantec 代码签名证书 并且已生成应用程序注册令牌和签名的 XAP 并将其托管在 OneDrive 上的公共文件夹中 我使
  • 如何将 UWP StorageFile 转换为 .NET FileInfo?

    现在 UWP 支持 NET Standard 2 0 它可以访问更多 System IO 命名空间 包括Fileinfo https msdn microsoft com en us library system io fileinfo v
  • 在 ember 数据中,在 forEach 循环中调用 destroyRecord 会破坏循环吗?

    我正在为我的一个项目开发一个简单的标签模型 我已经在 Angular 中实现了类似的东西 但我想在 Ember 中尝试一下 型号代码如下 Tag DS Model extend name DS attr string user DS bel
  • Amazon s3 putObject 标记不起作用

    我正在尝试使用 putObject 方法上传到 Amazon s3 时添加标签 根据文档 我已将标签创建为字符串类型 我的文件已上传到 Amazon s3 但我无法使用提供的标签数据查看文件对象的对象级别标签 根据文档遵循以下代码示例 va
  • 使 td 固定大小(宽度,高度),而其余 td 可以扩展

    您知道如何固定表格中 td 宽度和高度的大小 从而允许表格上的其余 td 根据需要扩展吗 问题是 当 td 内部有数据时 它不会比数据缩小得更多 但如果为空 它会一直缩小 如果扩大窗口 td 也会扩大 我想保留 td 的大小 无论您扩展还是
  • Ruby 中的“+=”(加等于)是什么意思? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 本地化 Spring Boot 验证消息中的消息参数未解析

    我正在使用构建一个项目春季启动2 1 8 我有spring boot 启动器 web在我的 POM 中 我可以看到 Maven 拉动休眠验证器 6 0 17到类路径上 我的消息位于资源文件夹中 并且它们似乎已正确查找 因此当我更改区域设置时
  • 如何在android中制作文字动画?

    在我的 Android 应用程序中 我试图显示一个 正在加载 文本 该文本每 100 毫秒就会更改一次 每 100 毫秒后就会增加一个点 所以首先它会像 正在加载 再过 100 毫秒 它将变为 正在加载 当变为 正在加载 时 该过程将终止并
  • 菜单栏隐藏时 JMenuItem 加速器不起作用

    这个问题是后续问题这个问题 https stackoverflow com questions 18093773 jmenubar selectionmodel changelistener only fires once 我有一个JMen
  • 如何在 Windows 的 Java 中启用小型转储

    我不断收到并看到此消息 无法写入核心转储 Windows 客户端版本默认不启用小型转储 所以我需要知道 如何在 Java 中启用小型转储 在 Windows 计算机上 可选 一旦获得小型转储 如何解释它 我试图找到这两个问题的答案 但我发现
  • ASP.NET vNext 全局配置访问

    正确 推荐的访问方式是什么config jsonASP NET vNext 中的文件 或存储配置的其他位置 In the Startup类 我像这样设置配置 public class Startup public IConfiguratio
  • 重置本地git仓库

    几天前 我在 Github 上创建了一个存储库 然后按照步骤将我现有的解决方案添加到其中 我不知道我做错了什么 但是经过一些随机的 git add 命令等等之后 我现在在 Windows 的 github 中收到消息 failed to s
  • 字典和对

    在 R 中 我想知道我是否可以有一本字典 在某种意义上像 python 其中我有一对 i j 作为具有相应整数值的键 我还没有看到一种干净或直观的方法来构建它R 我的字典的视觉效果是 1 2 gt 1 1 3 gt 3 1 4 gt 4 1
  • 使用 Django、webpack、reactjs、react-router 解耦前端和后端

    我正在尝试在项目中解耦我的前端和后端 我的前端由以下组成reactjs和路由将完成react router 我的后端如果做成形式Django我计划使用前端对 Django 进行 API ajax 调用 现在我不确定如何让这两端正确地相互通信