问题描述:
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=""<