使用vue框架 Ajax获取数据列表并用BootStrap显示出来


Posted in Javascript onApril 24, 2017

 最近在搞毕业设计想趁机学学前端知识,于是就应用了目前比较流行的vue框架来进行数据显示,使用BootStrap进行简单的样式编写

1.第一步肯定是包的导入了

目前对node.js还不是很了解,所以包都是手动下载导入的,没有用到那个nmp

vue.min.js是vue的主包,vue-resource.js是开源的vue Ajax包,对ajax进行了封装

bootstrap既就是样式的相关css和js了

<script type="text/javascript" src="/js/vue-resource.js"/>
<script type="text/javascript" src="/js/vue.min.js"/> 
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script dsrc="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

-2.vue发送ajax请求

后台数据已写好,返回为json数据如下:

{
  "id": "1305120309",
  "violates": 0,
  "borrows": 0,
  "overdraft": 0,
  "notReturns": 0,
  "libraryBooks": [
    {
      "chargePerson": "王大海",
      "borrowTime": "2017-04-22 18:05:10",
      "name": "计算机入门",
      "bookId": "051301"
    },
    {
      "chargePerson": "王大海",
      "borrowTime": "2017-04-22 18:06:11",
      "name": "软件工程",
      "bookId": "051302"
    }
  ]
}

vue Ajax请求代码如下:

<script>
  Vue.use(VueResource);   //这个一定要加上,指的是调用vue-resource.js
  new Vue({
    el: '#vue-menu3',   //div的id
    data: {
      libraryInfo: ""  //数据,名称自定
    },
    created: function () { //created方法,页面初始调用  
      var url = "/library/libraryInfo";
      this.$http.get(url).then(function (data) {  //ajax请求封装
        var json = data.bodyText;
        var usedData= JSON.parse(json);
        //我的json数据参考下面
        this.libraryInfo = usedData["libraryBooks"];
      }, function (response) {   //返回失败方法调用,暂不处理
        console.info(response);
      })
    }
  });
</script>

-3.界面列表显示

table的class使用bootstrap样式,其他样式可见菜鸟教程

table标签tr开始遍历libraryInfo数据,语法为value in libraryInfo简单易懂

<div id="vue-menu3">
  <table class="table table-striped">
    <caption>借阅书籍列表</caption>
    <thead>
      <tr>
        <th>书籍编号</th>
        <th>书名</th>
        <th>管理人员</th>
        <th>借阅时期</th>
        <th>归还时间</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="value in libraryInfo">
        <td>{{value.bookId}}</td>
        <td>{{value.name}}</td>
        <td>{{value.chargePerson}}</td>
        <td>{{value.borrowTime}}</td>
        <td>{{value.returnTime}}</td>
      </tr>
    </tbody>
   </table>
</div>

最后结果如下:

使用vue框架 Ajax获取数据列表并用BootStrap显示出来

以上所述是小编给大家介绍的使用vue框架 Ajax获取数据列表并用BootStrap显示出来,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
Jquery Fade用法详解
Nov 06 jQuery
JS实现加载和读取XML文件的方法详解
Apr 24 #Javascript
JS简单获取日期相差天数的方法
Apr 24 #Javascript
Angular.js中控制器之间的传值详解
Apr 24 #Javascript
jquery submit()不能提交表单的解决方法
Apr 24 #jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 #jQuery
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 #Javascript
angularjs中的$eval方法详解
Apr 24 #Javascript
You might like
php多重接口的实现方法
2015/06/20 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
python实现最速下降法
2020/03/24 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
培训协议书范本
2014/04/22 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
单位收入证明范本
2015/06/18 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS
Python实现视频自动打码的示例代码
2022/04/08 Python