使用Vue调取接口,并渲染数据的示例代码
刚接触vue.js框架的时候,很伤脑筋。今天整理一下post/get两种方式,简单的调取数据库数据,并进行渲染,希望帮助大家!
首先,在HTML页面引入:
//引入vue.js文件引入vue-resource.min.js文件,就可以引入接口方法了
然后,在body中书写div:
//id在下面js中进行引用//v-for循环数据表中的数据 序号 姓名 头像 {{v.id}} {{v.username}} {{v.photo}}
第三,js代码:
window.onload=function(){ //实例化vue类 varvm=newVue({ //绑定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('请求失败处理'); }); } } }); }
控制器:
publicfunctionindex() { ////引入秘钥 $pwd=newApisModel(); $passwd=$pwd->passwd(); //print_r($passwd);die; //空的数组,等待输入秘钥与存储在model层的秘钥对比 $date=request()->get(); //print_r($date);die; //对比秘钥是否一致 if($date['key']==$passwd){ $model=newApisModel(); $data=$model->role_show(); returnjson(array('data'=>$data,'code'=>1,'message'=>'操作完成')); }else{ $data=['name'=>'status','message'=>'操作失败']; returnjson(['data'=>$data,'code'=>2,'message'=>'秘钥不正确']); } }
model:
publicfunctionpasswd(){ $key='存放在本地的密钥'; return$key; } //简单的测试接口 publicfunctionrole_show(){ returnDb::name('role_power')->select(); }
OK,post方式搞定了,下面是vue使用get方法进行接口调用,渲染数据
简单粗暴,大致一样,就不一一详解了,上代码:
Vue测试实例-菜鸟教程(runoob.com) ROLE_ID POWER_ID 创建时间 {{v.role_id}} {{v.power_id}} {{v.create_time}}
ok,都测试好了,可以使用,千万别搞错id哦。
以上这篇使用Vue调取接口,并渲染数据的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。