使用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 相关文章推荐
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
Node.js笔记之process模块解读
May 31 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
angular4实现带搜索的下拉框
Mar 25 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
python实现海螺图片的方法示例
2019/05/12 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
Html5定位终极解决方案
2020/02/05 HTML / CSS
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
领导干部培训感言
2014/01/23 职场文书
酒店管理求职信范文
2014/04/06 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
python opencv通过4坐标剪裁图片
2021/06/05 Python
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js
Python实现自动玩连连看的脚本分享
2022/04/04 Python