TP5后端,VUE前端请求聚合数据新闻接口

问题描述：
TP5当后端,VUE当前端， 请求聚合数据新闻接口
演示效果如下：

ps: 最开始加载页面的时候，只加载本地的文件(因为请求次数有限制)

问题解决：
1: vue 文件：

<template>
    <div class="whether-tank">
        <!--
                新闻接口 API 说明
            接口地址：http://v.juhe.cn/toutiao/index
            返回格式：json
            请求方式：get/post
            请求示例：http://v.juhe.cn/toutiao/index?type=top&key=APPKEY
            接口备注：返回头条(推荐)、国内，娱乐，体育，军事，科技，财经，时尚等新闻信息; 数据来源网络整理;
                名称	    必填	  类型	        说明
                key	        是	    string	    接口key, 在个人中心->我的数据,接口名称上方查看
                type	    否	    string	    支持类型： top(推荐,默认),guonei(国内),guoji(国际),yule(娱乐),
                                        tiyu(体育),junshi(军事),keji(科技),caijing(财经),shishang(时尚),youxi(游戏),qiche(汽车),jiankang(健康)
                page	    否	    int	        当前页数, 默认1, 最大50
                page_size	否	    int	        每页返回条数, 默认30 , 最大30
                is_filter	否	    int	        是否只返回有内容详情的新闻, 1:是, 默认0

            ---------------------------------------------------------------
            返回参数说明：

            名称	        类型	  说明
            error_code	    int	    返回码
            reason	        string	返回说明
            result	        obj	    返回结果集
            data	        array	新闻列表, 无数据时为null
            uniquekey	    string	新闻ID
            title	        string	新闻标题
            date	        string	新闻时间
            category	    string	新闻分类
            author_name	    string	新闻来源
            url	            string	新闻访问链接
            thumbnail_pic_s	string	新闻图片链接
            is_content	    string	是否有新闻内容, 1表示有 可以通过查询新闻详细内容小接口获取新闻内容

            ---------------------------------------------------------------
            JSON返回示例：
            {
                "reason": "success",
                "result": {
                    "stat": "1",
                    "data": [
                        {
                            "uniquekey": "db61b977d9fabd0429c6d0c671aeb30e",
                            "title": "“新时代女性的自我关爱”主题沙龙暨双山街道福泰社区妇儿活动家园启动仪式举行",
                            "date": "2021-03-08 13:47:00",
                            "category": "头条",
                            "author_name": "鲁网",
                            "url": "https://mini.eastday.com/mobile/210308134708834241845.html",
                            "thumbnail_pic_s": "https://dfzximg02.dftoutiao.com/news/20210308/20210308134708_d0216565f1d6fe1abdfa03efb4f3e23c_0_mwpm_03201609.png",
                            "thumbnail_pic_s02": "https://dfzximg02.dftoutiao.com/news/20210308/20210308134708_d0216565f1d6fe1abdfa03efb4f3e23c_1_mwpm_03201609.png",
                            "thumbnail_pic_s03": "https://dfzximg02.dftoutiao.com/news/20210308/20210308134708_d0216565f1d6fe1abdfa03efb4f3e23c_2_mwpm_03201609.png",
                            "is_content": "1"
                        },
                        {
                            "uniquekey": "7d246cbfa9000fb5ac42fb3bb934a592",
                            "title": "滴滴发布女司机数据：2020年新增女性网约车司机超26万",
                            "date": "2021-03-08 13:40:00",
                            "category": "头条",
                            "author_name": "国青年网",
                            "url": "https://mini.eastday.com/mobile/210308134023641877777.html",
                            "thumbnail_pic_s": "https://dfzximg02.dftoutiao.com/news/20210308/20210308134023_7a9ca0543b00332147c42e1ee4146908_0_mwpm_03201609.png",
                            "thumbnail_pic_s02": "https://dfzximg02.dftoutiao.com/news/20210308/20210308134023_7a9ca0543b00332147c42e1ee4146908_1_mwpm_03201609.jpeg",
                            "is_content": "1"
                        },
                        {
                            "uniquekey": "c0611bea6eb961a57b21a0d1008bbe2e",
                            "title": "点赞！东海县公安局学雷锋见行动",
                            "date": "2021-03-08 13:38:00",
                            "category": "头条",
                            "author_name": "江南时报",
                            "url": "https://mini.eastday.com/mobile/210308133849892734209.html",
                            "thumbnail_pic_s": "https://dfzximg02.dftoutiao.com/news/20210308/20210308133849_b9f3d069a1ab400bf2d87fcc15793ca5_1_mwpm_03201609.png",
                            "thumbnail_pic_s02": "https://dfzximg02.dftoutiao.com/news/20210308/20210308133849_b9f3d069a1ab400bf2d87fcc15793ca5_2_mwpm_03201609.png",
                            "thumbnail_pic_s03": "https://dfzximg02.dftoutiao.com/news/20210308/20210308133849_b9f3d069a1ab400bf2d87fcc15793ca5_3_mwpm_03201609.png",
                            "is_content": "1"
                        }
                    ],
                    "page": "1",
                    "pageSize": "3"
                },
                "error_code": 0
            }
         -->
        <!--
            1: 根据里面的参数来写前端样式；
            2： type: 4 个参数， 第一个参数是 type 类型，有若干个选项，那么就写一个遍历，或者下拉也可以，我自己选择遍历出来，直接点击
            3： page 当前页数，最大 50 页，1 为默认选项， 50 为最后的选项
            4： page_size 每页返回条数： 最大30 ，默认30
            5： is_filter 返回有内容详情的新闻， 1 ： 是； 默认 0， 什么都返回 【 这里选择只返回有内容详情的 】

            1: 先给 头条 红色， 之后，用户点击了的变红色
            2： 鼠标在元素里面的时候显示图片，点击去该 url ，鼠标移走，则图片不显示 [ 遍历属性存在还是不存在 ]
         -->

        <el-card class="box-card" v-show="normalEle">
            <div class="header">
                <div class="type" >
                    <span class="typeSpan" v-for="(t, index) in type" :key="index" @click="changeType(t.value, index)">{
  { t.label }}</span>
                </div>

                <div class="pagesizeChoose">
                    <span>
                        <el-select v-model="pagesize" placeholder="显示1条" @change="pagesizeFn(pagesize)">
                            <el-option v-for="i in 30" :key="i" :label="'显示' + i + '条'" :value="i"></el-option>
                        </el-select>
                    </span>
                </div>
            </div>

            <div class="list">
                <el-card class="content">
                    <table v-for="(d, index) in data" :key="index" @click="newsURL(d.url)" class="cursorPointer newsTable" @mouseenter="showImgs(index)" @mouseleave="hideImgs(index)">
                        <tr>
                            <td width="500" align="left">
                                <span class="serialNmb"> {
  { index + 1 }} <span>.</span></span>
                                <span class="fontBolder"> {
  { d.title }}</span>
                            </td>
                            <td>{
  { d.date }}</td>
                            <td width="100" align="right">{
  { d.author_name }}</td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <div class="imgs" :class="'imgs' + index">
                                    <img :src="d.thumbnail_pic_s != null ? d.thumbnail_pic_s : ''" alt="" width="100">
                                    <img :src="d.thumbnail_pic_s02 != null ? d.thumbnail_pic_s02 : ''" alt="" width="100">
                                    <img :src="d.thumbnail_pic_s03 != null ? d.thumbnail_pic_s03 : ''" alt=""<