使用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 相关文章推荐
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
Vue学习之组件用法实例详解
Jan 06 Javascript
swiper实现导航滚动效果
Dec 13 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
生成sessionid和随机密码的例子
2006/10/09 PHP
PHP 采集心得技巧
2009/05/15 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
WAF的正确bypass
2017/01/05 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
javascript window.opener的用法分析
2010/04/07 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
煤矿安全生产标语
2014/06/06 职场文书
关于保护环境的建议书
2014/08/26 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
出纳工作检讨书
2014/10/18 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android