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, 最大50page_size    否       int         每页返回条数, 默认30 , 最大30is_filter    否       int         是否只返回有内容详情的新闻, 1:是, 默认0---------------------------------------------------------------返回参数说明：名称          类型    说明error_code      int     返回码reason           string  返回说明result          obj     返回结果集data           array   新闻列表, 无数据时为nulluniquekey        string  新闻IDtitle           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 ，默认305： 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="" width="100"></div></td></tr></table><div v-show="outOfdataLen"><h2>No more news</h2></div></el-card></div><div class="pageChoose"><div class="pageNmb"><div class="singlePage" v-for="i in 50" :key="i" :class="'singlePage' + i" @click="pageNmbSelect(i)">{{ i }}</div><el-select v-model="pageNmb" placeholder="第1页" @change="pageNmbSelect(pageNmb)" class="pageNmbSelect"><el-option v-for="i in 50" :key="i" :label="'第' + i + '页'" :value="i"></el-option></el-select></div></div></el-card><el-card v-show="errEle"><h2>something error</h2></el-card></div>
</template><script>export default {name: 'news',mounted: function () {this.pageNmbSelect() // 分页处理this.getData() // 获取数据},data () {return {apiUrl: '/api_4', // api Url【参数】newsType: 'top', // 新闻类型【参数】beginPage: 1, // 起始页码endPage: 5, // 结束页码currentPage: 1, // 当前页码【参数】pagesize: 30, // 显示条数【参数】pageNmb: 1, // 页数[第几页]data: [], // 新闻数据dataLen: 0, // 新闻数据长度defaultOrNot: 1, // 是不是一进来就的请求outOfdataLen: false, // 数据低于 30 条的时候显示type: [ // 新闻类型{value: 'top', label: '头条(默认)'}, {value: 'guonei', label: '国内'}, {value: 'guoji', label: '国际'}, {value: 'yule', label: '娱乐'}, {value: 'tiyu', label: '体育'}, {value: 'junshi', label: '军事'},{value: 'keji', label: '科技'}, {value: 'caijing', label: '财经'}, {value: 'shishang', label: '时尚'}, {value: 'youxi', label: '游戏'}, {value: 'qiche', label: '汽车'}, {value: 'jiankang', label: '健康'}],errEle: false, // 错误信息normalEle: true}},methods: {getData: function (defaultType, newsType, pageNumber, pageSize) { // 获取数据，默认展示 30 条数据defaultType = defaultType || this.defaultOrNotnewsType = newsType || this.newsTypepageNumber = pageNumber || this.pageNmbpageSize = pageSize || this.pagesizethis.$axios({url: this.apiUrl,params: {default: defaultType, // 是不是默认，1是， 0否 【 是的话，就展示 json 里面的内容，因为访问接口有限制 】type: newsType, // 新闻类型pageNmb: pageNumber, // 默认显示第一页pagesize: pageSize // 默认显示 30 条},methods: 'get'}).then(res => {if (res.data.error_code === 0) {let newData = res.data.result.datathis.data = newDatathis.dataLen = newData.length} else {this.errEle = trueconsole.log('something error:' + res)}}).catch(err => {console.log(err)})},pageNmbSelect: function (nmb) { // 开始的时候，只显示 5 个可选页码, 并设置当前页码为红色nmb = arguments[0] ? arguments[0] - 1 : 0 // 设置默认参数，传过来的参数是比下标大 1 ， 所以需要 - 1if (nmb !== 0) {this.getData(2, this.newsType, nmb, this.pagesize)}let eles = document.getElementsByClassName('singlePage')for (let i = 0; i < 50; i++) {eles[i].style.display = 'none'eles[i].style.color = 'black'}if (nmb === 0 || nmb === 1) {eles[0].style.display = 'block'eles[1].style.display = 'block'eles[2].style.display = 'block'eles[3].style.display = 'block'eles[4].style.display = 'block'} else if (nmb === 48 || nmb === 49) {eles[45].style.display = 'block'eles[46].style.display = 'block'eles[47].style.display = 'block'eles[48].style.display = 'block'eles[49].style.display = 'block'} else {eles[nmb - 2].style.display = 'block'eles[nmb - 1].style.display = 'block'eles[nmb].style.display = 'block'eles[nmb + 1].style.display = 'block'eles[nmb + 2].style.display = 'block'}eles[nmb].style.color = 'red'},pagesizeFn: function (pagesize) { // 显示条数，因为页面加载的时候已经给了条数，所以，只要当前 pagesize <= this.dataLen 即可if (pagesize <= this.dataLen) {let newsTable = document.getElementsByClassName('newsTable')let newsTableLen = newsTable.lengthconsole.log(pagesize)console.log(newsTableLen)console.log(this.dataLen)for (let i = 0; i < newsTableLen; i++) {newsTable[i].style.display = 'none'}for (let i = 0; i < pagesize; i++) {newsTable[i].style.display = 'block'}} else {console.log('已经没有数据要隐藏或者显示了')}},changeType: function (val, index) { // 类型修改this.pageNmb = 1 // 不管类型发生不发生改变，都回到第一页(不改变，就相当于刷新，改变就相当于看另外一个栏目的内容)let typeSpans = document.getElementsByClassName('typeSpan') // 修改对应的颜色let typeSpanLen = typeSpans.lengthfor (let i = 0; i < typeSpanLen; i++) {typeSpans[i].style.color = 'black'}typeSpans[index].style.color = 'red'this.getData(2, val, this.pageNmb, this.pagesize) // 获取数据, 0 表示请求接口数据let eles = document.getElementsByClassName('singlePage') // 改变之后，第一页显示红色for (let i = 0; i < 50; i++) {eles[i].style.display = 'none'eles[i].style.color = 'black'}eles[0].style.display = 'block'eles[1].style.display = 'block'eles[2].style.display = 'block'eles[3].style.display = 'block'eles[4].style.display = 'block'eles[0].style.color = 'red'},newsURL: function (url) { // 点击新闻链接window.open(url, '_blank')},showImgs: function (ele) { // 显示图片let className = 'imgs' + elelet thisEle = document.getElementsByClassName(className)[0]thisEle.style.display = 'flex'thisEle.style.justifyContent = 'space-around'},hideImgs: function (ele) { // 隐藏图片let className = 'imgs' + elelet thisEle = document.getElementsByClassName(className)[0]thisEle.style.display = 'none'}}
}
</script><style scoped>
.cursorPointer {cursor: pointer;
}
.box-card {width: 60%;margin: 0 auto;text-align: center;
}
.box-card .header {display: flex;
}
.pagesizeChoose {width: 7rem;
}
.type {width: 100%;display: flex;justify-content: space-around;line-height: 3rem;
}
.type .typeSpan {cursor: pointer;
}
.type span {font-weight: bolder;
}
.type span:first-child {color: red;
}
.serialNmb {font-weight: bolder;
}
.imgs {display: none;
}
.imgs img {border: none;
}
.fontBolder {font-weight: bolder;
}
.pageNmb {line-height: 3rem;display: flex;justify-content: center;
}
.singlePage {font-weight: bolder;margin: 0 1rem;cursor: pointer;padding: 0 1rem;
}
.pageNmbSelect {width: 6rem;
}
.singlePage1 {color: red;
}
</style>

2.0 TP5 http 封装的请求文件

<?php
namespace app\index\controller;class HttpRequest {public function index () {return "constellation api";}/*** 发起网络请求函数* @param String $url 请求的URL* @param bool $params  请求的参数内容* @param int $isPost   是否POST请求* @return bool|string  返回内容*/public function httpRequest($url, $params = false, $isPost = 0){$httpInfo = [];$ch = curl_init();curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);curl_setopt($ch, CURLOPT_USERAGENT,  'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36');    // 浏览器代理信息，我这里设置的自己的浏览器curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 3);    // 连接的等待时间， 3秒curl_setopt($ch, CURLOPT_TIMEOUT, 12);          // 函数最长的执行时间 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // 将 curl_exec() 获取的信息以字符串返回，而不是直接输出if ($isPost) {curl_setopt($ch, CURLOPT_POST, true);       // true 表示 post 请求curl_setopt($ch, CURLOPT_POSTFIELDS, $params);  // post 的请求数据的处理curl_setopt($ch, CURLOPT_URL, $url);        // 设置访问的 URL} else {if ($params) {curl_setopt($ch, CURLOPT_URL, $url . '?' . $params);} else {curl_setopt($ch, CURLOPT_URL, $url);}}$reponse = curl_exec($ch);if ($reponse === FALSE) {return false;   // echo "cURL Error: ".curl_error($ch);}$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);$httpInfo = array_merge($httpInfo, curl_getinfo($ch));curl_close($ch);return $reponse;}
}?>

2: TP5 php 文件

<?php
namespace    app\index\controller;use app\index\controller\HttpRequest;
use think\Route;
use think\Request;class Api4 {const CONST_KEY = "写入自己申请的聚合数据接口KEY";public function test() {return "This news control is working.";}public function index() {// 一进来的时候，默认值就请求本地数据$rsq = request() -> param();if (isset($rsq['default'], $rsq['top'], $rsq['pageNmb'], $rsq['pagesize'])) {return "缺少参数的请求！";}$defaultType = $rsq['default'];if ((int)$defaultType === 1) { // 一进来的请求，就直接请求本地文件就好了 【 每天有限制新闻请求次数 】$testJson = file_get_contents('./test4.json', true); // 读取 json 文件内容并编码，返回$newData = json_decode($testJson, true);return json($newData);}$newsType = $rsq['type'];$pageNmb = $rsq['pageNmb'];$pagesize = $rsq['pagesize'];$params = ['dft' => $defaultType,'type' => $newsType,'pageNmb' => $pageNmb,'pagesize' => $pagesize];$apiUrl = "http://v.juhe.cn/toutiao/index";$httpRequest = new HttpRequest;$paramsString = http_build_query($params);$response = $httpRequest -> httpRequest($apiUrl, $paramsString."&key=".self::CONST_KEY);return $response;}
}

3: 后端 test4.json 文件

{"reason":"success!","result":{"stat":"1","data":[{"uniquekey":"b611249885e0942241e0130ecc0b72fe","title":"救死扶伤，不分地域！广西三名医护人员外地高速救治伤员","date":"2021-11-20 19:08:00","category":"头条","author_name":"人民资讯","url":"https:\/\/mini.eastday.com\/mobile\/211120190857519671890.html","thumbnail_pic_s":"https:\/\/dfzximg02.dftoutiao.com\/news\/20211120\/20211120190857_fcd65ec7d28f7a6676d87da74f1f7703_1_mwpm_03201609.jpeg","thumbnail_pic_s02":"https:\/\/dfzximg02.dftoutiao.com\/news\/20211120\/20211120190857_fcd65ec7d28f7a6676d87da74f1f7703_2_mwpm_03201609.jpeg","thumbnail_pic_s03":"https:\/\/dfzximg02.dftoutiao.com\/news\/20211120\/20211120190857_fcd65ec7d28f7a6676d87da74f1f7703_3_mwpm_03201609.jpeg","is_content":"1"},{"uniquekey":"06109215119a4616232a3d76ea40e83f","title":"生死一线！本科生的我，幸运上岸积分落户北京的故事","date":"2021-11-20 19:00:00","category":"头条","author_name":"人民资讯","url":"https:\/\/mini.eastday.com\/mobile\/211120190015682929190.html","thumbnail_pic_s":"https:\/\/dfzximg02.dftoutiao.com\/news\/20211120\/20211120190015_4df3778a27e048f043d59f0fcdddb530_1_mwpm_03201609.jpeg","is_content":"1"},{"uniquekey":"bad85e1071dac053ca7172f71229a512","title":"连锅端！长春警方一次抓获15人...","date":"2021-11-20 19:00:00","category":"头条","author_name":"人民资讯","url":"https:\/\/mini.eastday.com\/mobile\/211120190009534945173.html","thumbnail_pic_s":"https:\/\/dfzximg02.dftoutiao.com\/news\/20211120\/20211120190009_b9e7fa222312db05969602c340089ff3_1_mwpm_03201609.jpeg","thumbnail_pic_s02":"https:\/\/dfzximg02.dftoutiao.com\/news\/20211120\/20211120190009_b9e7fa222312db05969602c340089ff3_2_mwpm_03201609.jpeg","is_content":"1"},{"uniquekey":"f7f19df8fafd840d7d3cab2e65ef4886","title":"遗产继承公证怎么办理？需要交哪些材料？","date":"2021-11-20 19:00:00","category":"头条","author_name":"人民资讯","url":"https:\/\/mini.eastday.com\/mobile\/211120190009381500173.html","thumbnail_pic_s":"https:\/\/dfzximg02.dftoutiao.com\/news\/20211120\/20211120190009_edb71f200f8db009312693046911607e_1_mwpm_03201609.jpeg","is_content":"1"},{"uniquekey":"9b55803c403a650ecfe7ae2b4c1772ea","title":"快评漫谈｜10期节目无动于衷，舆论炸裂才有作为？“恶狗咬人案”的媒体监督怎么这么难","date":"2021-11-20 19:00:00","category":"头条","author_name":"人民资讯","url":"https:\/\/mini.eastday.com\/mobile\/211120190006481265538.html","thumbnail_pic_s":"https:\/\/dfzximg02.dftoutiao.com\/news\/20211120\/20211120190006_c568dc70e80bd1f884a4b2956c903ea7_1_mwpm_03201609.jpeg","thumbnail_pic_s02":"https:\/\/dfzximg02.dftoutiao.com\/news\/20211120\/20211120190006_c568dc70e80bd1f884a4b2956c903ea7_2_mwpm_03201609.jpeg","is_content":"1"}],"page":"1","pageSize":"30"},"error_code":0
}

4： vue 路由配置 config/index.js

proxyTable: {'/api_1': {target:'http://www.chaxun.com/joke', // 你请求的第三方接口changeOrigin:true,  // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题pathRewrite:{       // 路径重写，'^/api_1': '/api_1'       // 替换target中的请求地址，也就是说以后你在请求 target 的地址的时候直接写成 /api_1 即可。}},'/api_2': {target: 'http://www.chaxun.com/constellation',changeOrigin: true,pathRewrite: {'^/api_2': '/api_2'}},'/api_3': {target: 'http://www.chaxun.com/weather',changeOrigin: true,pathRewrite: {'^/api_3': '/api_3'}},'/api_4': {target: 'http://www.chaxun.com/news',changeOrigin: true,pathRewrite: {'^/api_4': '/api_4'}},'/api_5': {target: 'http://www.chaxun.com/videos',changeOrigin: true,pathRewrite: {'^/api_5': '/api_5'}}},

5: tp5 路由配置： route.php

proxyTable: {'/api_1': {target:'http://www.chaxun.com/joke', // 你请求的第三方接口changeOrigin:true,  // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题pathRewrite:{       // 路径重写，'^/api_1': '/api_1'       // 替换target中的请求地址，也就是说以后你在请求 target 的地址的时候直接写成 /api_1 即可。}},'/api_2': {target: 'http://www.chaxun.com/constellation',changeOrigin: true,pathRewrite: {'^/api_2': '/api_2'}},'/api_3': {target: 'http://www.chaxun.com/weather',changeOrigin: true,pathRewrite: {'^/api_3': '/api_3'}},'/api_4': {target: 'http://www.chaxun.com/news',changeOrigin: true,pathRewrite: {'^/api_4': '/api_4'}}}

TP5后端,VUE前端请求聚合数据笑话大全接口

TP5后端,VUE前端请求聚合数据天气接口

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

TP5后端,VUE前端请求聚合数据天气接口
问题描述: TP5 当后端 VUE 当前端请求聚合数据天气接口问题解决: 演示效果前端 VUE 代码: <template><div class="whether-t ...
TP5后端,VUE前端请求聚合数据驾照题库
选择效果: 演示效果: 1: Vue 配置: /config/index.js 'use strict' // Template version: 1.3.1 // see http://vuejs- ...
TP5后端,VUE前端请求聚合数据成语大全
PS: 聚合接口上描述的是成语大全,其实只是以用户查找字为开头的成语而已.先上演示效果: 1: VUE 前端代码 <template><div class="content ...
TP5后端,VUE前端请求聚合数据过去的今天
先上效果: 1: 前端 vue 文件: <template><!--接口地址 http://v.juhe.cn/todayOnhistory/queryEvent.php参数名类型 ...
TP5后端,VUE前端请求京东万象菜谱大全
写这个代码的收获: 1: http 请求 https 有一个证书验证(我这里给它关了,接口的数据就进来了) 2: 对后端的一些参数过滤(给默认值, 或者直接拒绝服务) 代码演示效果: 1: 前端VUE ...
java sse_后端向前端推送数据 SSE java
研究一种后端向前端推送数据的操作,叫SSE(Server-Sent Events),但是,我觉得这玩意就是轮询.算了,烦的要死,记录下这种方式把. 前端代码是vue写的,EventSource里面是后 ...
本地Vue前端请求本地Spring Boot跨域问题（CROS错误）
一.Vue前端请求的url为 : GET /WebServer/home/get-user-info?id=1 二.Spring Boot后端是一个Get请求的RestFul接口地址,且后端应用的 ...
Vue2前端请求API数据跨域问题解决
Vue2前端请求API数据跨域问题解决方法前端:Vue2 接口使用:API 问题报错提示: Access to XMLHttpRequest at 'http://localhost:9090/ec ...
SpringMVC(二)——转发和重定向、处理前端请求的数据（普通字符串/对象）
文章目录 1. 转发和重定向 2. 处理前端请求的数据 2.1 普通字符串 2.2 对象 1. 转发和重定向转发:url不会发生变化 (查询前端固定模板的数据) @RequestMapping(&q ...

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

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

最新文章

热门文章