使用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 相关文章推荐
js类的静态属性和实例属性的理解
Oct 01 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
Three.js学习之网格
Aug 10 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
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
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
JavaScript中的this实例分析
2011/04/28 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
原生JavaScript实现进度条
2021/02/19 Javascript
Python模块搜索路径代码详解
2018/01/29 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
Python如何读写CSV文件
2020/08/13 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
护士辞职信范文
2014/01/19 职场文书
初中语文教学反思
2014/02/02 职场文书
阿德的梦教学反思
2014/02/06 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
学生生病请假条范文
2014/02/16 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
培训班通知
2015/04/25 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书