侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

django中使用vue.js的要点总结

前端  /  管理员 发布于 4年前   374

有接口如下:

http://127.0.0.1:8000/info/schemes/

返回json数据:

[ {  "name": "(山上双人标准间)黄山经典二日游(魅力黄山,日出云海,人间仙境,春暖花开)",   "day": 2,   "night": 1,   "favorites": 0,   "score_avg": 4,   "photo_url": "/media/images/scenic/a9836502.jpg",   "review_num": 2,   "unit_price": 0 },  {  "name": "0购物+三环内接!郑州―焦作云台山二日游,含1晚住宿+1早2正餐,无强制消费",   "day": 2,   "night": 1,   "favorites": 0,   "score_avg": 4,   "photo_url": "/media/images/scenic/3a82e902.jpg",   "review_num": 1,   "unit_price": 329 },  {  "name": "岛内酒店上门接>厦门至泉州开元寺+南少林+洛阳桥+西街+天后宫一日游",   "day": 1,   "night": 0,   "favorites": 0,   "score_avg": 4,   "photo_url": "/media/images/scenic/f8106f02.jpg",   "review_num": 2,   "unit_price": 0 },  {  "name": "南宁✈西安兵马俑华清池延安黄帝陵壶口瀑布城墙5日/耳麦自助餐/0购物/接送机",   "day": 5,   "night": 4,   "favorites": 0,   "score_avg": 4,   "photo_url": "/media/images/scenic/93835fbb.jpg",   "review_num": 1,   "unit_price": 3045 },  {  "name": "北京+天津纯玩6日游/餐餐特色/连锁酒店/专车专导/故宫/瓷房子赠升国旗",   "day": 6,   "night": 5,   "favorites": 0,   "score_avg": 4,   "photo_url": "/media/images/scenic/0f.water.jpg",   "review_num": 1,   "unit_price": 0 },  {  "name": "住蒙古包>内蒙古希拉穆仁草原+响沙湾沙漠+成吉思汗陵+呼和浩特市内双飞五日游",   "day": 5,   "night": 4,   "favorites": 0,   "score_avg": 4,   "photo_url": "/media/images/scenic/4b806602.jpg",   "review_num": 1,   "unit_price": 0 },  {  "name": "北京全景高端五星游丨餐餐特色&0购物0自费&24H接送&赠德云社+人民大会堂",   "day": 5,   "night": 4,   "favorites": 0,   "score_avg": 4,   "photo_url": "/media/images/scenic/ca841f56.jpg",   "review_num": 1,   "unit_price": 0 },  {  "name": "机票+含餐>西安兵马俑/华清池/骊山/西岳华山/延安/黄帝陵/壶口瀑布6日",   "day": 6,   "night": 5,   "favorites": 0,   "score_avg": 4,   "photo_url": "/media/images/scenic/93835fbb.jpg",   "review_num": 1,   "unit_price": 2740 },  {  "name": "高铁/动车往返>宁波―温州雁荡山2日游 净名谷+灵岩景区+大龙湫 赏灵峰夜景",   "day": 2,   "night": 1,   "favorites": 0,   "score_avg": 4,   "photo_url": "/media/images/scenic/7565abdd.jpg",   "review_num": 1,   "unit_price": 0 }]

通过vue去请求这个api,并将数据遍历,生成多个div块模板,并渲染数据,效果图如下:

api 返回json中有9条记录,所以对应应该生成9个上图的div块,开始动手:

首先,在html页面上引入js

要用到vue就少不vue.js,Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

我们将上面功能的实现写在common.js的getHotScheme中

相关html如下:

   

js:getHotScheme

function getHotScheme(){ new Vue({  el: '#scheme_app',  data () {   return {   schemesInfo: null   }  },  mounted () {   axios   .get('/info/schemes')   .then(response => (this.schemesInfo = response.data))   .catch(function (error) { // 请求失败处理    console.log(error);   });  } })}

解释一下:

getHotScheme()在DOM加载后执行,其中创建了vue对象,el表示vue的作用范围,它被绑定到了html中的id为scheme_app的div,data中我们需要使用schemesInfo,初始为null,当axios请求成功之后,schemesInfo的值为api的返回的json

在html中:

我们要遍历schemesInfo数据,在需要重复生成的div块外添加 template ,

被template标签包含的内容将被生成多份,text部分通过{{}}取数据进行渲染,但是在标签属性中使用数据需要做出修改:比如img标签,指定src时不应该使用 这将是无效的,应该改为 src前面的:时v-bind的简写,用于属性绑定,当然,你也可以写完整,如

现在看似已经完成了,但是实际上我们的数据并没有被渲染到模板上,这是因为vue 取值的方法{{ }}与django的模板语言冲突,vue取值并未生效,其实解决办法至少有三个,可以参考:/article/164779.htm

我还是喜欢第三种:

将vue相关的html代码块禁用django模板:

在上述html代码前添加{% verbatim %},尾部添加{% endverbatim %},这样vue就可以生效了,

但是还有一个问题

没有被显示出来,原因是类属性为star-rating-read-only的div的js函数需要在数据完成之后加载才能生效

正好,Vue.js 有一个方法 watch,它可以用来监测Vue实例上的数据变动。

我们要监听schemesInfo,如果数据变化,说明vue开始渲染,渲染完成DOM将发生变化,在vue中有个Vue.$nextTick(callback),当dom发生变化,更新后执行的回调。

在这个回调函数中执行star-rating-read-only对应的js函数应该就可以解决这个问题,试一下修改common.js中的代码:

function loadGrade(){ $('.star-rating-read-only').raty({  readOnly: true,  round: {down: .2, full: .6, up: .8},  half: true,  space: false,  score: function () {   return $(this).attr('data-rating-score');  } });}function getHotScheme(){ new Vue({  el: '#scheme_app',  data () {   return {   schemesInfo: null   }  },  watch:{   schemesInfo:function(){    this.$nextTick(function(){     loadGrade()    })   }  },  mounted () {   axios   .get('/info/schemes')   .then(response => (this.schemesInfo = response.data))   .catch(function (error) { // 请求失败处理    console.log(error);   });  } })}

绿色部分是star-rating-read-only对应的js处理函数,红色部分是我们对vue的修改完善,这样修改以后,果不其然,数据都正确的渲染在了模板上

  

您可能感兴趣的文章:

  • Django+Vue.js搭建前后端分离项目的示例


  • 上一条:
    Vue使用lodop实现打印小结
    下一条:
    详解django模板与vue.js冲突问题
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客