使用Vue调取接口,并渲染数据的示例代码


Posted in Javascript onOctober 28, 2019

刚接触vue.js框架的时候,很伤脑筋。今天整理一下post/get两种方式,简单的调取数据库数据,并进行渲染,希望帮助大家!

首先,在HTML页面引入:

//引入vue.js文件
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
引入vue-resource.min.js文件,就可以引入接口方法了
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

然后,在body中书写div:

//id在下面js中进行引用
<div id="box">
 
 <table border="1" cellpadding="0" cellspacing="0">
 <tr>
 <td>序号</td>
 <td>姓名</td>
 <td>头像</td>
 </tr>
  //v-for 循环数据表中的数据
 <tr v-for="v in msg">
 <td>{{v.id}}</td>
 <td>{{v.username}}</td> 
 <td>{{v.photo}}</td>
 </tr>
 </table>
</div>

第三,js代码:

<script type = "text/javascript">
window.onload = function(){
//实例化vue类
var vm = new Vue({
 //绑定box
 el:'#box',
 data:{
   //设置msg内容为空,在请求数据前为空的状态
   msg:'',
   },
 mounted:function () {
   //调取本地的get(就在下面)
   this.get();
   },
 methods:{
 get:function(){
   //发送get请求
   this.$http.post('http://你的IP/api/方法',{key:"密钥"},{emulateJSON:true}).then(function(res){
    //msg等于回调函数返回的res(值)
    this.msg=res.body.data;
    //在打印台测试打印,无误后一定要删除
    console.log(res);  
   },function(){
    console.log('请求失败处理');
   });
  }
 }
});
}
</script>

控制器:

public function index()
 {
  //  //引入秘钥
  $pwd=new ApisModel();
  $passwd=$pwd->passwd();
  // print_r($passwd);die;
  //空的数组,等待输入秘钥与存储在model层的秘钥对比
  $date=request()->get();
   // print_r($date);die;
  // 对比秘钥是否一致
  if($date['key']==$passwd){
    $model=new ApisModel();
    $data=$model->role_show();
   
    return json(array('data'=>$data,'code'=>1,'message'=>'操作完成'));
   }else{
    $data = ['name'=>'status','message'=>'操作失败'];
    
    return json(['data'=>$data,'code'=>2,'message'=>'秘钥不正确']);
   }
 
 }

model:

public function passwd(){
 $key='存放在本地的密钥';
  return $key;
 }
 //简单的测试接口
 public function role_show(){
  return Db::name('role_power')->select();
 
 }

OK,post方式搞定了,下面是vue使用get方法进行接口调用,渲染数据

简单粗暴,大致一样,就不一一详解了,上代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
 
<div id="box">
 
 <table border="1" cellpadding="0" cellspacing="0">
 <tr>
 <td style="width:130px;height:30px;">ROLE_ID</td>
 <td style="width:130px;height:30px;">POWER_ID</td>
 <td style="width:130px;height:30px;">创建时间</td>
 </tr>
 <tr v-for="v in msg">
 <td style="width:130px;height:30px;">{{v.role_id}}</td>
 <td style="width:130px;height:30px;">{{v.power_id}}</td> 
 <td style="width:130px;height:30px;">{{v.create_time}}</td>
 </tr>
 </table>
</div>
<script type = "text/javascript">
window.onload = function(){
var vm = new Vue({
 el:'#box',
 data:{
   msg:'',
   },
 mounted:function () {
   this.get();
   },
 methods:{
   get:function(){
    //发送get请求
    this.$http.get("http://ip?key=密钥",{emulateJSON:true}).then(function(res){
     console.log(res.body); 
     this.msg=res.body.data; 
    },function(){
     console.log('请求失败处理');
    });
   }
  }
});
}
</script>
</body>
</html>

ok,都测试好了,可以使用,千万别搞错id哦。

以上这篇使用Vue调取接口,并渲染数据的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
详解Vue组件实现tips的总结
Nov 01 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
JavaScript 反射和属性赋值实例解析
Oct 28 #Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 #Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 #Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 #Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 #Javascript
js实现图片无缝循环轮播
Oct 28 #Javascript
Vue 实现html中根据类型显示内容
Oct 28 #Javascript
You might like
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
js读取本地excel文档数据的代码
2010/11/11 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
js单例模式详解实例
2013/11/21 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
网络工程师职业规划
2014/02/10 职场文书
劲霸男装广告词
2014/03/21 职场文书
作风建设演讲稿
2014/05/23 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
教导主任个人总结
2015/03/03 职场文书
高三英语教学反思
2016/03/03 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers