数据工厂平台-番外:vue和django的冲突问题

简介: 数据工厂平台-番外:vue和django的冲突问题

最近有很多同学反馈说第四节 没跟住, 页面显示的并不是:

微信图片_20220706100609.png

而是:

微信图片_20220706100617.png

博主帮忙一个一个的解决排查问题后,发现这个问题的原因似乎好多人都不清楚。

首先说下引起上述bug的原因:

  • script里的delimiters没写对,写成了delimters等 错误版本。
  • script里delimiters的值没写对,把 ["[[","]]"] 写成了 [" [[","]] "] 注意这里被误加了空格,或者标点错误。
  • 没有通过127.0.0.1:8000/home进入页面,而是通过
    微信图片_20220706100624.png

直接打开了html在浏览器。好,原因基本就上述的三种,这里我说下 为什么要这么写:



在我学习vue的文档的时候,都是用一个页面单独去学习,没有在django项目中,所有文档都成功跟下来了,很顺利。但是后来我放入到django中的时候,发现了一个问题:


就是这样的写法

微信图片_20220706100651.png

会导致,标签元素的text 不能显示。对于这个超链接来说,

就是{{ i.link_name }}是一片空白,显示不出来,而href也不正常。

后来我搜索一番得知:


django和vue 在这个上面有个小冲突, 就是在标签中级夹着的{{ }}  会冲突,会被django误以为是要从后台直接获取数据,而不是从下面的vue的bom中拿数据,所以搜索得知,需要加入delimiters ,来给这种被夹的{{ }}变量 换个形式,我选择的就是 [[ ]] 来代替。


所以之后

微信图片_20220706100643.png

这样就可以在django 的url路径下 正常显示了。但是此时 无法通过直接在浏览器打开网页方法显示了。

微信图片_20220706100706.png微信图片_20220706100714.png

但是没关系,反正我们正常就是通过url: home路由进入的。用户也不会直接在浏览器打开该网页,只能通过 正常的 /home/ 然后关联到home()函数,然后靠返回的render的方法的 home.html 参数 来打开网页。


从这里我们也可以发现 其实大部分测试对vue 也只是听说过好用,也知道它比较流行,但是确实没有特别实战的经验,所以我们放缓节奏,一步一个脚印的走,不要想着一开始就搞太大的架构。


就连官网文档 的开头都说:微信图片_20220706100720.png

所以大家还是安心一点一点随着博主一起学习vue吧,毕竟以后用起来越爽的东西,一开始越觉得难理解, 就像mac一样。

现在我们写成这样:

微信图片_20220706100728.png

然后页面是如下:

微信图片_20220706100734.png

但是你以为这就正常了么?先打开console看看效果:

微信图片_20220706100741.png

vue给你报了个错,意思是说用 :属性 来代替属性,注意冒号。这是什么意思呢?然后你点击一下超链接 看看:

微信图片_20220706100748.png

发现并没有成功跳转这又要怎么解决呢?欢迎 观看下节 第五章:vue的动态数据绑定

相关文章
|
16天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
SQL 监控 数据库
深入探索Django ORM:高效数据操作的秘诀与实践####
在当今的Web开发领域,提升数据访问层的效率是优化应用性能的关键。本文旨在通过剖析Django框架中的ORM(对象关系映射)机制,揭示其如何简化数据库交互,并探讨一系列高级技巧与策略,帮助开发者构建更高效、可维护的数据访问代码。我们不涉及安装步骤或基础概念,而是聚焦于实战经验分享,旨在为中高级开发者提供深度洞见。 ####
|
3月前
|
JavaScript 前端开发 API
vue获取图片的blob传给django后端
vue获取图片的blob传给django后端
72 4
|
3月前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
71 4
|
3月前
|
数据库 数据安全/隐私保护 数据库管理
#765372#基于django和neo4j的通用数据展示系统
#765372#基于django和neo4j的通用数据展示系统
27 1
|
6天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
48 1
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
48 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
34 1
|
2月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
40 1
vue学习第四章
|
2月前
|
JavaScript 前端开发 算法
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
32 1
vue学习第7章(循环)

热门文章

最新文章