使用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监听div内容的变化具体实现思路
Nov 04 Javascript
javascript 实现 原路返回
Jan 21 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
几行js代码实现自适应
Feb 24 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 Javascript
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
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生成静态页面详解
2006/11/19 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
Mac 上切换Python多版本
2017/06/17 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
经济学博士求职自荐信范文
2013/11/23 职场文书
师范毕业生个人求职信
2013/12/09 职场文书
工作的心得体会
2013/12/31 职场文书
会计助理岗位职责
2014/02/17 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript