使用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 操作css实现代码
Jun 11 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 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 socke 向指定页面提交数据
2008/07/23 PHP
php开启安全模式后禁用的函数集合
2011/06/26 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
python中的内置函数getattr()介绍及示例
2014/07/20 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
Python基于requests库爬取网站信息
2020/03/02 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
Python内置函数及功能简介汇总
2020/10/13 Python
住房公积金接收函
2014/01/09 职场文书
产品开发计划书
2014/04/27 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书