使用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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
Angular简单验证功能示例
Dec 22 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 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
php自动加载方式集合
2016/04/04 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
再论Javascript的类继承
2011/03/05 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
Python中的面向对象编程详解(下)
2015/04/13 Python
python查找指定具有相同内容文件的方法
2015/06/28 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
python实现比较文件内容异同
2018/06/22 Python
使用Python更换外网IP的方法
2018/07/09 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
python检测服务器端口代码实例
2019/08/31 Python
Python日志syslog使用原理详解
2020/02/18 Python
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
服务员岗位责任制
2014/02/11 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
小学生优秀评语
2014/12/29 职场文书
2015年公司工作总结
2015/04/25 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python