导读：本篇文章首席CTO笔记来给大家介绍有关vue如何传递数据到django的相关内容，希望对大家有所帮助，一起来看看吧。
VUE 与django整合
创建Django2项目
通过
`django-admin startproject mysite`
命令创建
创建后端服务app
cd mysite目录后,django-admin startapp backend
创建vue项目
vue create frontend
当前版本：django：2.1.7；python：3.6.3；vue-cli：3.5.1；
django-restful:与前端vue接口对接
category 与vue 接口对接
首先是需要把所有的category的内容取出来
由于前端vue展示category是分级的
一级 二级 三级 这样展示的
所以我们需要把三个内容都拿出来
但是首先需要取出第一级 然后第一级镶嵌了第二级，然后第二级镶嵌第三季 ，就跟上面goods中显示外键的category的内容一样
我们还是需要写serializer
这样就是一级 镶嵌二级 二级镶嵌三级
但是这里有一个问题不要搞错了 这三个类的位置不能弄错了
因为一级是调用二级 所以二级一定是先写好了的
所以二级一定在一级上面 同理 三级要在二级上面
然后就是view
在过滤中加上category_type = 1 这样就可以直接显示第一大类 然后第一大类中有第二小类 这样更有层次感 如果直接一下子全部取出来 就不好分辨了
同时我们还要处理取出某个单一的信息
所以 我们继承了mixins.RetrieveModelMixin 这个类，这是一个显示详情的类
例如显示某个动物园的某个动物那样
/zoos/id
这样的url
同样这样写了 我们就直接只配置category的url就够了
就不用考虑 后面的id是否还需要配置一个url 这些都不用考虑了，因为我们继承了 viewset这个类
这些问题他都帮我们解决了
这样处理我们后端就能看见了
但是这样处理了 前端对接时 会发现 无法显示
因为有一个跨域问题
这个问题前后端 都可以独自解决 这里学习的是后端，所以讲一下后端的做法
就是修改服务端
在github上搜索django-cors-headers就可以找到这个信息
同样里面介绍如何使用
安装
pip install django-cors-headers
然后settins中INSTALLED_APPS配置和settings中MIDDLEWARE配置
这里要注意 MIDDLEWARE配置中
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
这两个必须放在
'django.middleware.csrf.CsrfViewMiddleware',
这个的前面 不然会报错
同时还要配置
CORS_ORIGIN_ALLOW_ALL = True
允许跨域访问 它默认是False
这样前端就可以正常显示了
为什么会产生跨域访问
因为vue中api配置的中 我们调试数据 不可能把所有的host 都修改了 有一些是线上数据 我们调试的是本地的一部分数据 所以要重新定一个localhost
修改部分 host的链接
这样就导致了跨域 本身使用的是一个线上host端口，但是数据中有一部分是请求的是本地host端口 导致了跨域访问
如何在vue.js组件之间进行数据传递
组件与组件之间，还存在着不同的关系。父子关系与兄弟关系（不是父子的都暂称为兄弟吧）。
父子组件
父子关系即是组件 A 在它的模板中使用了组件 B，那么组件 A 就是父组件，组件 B 就是子组件。
子组件想要使用父组件的数据，我们需要通过子组件的 props 选项来获得父组件传过来的数据。以下我使用在 .vue 文件中的格式来写例子。
如何传递数据
在父组件 father.vue 中引用子组件 child.vue，把 name 的值传给 child 组件。
template
div class="app"
// message 定义在子组件的 props 中
child :message="name"/child
/div
/template
script import child from './child.vue'; export default { components: { child }, data() { return { name: 'linxin' } } }/script
在子组件 child.vue 中的 props 选项中声明它期待获得的数据
template
spanHello {{message}}/span
/template
script export default { // 在 props 中声明获取父组件的数据通过 message 传过来 props: ['message'] }/script
那么页面中就会渲染出：Hello linxin
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。修改子组件的 prop 值，是不会传回给父组件去更新视图的。那么子组件要如何去与父组件通讯呢？
那就是自定义事件。通过在父组件 $on(eventName) 监听自定义事件，当子组件里 $emit(eventName) 触发该自定义事件的时候，父组件执行相应的操作。
比如在父组件中控制一个弹框子组件的显示，在子组件中按下关闭之后，告诉父组件去隐藏它，然后父组件就执行操作隐藏弹框。例如在子组件中：
这个emit就是触发事件的地方。
如果是复杂场景，或者不相关的组件之间，建议用vuex，这个相当于Angular中的注册事件，具体过程可以参考官方手册，写的例子和图例都很详细了
Vue 组件之间传参！
父组件向子组件传参，通过自定义属性的方式进行传参，在子组件中使用prop定义自定义的属性，然后在父组件中通过v-bind指令把需要传递的数据绑定在子组件上，那在子组件中props里面的自定义属性可以直接使用.
子组件向父组件传数据使用自定义事件， vue组件提供了一个 emit('自定义事件名'， 传递的数据) )，子组件传递数据时，触发响应的事件函数，就会自动触发通过$emit给父组件绑定的自定义事件，自定义事件接受一个参数，参数就是子组件传递过来的数据
兄弟组件之间的数据传递，通过eventBus来做中间的桥梁，传输方通过中间组件调用 on 接受数据，两者之间的自定义属性名保持一致。
通过vuex存储数据， Vuex是一个专为vue.js 应用程序开发的状态管理模式， 它采用[ 集中式 ]存储管理数据，以相应的规则保证状态以一种可预测的方式发生改变， 一变全变，同步更新数据。
ref 引用可以作用在h5标签上，也可以作用在组标签上，作用在h5标签上是获取的是DOM对象， 作用在组件标签上，通过this.$refs获取的是组件的实例对象。
django和vue初次接触
因为要改一些以前的需求,主管让我学习一下vue,花了半天的时间算是入了门,就要拿成熟的项目去改,这个难度还是挺大的.
熟悉网站建设的人应该都知道vue是一个出色的前端框架,而django是python语言体系下的一个后端框架,虽然说他们两个都可以写出完整的网站,但是各有侧重点,django发开速度快,但是本身自带的模板引擎比较孱弱,而vue是以数据驱动和组件化的思想构建,在渲染页面方面实属一流,所以作为python开发者,有时候就会将这个两个框架结合起来,进行网站的开发.
不同的框架是如何结合在一起呢,这就引出了一个前后端分离的思想,后端只提供接口,api,,前端去调用这些接口,来拿数据,再渲染到html模板上
不同框架进行开发时,最大的问题就是跨域,由于框架不同,他们所启用的端口号是不同的,也就是不同的数据源,由于安全性,所以他们之间是不能直接访问的,解除方法是在django的配置文件中引入跨域许可的中间件,用Django的第三方包django-cors-headers来解决跨域问题
这样的话,我们就可以更方便的通过vue的启动方式来进行调试了
最后怎么整合到一起呢?我们知道django是通过指定模板和静态文件的路径来进行渲染的,所以,我们需要将vue文件打包,生成index主页面和静态文件,这样我们就可以把这两个分别放入django默认的文件夹下,或者重新指定路径就可以了.
Django+Vue静态资源问题
使用 django 2.2。
一般来说，使用指令 npm run build 得到打包的 dist 包，交给 nginx 做路由转换（配置 location /static ）即可，需要的只是在django配置可访问的 index.html 路径。
但是由于需要（？）， 我想在本地进行测试，也就是说在没有 nginx， 开启 debug = True 的环境下调试。于是打开 python manage.py runserver , 结果进入首页没有出现欢迎页面，打开 dev tools ，显示是这个样子的：
解决方法：将 vue 工程文件夹在 INSTALLED_APPS 里面注册下就行。
如果不注册 app， 那么即使写入文件夹， django 也不会扫描（根目录除外）：
如上所示我在 STATICFILES_DIR 中已经写入了 blogfro （也就是 vue 文件目录） 打包完成后的 static 文件夹，但是进入首页仍然白屏。
白屏表示模板 TEMPLATES 的路径正常，但是静态文件仍然加载不出来。这就需要注册 app 。注册后就能够扫描到静态文件。
注册后就成功显示了首页：
在没有加载 app时，发现把 css 与 js 文件放在一个已经注册 app（backend）的静态文件夹中，能够正常显示。这验证了静态文件夹的扫描需要注册 app。
以我的项目为例：
在 debug 模式下，只需要 STATIC_URL 与 STATICFILES_DIR 即可。
根据 django 文档 说法， STATIC_URL 是路径的映射。服务器会将匹配到它的路径视为静态文件请求，然后进入 STATICFILES_DIR 指定目录下查找，并总是尝试返回匹配到的第一个结果。
在生产模式下（关闭 debug ），对静态文件的引用会失效。换句话说，出于性能考虑，我们不使用django服务器进行静态资源请求。我们常使用其他反代服务器进行发送。
出于这个考虑，django 使用了 collectstatic 指令，能将所有 STATICFILES_DIR 下的文件打包到 STATIC_ROOT 下。之后只要配置反代服务器应用这个静态文件夹就行了。
之后就能直接对 blogfro 进行开发了，开发完成后使用 npm run build ， 然后直接开启 django 服务器就能进行测试。最后打包上线的时候将dist下的内容复制到到 STATIC_ROOT 下，然后 python manage.py collectstatic （主要是收集 admin ）的资源。
其实问题不是完全解决，但这是因为 vue + django 造成的。
django 使用自己的静态路径索引，必然有可能与vue发生冲突，为了处理必须进行调试。
使用 django 与 vue， 意味着希望进行前后端分离，所以开发过程本身就是隔离的。双方的交集应该是最后部署的时候（vue 打包， django 开启生产模式， 反代服务器开启（如 nginx））。这时候静态文件夹归反代服务器管理，不会出现这样的问题。
由于我只有一个人（太惨了），所以产生了同时调试 vue 与 django 的需求，这才导致了上面问题的产生。
结语：以上就是首席CTO笔记为大家整理的关于vue如何传递数据到django的相关内容解答汇总了，希望对您有所帮助！如果解决了您的问题欢迎分享给更多关注此问题的朋友喔～