数据工厂平台-番外: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的动态数据绑定

相关文章
|
24天前
|
JavaScript
vue和ainapp动态获取数据改变背景颜色
vue和ainapp动态获取数据改变背景颜色
13 2
|
2月前
Vue3中怎么监听store中的数据变化
Vue3中怎么监听store中的数据变化
|
17天前
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
|
13天前
|
存储 JavaScript 搜索推荐
vue如何实现登录数据的持久化
vue如何实现登录数据的持久化
|
15天前
|
供应链 JavaScript 前端开发
使用Django和Vue实现电子商务网站的后端和前端
【4月更文挑战第10天】本文介绍了使用Django和Vue构建电子商务网站的后端与前端方法。Django作为Python的Web框架负责后端,其模型-视图-控制器设计简化了商品管理、购物车和订单处理。Vue.js用于前端,提供数据驱动和组件化的用户界面。通过定义Django模型和视图处理请求,结合Vue组件展示商品和管理购物车,开发者可构建交互性强的电商网站。虽然实际开发涉及更多细节,但本文为入门提供了基础指导。
|
17天前
Vue3 响应式数据 reactive使用
Vue3 响应式数据 reactive使用
|
17天前
|
JavaScript
Vue 定义只读数据 readonly
Vue 定义只读数据 readonly
|
17天前
|
JavaScript
Vue 响应式数据的判断
Vue 响应式数据的判断
|
17天前
|
JavaScript
Vue 将响应式数据转为普通对象
Vue 将响应式数据转为普通对象
|
17天前
|
JavaScript
vue多条数据渲染(带图片)
vue多条数据渲染(带图片)
15 1