专栏首页前端之攻略跨域PHP代理到本地后Vue 数据展示 原

跨域PHP代理到本地后Vue 数据展示 原

如果我们直接使用网上的API接口来测试页面效果,会显示跨域错误;

解决方法:使用代理到本地的方法;

假如api是:http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html

后台服务  proxy.php

<?php
//$name = $_GET["name"];
//$info =$_GET["info"];
$crossUrl = "http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html";
$res = file_get_contents($crossUrl);
echo $res;
?>

vue 页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Vue Bootstrap Table Demo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
</head>

<body class="">
    <div>
        <table class="table table-bordered" id="tableTest1">
            <tr v-for="item in message.T1348647853363">
                <td v-for="value in item">
                    <ul v-if="value instanceof Array">
                        <li v-for="content in value">
                            <div v-for="value in content">{{value}}</div>
                        </li>
                    </ul>
                    <template v-else-if="value instanceof Object">
                        <div v-for="value in value">
                            {{value}}
                        </div>
                    </template>
                    <template v-else>{{value}}</template>
                </td>
                <!--  <td>{{item.votecount}}</td>
				<td>{{item.docid}}</td>
				<td>{{item.lmodify}}</td>
				<td>{{item.source}}</td>
				<td>{{item.postid}}</td> -->
            </tr>
        </table>
    </div>
    <script src="../../jQuery/jQuery-2.1.4.min.js"></script>
    <script src="../../dist/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#tableTest1",
        data: {
            message: []
        },
        created() {
            $.get("http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html", data => {
                var data = JSON.parse(data);
                console.log(data)
                this.message = data;
            })
        }
    })
    </script>
</body>

</html>

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • web完全响应式布局 原

    在页面布局中响应式布局优势很明显,能适应不同的屏幕,现在很多的网站系统也都是响应式布局

    tianyawhl
  • vueRouter-命名视图 原

    有时候想同时展示多个视图,而不是嵌套展示,例如创建一个布局,有sidebar(侧导航)和(主内容)2个视图,这个时候命名视图就派上用场了。 你可以在界面中拥有...

    tianyawhl
  • 单列div不包含里面div margin的解决方法

    若一个大的div ,里面有2个小div,第一个小div有margin-top:20px; margin-bottom:20px;,第二个小divmargin-b...

    tianyawhl
  • 实现一个前后端的CS结构人脸识别小程序服务

    一、实现方式:前端调用相机组件实现人脸在线采集,然后将人脸图片传到自建的服务端调用人脸识别-人脸检测与分析API将识别结果回调到小程序页面中。

    用户1529147
  • 断网超过150天,克什米尔终于部分恢复互联网

    2019年8月4日,印度人民党政府单方面取消了其控制的克什米尔邦的自治权,派遣军队去平息可能的骚乱,并切断了当地的互联网。

    FB客服
  • Kiwi TCMS 6.11发布 开源测试用例管理系统

    Kiwi TCMS 是一个集测试计划、测试运行和测试用例于一身的管理系统,用 Python 和 Django 编写。6.11 版本已经发布,这是一个安全和改进版...

    Debian社区
  • 人工智能是人性的罗夏测试

    用户1737318
  • 人工智能是人性的罗夏测试

    在20世纪60年代,一位心理学家盯着他的病人——一个谢顶的中年领班,他的手里拿着一支香烟,一缕香烟环绕就像是虚幻的光环。心理学家举起一张墨迹图,一个用黑色的墨水...

    AI科技大本营
  • 深入理解Java常用类----String(二)

         上篇介绍了String类的构造器,获取内部属性等方法,最后留下了最常用的局部操作函数没有介绍,本篇将接着上篇内容,从这些最常见的函数的操作说起,看看我...

    Single
  • Python检查字符串重叠部分并进行拼接

    问题描述:假设有两个字符,要求检查两个字符串的重叠部分并进行拼接。例如abcdefg和fghik拼接得到abcdefghik,1234和23456拼接得到123...

    Python小屋屋主

扫码关注云+社区

领取腾讯云代金券