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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
德生PL330测评
2021/03/02 无线电
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
python进阶教程之循环对象
2014/08/30 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
西雅图的买手店:Totokaelo
2019/10/19 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
新锐科技Java程序员面试题
2016/07/25 面试题
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
社区母亲节活动方案
2014/03/05 职场文书
司机职责范本
2014/03/08 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
大二学生自我检讨书
2014/10/23 职场文书
先进基层党组织材料
2014/12/25 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书