简介：本文的首席执行官注释将介绍有关VUE如何将数据传输到Django的相关内容。我希望这对每个人都会有所帮助。让我们来看看。
创建Django2项目
经过
`django-addmin startproject mysite'
命令创建
创建后端服务应用程序
在CD Mysite目录之后，Django-Admin StartApp后端
创建一个VUE项目
vue创建前端
当前版本：Django：2.1.7;Python：3.6.3;Vue-CLI：3.5.1;
类别和vue接口对接
首先是取出所有类别的所有内容
由于前端vue显示类别已分类
第一级，两个级别和三个级别如下
因此，我们需要取出所有三个内容
但首先，您需要拿出第一级，然后镶嵌第二级，然后在第三季度插入第二级，就像上面商品中显示的类别的内容一样。
我们仍然需要编写序列化器
这是第一个级别的第二级第二级第二级镶嵌第三级 -
但是这里有一个问题，不要犯错。这三个类别的立场并不是错误的。
因为第一级正在调用第二级，所以必须先写第二级
因此，第二级必须处于相同级别的相同级别。
然后是视图
在过滤器中添加类别_type = 1，以便您可以直接显示第一个类别，然后对第二个小类别有更分层的感觉。
同时，我们必须处理单个信息
因此，我们继承了Mixins.RetRieveModelMixin，这是一个显示详细信息的类
例如，在动物园中显示某个动物
/zoos/id
这样的URL
同样，我们只能直接配置类别的URL。
您不需要考虑以后的ID是否需要配置URL。您不需要考虑它，因为我们继承了视图类
他帮助我们解决了这些问题
您可以以这种方式看到它来处理我们的后端
但是，在处理前端对接时，您会发现它无法显示
因为有一个十字架问题
这个问题可以单独解决前后的后端，因此请谈谈后端方法
只需修改服务方
在GitHub上搜索Django-Cors-neaders以查找此信息
如何以相同的方式使用它
安装
PIP安装django-cors头
然后在Settins中的intasted_apps配置和设置中的中间件配置
请注意此处的中间软件配置
'corsheaders.middleware.corsmiddleware'，
'django.middleware.common.commonmiddleware'，
这两个必须放在
'django.middleware.csrf.csrfviewmiddleware'，，
否则，这将在此前面有错误
也配置
cors_origin_allow_all = true
允许交叉域访问其默认值是错误的
这可以正常显示在前端
为什么发生交叉域访问
因为在VUE中的API配置中，我们可以修改所有主机。一些在线数据。我们调试本地数据的一部分，因此我们需要重新确定本地主机
修改一些主机链接
这导致使用在线主机端口的交叉域本身，但是数据中的某些数据是本地主机端口导致交叉域访问
组成部分和组成部分之间存在不同的关系。父子与兄弟之间的关系（不是父子暂时称为兄弟）。
父亲的成分
父亲的关系是组件A在其模板中使用组件B，然后组件A是父组件，而组件B是子组件。
要使用父组件的数据，我们需要通过sub -component的“ Props”选项获取父部件传递的数据。我在下面的.VUE文件中使用格式来编写示例。
如何传递数据
参考子类儿童。在父零件中签发名称的价值并将名称的值传递给子女组成部分。
模板
div class =“ app”
//消息在子模块的道具中定义
孩子：消息=“名称”/孩子
/div
/模板
脚本导入孩子'https://www.shouxicto.com/article/child.vue';导出默认值：{child}，data（）{return {name：'linxin'}}/<cip}/scip}/scip}。
在儿童组件子里的道具选项中陈述数据。要声明其期望的数据
模板
SpanHello {messages}}/pan
/模板
脚本导出默认值{//在Props中，声明从消息中获取父组件的数据，Props：['Message']}/script
然后页面将渲染：Hello Linxin
Prop是单向的：当父组件的属性更改时，它将被传输到子组件，但不会逆转。修改子类的Prop值不会传递给父级以更新view.so，因此如何与父组件进行通信？
这是一个自定义事件。通过听自定义事件，通过聆听parent component $ on（eventname），当$ emit（eventname）触发$ emit（eventname）时，父级组件执行相应的操作。
例如，如果您控制父部件中炸弹框架模块的显示，请按子组件中的闭合，告诉父组件隐藏它，然后父组件执行操作以隐藏炸弹框架。子组件中的示例：
此发射是触发事件的地方。
如果它是一个复杂的方案，或者之间的组件之间，建议使用VUEX。这等同于Angular中的注册事件。具体过程可以指官方手册。
父组件传递到子组件，通过自定义属性传递，使用子组件中的定义自定义属性，然后绑定需要通过parent consention中的v-bind指令传递的数据。sub-component.above的母体组件中的父组件，然后可以直接使用子prop中的自定义属性。
子组件对父组件数据使用自定义事件。VUE组件提供EMIT（“自定义事件名称”，传输数据））。当子组件传输数据时，将触发响应事件功能。与EMIT的父组件绑定的自定义事件，自定义事件接受参数。参数是亚簇传递的数据
通过EventBus，兄弟组件之间的数据传输用作中间桥。传输方通过中间组件调用数据，两者之间的自定义属性名称是一致的。
通过VUEX存储数据数据，VUEX是为vue.js应用程序开发的状态管理模式。更改和同步更新数据。
REF参考可以在H5标签上使用，也可以在组标签上使用。它在H5标签上使用以获取DOM对象。它作用于组件标签。通过这个。$ refs是组件的实例对象。
因为我想改变一些以前的需求，所以主管要求我学习Vue。花了很长时间才进入门，我不得不更改成熟的项目。这个困难仍然很困难。
那些熟悉网站构建的人应该知道Vue是一个出色的前端框架，而Django是Python语言系统下的后端框架。尽管他们俩都可以编写一个完整的网站，但它们具有自己的焦点。速度很快，但是模板引擎附带的速度相对较弱，VUE是由数据驱动和组成的意识形态构建的。它是渲染页面中的第一个类。因此，随着Python的开发，可以开发网站。
不同的框架如何组合？这导致了前端和后端分离的想法。后端仅提供接口，API和前端来调用这些接口以获取数据，然后将其渲染到HTML模板模板。
在开发不同的框架时，最大的问题是交叉域。由于不同的框架，它们启用的端口号不同，即不同的数据源。由于安全性，无法直接访问它们。它是Django配置文件中的跨域许可证。使用Django的第三方软件包Django-Cors-neaders解决跨域问题
在这种情况下，我们可以使通过VUE启动方法进行调试更加方便
最终如何集成在一起？我们知道Django是通过指定模板和静态文件的路径来渲染的，因此我们需要打包VUE文件以生成index homepage和static文件，以便我们可以在django的默认文件夹中分别分别分开，或指定这两个文件。再次路径。
使用Django 2.2。
一般而言，使用指令NPM Run构建以获取包装的包装，然后将其交给NGINX进行路由转换（配置的位置 /静态）。需要的是配置Django上的可访问index.html路径。
但是（？），我想在本地测试，也就是说，没有nginx，并且debug = true环境尚未测试。结果，没有欢迎页面进入主页。打开开发工具并表明这就是它的样子：
解决方案：只需在installed_apps中注册VUE Engineering文件夹即可。
如果您不注册该应用程序，那么即使您编写文件夹，Django也不会扫描（根目录除外）：
如上所示，我在staticfiles_dir包装的Blogfro（即VUE文件目录）之后写了静态文件夹，但是输入主页时仍然是白屏幕。
白屏幕的路径表示模板模板是正常的，但是仍然无法加载静态文件。此需要注册的应用程序。注册后，您可以扫描静态文件。
注册后，已成功显示主页：
当没有加载该应用程序时，我发现CSS和JS文件放在已注册应用程序（BackND）的静态文件夹中，可以正常显示。此验证静态文件夹的扫描是否需要注册的应用程序。
以我的项目为例：
在调试模式下，您只需要static_url和staticfiles_dir。
根据Django文档，static_url是路径的地图。服务器将考虑将其匹配的路径，然后输入staticfiles_dir指定的目录以查找，并始终尝试返回匹配的第一个结果匹配。
在生产模式（封闭的调试）中，对静态文件的引用将失败。换句话说，对于性能考虑，我们不将Django服务器用于静态资源请求。我们经常使用其他反向服务器进行发送。
对于此考虑，Django使用CollectStatic指令将所有staticfiles_dir下的所有文件打包到static_root.dre.ter之后，您只需要配置此静态文件夹即可应用此静态文件夹。
之后，您可以直接开发Blogfro。开发完成后，使用NPM Run Build，然后直接打开DJANGO服务器进行测试。包装在线时，将内容复制到static_root下方，然后将内容复制到python manage.py collection.plectionstatic（主要是收集admin）资源。
实际上，问题并未完全解决，但这是由VUE + Django引起的。
Django使用其自己的静态路径索引，这与VUE有必要冲突。要处理它，必须调试它。
使用django和vue意味着您要将前端和后端分开，因此开发过程本身是隔离的。双方的交集应为最后一个部署（VUE包装，Django打开生产模式，并且反效力师打开（例如nginx）。这次，静态文件夹属于反服务器管理，不会出现此类问题。
由于我只有一个人（太痛苦），因此对Debug Vue和Django的需求同时引起了上述问题。
结论：以上是Vue如何将数据传递给Django相关内容答案的首席CTO注释。希望它对您有所帮助！如果您解决了问题，请与更多关心此问题的朋友分享?