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


Posted in Javascript onJuly 07, 2019

有接口如下:

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块模板,并渲染数据,效果图如下:

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

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

首先,在html页面上引入js

<script type="text/javascript" src="{% static 'js/vue.js' %}"></script>
<script type="text/javascript" src="{% static 'js/axios.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/common.js' %}"></script>
<script>
$(document).ready(function () {
getHotScheme();        1. 在dom加载完之后执行getHotScheme函数
});
</script>

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

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

相关html如下:

<div class="GridLex- gap-30-wrappper package-grid-item-wrapper">

    <div class="GridLex-grid-noGutter-equalHeight">

     <template v-for="schemeInfo in schemesInfo">
      <div class="GridLex-col-4_sm-6_xs-12 mb-30">
       <div class="package-grid-item">
        <a href="detail-page.html" rel="external nofollow" >
         <div class="image">
          <img :src="schemeInfo.photo_url" alt="Tour Package"/>

          <div class="absolute-in-image">
           <div class="duration"><span>{{ schemeInfo.day }} 天 {{ schemeInfo.night }} 夜</span></div>
          </div>
         </div>
         <div class="content clearfix">
          <h5>{{ schemeInfo.name }}</h5>

          <div class="rating-wrapper">
           <div class="raty-wrapper">
            <div class="star-rating-read-only" v-bind:data-rating-score="schemeInfo.score_avg"></div>
            <span> / {{ schemeInfo.review_num }} 评论</span>
           </div>
          </div>
          <div class="absolute-in-content">
           <span class="btn"><i class="fa fa-heart-o"></i></span>

           <div class="price">¥{{ schemeInfo.unit_price }}</div>
          </div>
         </div>
        </a>
       </div>
      </div>
     </template>

    </div>

   </div>

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 v-for="schemeInfo in schemesInfo">````````</template>

被template标签包含的内容将被生成多份,text部分通过{{}}取数据进行渲染,但是在标签属性中使用数据需要做出修改:比如img标签,指定src时不应该使用<img scr=''{{schemeInfo.photo_url}}''> 这将是无效的,应该改为<img :src="schemeInfo.photo_url"> src前面的:时v-bind的简写,用于属性绑定,当然,你也可以写完整,如<div class="star-rating-read-only" v-bind:data-rating-score="schemeInfo.score_avg"></div>

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

我还是喜欢第三种:

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

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

但是还有一个问题

django中使用vue.js的要点总结没有被显示出来,原因是类属性为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的要点总结

Javascript 相关文章推荐
用Javascript读取中文COOKIE的解决办法
Feb 15 Javascript
jquery tab插件制作实现代码
Jun 22 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
Vue使用lodop实现打印小结
Jul 06 #Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 #Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 #Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 #Javascript
基于vue实现圆形菜单栏组件
Jul 05 #Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 #Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 #Javascript
You might like
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
获得Google PR值的PHP代码
2007/01/28 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
php数组指针操作详解
2017/02/14 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
python实现月食效果实例代码
2019/06/18 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
Python shutil模块用法实例分析
2019/10/02 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
职工趣味运动会方案
2014/02/10 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
爱心捐款感谢信
2015/01/20 职场文书
医生个人年度总结
2015/02/28 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL