新聞介面調試

HTML:

<style  type="text/css">
    [v-cloak] {
        display: none;
    }

    a{
        color: blue;
        text-decoration: none;
        transition: 1s;
    }
    a:hover{
        color: orange;
        margin-left: 20px;
        transition: 1s;
    }
    ol{
        border: 1px solid #000;
        width: 800px;
        padding-right: 10px;
    }
    .btn,form{
        width: 851.98px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .btn button{
        padding: 3px 10px;
    }
    .btn span{
        vertical-align: middle;
    }
    p{
        text-align: justify;
        display: grid;
        border-left: 6px solid #ccc;
        background-color: #eee;
        padding: 6px 12px;
    }
    form{
        margin: 0 auto 20px auto;
        justify-content: center;
        margin-bottom: 20px;
    }
    form input[type='text']{
        padding: 3px 10px;
        margin-right: 10px;
    }
    #newslist{
        width: 851.98px;
        margin: 0 auto;
    }
    h3{
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100%;
        overflow: hidden;
    }
</style>
    <form action="" onsubmit="return false;">
        <label>關鍵字 <input type="text" name="kw" id="kw" placeholder="請輸入關鍵字"></label>
        <button type="submit">提交</button>
    </form>
    <div id="newslist" v-cloak>
        <div class="btn">
            <button id="prev" v-on:click="prev(kw,num -= 1)" disabled="true">上一頁</button>
            <span>{{num}}</span>
            <button id="next" v-on:click="next(kw,num += 1)">下一頁</button>
        </div>
        <ol>
            <li v-for="(item) in showData.data">
                <h3><a v-bind:href="item.url" target="_blank" v-html="item.title"></a></h3>
                <div style="display: flex;justify-content: space-between;">
                    <span>來自：{{item.posterScreenName}}->{{item.posterId}}</span>  
                    <span>發佈時間：{{item.publishDateStr}}</span>    
                </div>   
                <p v-if="item.content" v-html="item.content"></p>
            </li>
        </ol>
    </div>

JavaScript:

        // 預設搜索互聯網
        // site參數設置網站,
        var vmShowNews = new Vue({
            el:"#newslist",
            data:{
                showData:{},
                num:1,
                kw:$('#kw').val(),
                next:function(keyword,num){
                    if ($('#kw').val() == "") {
                        keyword = "互聯網";
                    }else{
                        keyword = $('#kw').val();
                    }
                    $.ajax({
                        url: "news.php",
                        async:false,
                        data: {
                            kw:keyword,
                            pageToken:num
                        },
                        type: "POST",
                        dataType: "json",
                        success: function (data) {
                            if(data.retcode == "000000"){
                                if (num == 1) {
                                    $('#prev').attr('disabled',true);
                                }else{
                                    $('#prev').attr('disabled',false);
                                }
                                vmShowNews.showData = data;
                                if (data.hasNext === false) {
                                    $('#next').attr('disabled',true);
                                }
                            }else{
                                alert(data.message);
                            }
                            
                        }
                    }); 
                },
                prev:function(keyword,num){
                    if ($('#kw').val() == "") {
                        keyword = "互聯網";
                    }else{
                        keyword = $('#kw').val();
                    }
                    $.ajax({
                        url: "news.php",
                        async:false,
                        data: {
                            kw:keyword,
                            pageToken:num
                        },
                        type: "POST",
                        dataType: "json",
                        success: function (data) {
                            if(data.retcode == "000000"){
                                if (num == 1) {
                                    $('#prev').attr('disabled',true);
                                }
                                vmShowNews.showData = data;
                            }else{
                                alert(data.message);
                            }
                        }
                    });
                }
            }
        })
        vmShowNews.next('',1);
        $("button[type='submit']").click(function(){
            vmShowNews.next($('#kw').val(),1);
        })

PHP介面（版本7.1.16）:

<?php
$method = "GET";
$url = "120.76.205.241:8000/news/qihoo?apikey=cXHbhftNWpcYm2I9tcKQz7qk4I6a28Ag4iKiwDEpVdwcEmuHowdzvkTJ7xjEayIz&kw=" . $_POST['kw'] . "&pageToken=" . $_POST['pageToken'];
$curl = curl_init();
curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_FAILONERROR, false);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
// curl_setopt($curl, CURLOPT_HEADER, true);
curl_setopt($curl, CURLOPT_ENCODING, "gzip");
echo curl_exec($curl);
?>