用到jQuery Vue
目标：
步骤：
- 获取链接
- 爬取链接
public function get($url) { $this_header = array("content-type: application/x-www-form-urlencoded;charset=UTF-8"); $this->curl = curl_init(); curl_setopt($this->curl, CURLOPT_CONNECTTIMEOUT, 8); curl_setopt($this->curl, CURLOPT_URL, $url); curl_setopt($this->curl, CURLOPT_HEADER, 0); curl_setopt($this->curl, CURLOPT_USERAGENT, $this->user_agent); curl_setopt($this->curl, CURLOPT_HTTPHEADER, $this->host); curl_setopt($this->curl, CURLOPT_RETURNTRANSFER, 1); $data = curl_exec($this->curl); curl_close($this->curl); return $data; } - 处理爬取的内容：
$shujujson = $shuju->get($url); $shujujson=strstr($shujujson, '('); $shujujson=str_replace('(', '', $shujujson); $shujujson=str_replace(')', '', $shujujson); - 展示演示地址
源码：
<?php
// https://nba.stats.qq.com/stats/detail/?order=defen&type=player
// 腾讯体育
header('Access-Control-Allow-Origin:*'); // *代表允许任何网址请求
// 爬取页面，貌似直接Ajax需要跨域，为了方便直接爬虫
class http_no_cookie
{
private $curl;
public $host = array("Host"=>"ziliaoku.sports.qq.com");
public $user_agent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36";
public function get($url)
{
$this_header = array("content-type: application/x-www-form-urlencoded;charset=UTF-8");
$this->curl = curl_init();
curl_setopt($this->curl, CURLOPT_CONNECTTIMEOUT, 8);
curl_setopt($this->curl, CURLOPT_URL, $url);
curl_setopt($this->curl, CURLOPT_HEADER, 0);
curl_setopt($this->curl, CURLOPT_USERAGENT, $this->user_agent);
curl_setopt($this->curl, CURLOPT_HTTPHEADER, $this->host);
curl_setopt($this->curl, CURLOPT_RETURNTRANSFER, 1);
$data = curl_exec($this->curl);
curl_close($this->curl);
return $data;
}
}
$shuju=new http_no_cookie();
// 2019-2020
$url='http://ziliaoku.sports.qq.com/cube/index?cubeId=10&dimId=52&from=sportsdatabase&order=t70¶ms=t2:2019|t3:1|&limit=0,50&callback=jQuery19107997312163519312_1591767976854&_=1591767976855';
$shujujson = $shuju->get($url);
$shujujson=strstr($shujujson, '(');
$shujujson=str_replace('(', '', $shujujson);
$shujujson=str_replace(')', '', $shujujson);
?>
<style>
@charset "utf-8";
body {
color: #333;
text-align: center;
font: 12px "微软雅黑";
}
ul,
ol,
li {
list-style-type: none;
vertical-align: 0;
}
a {
outline-style: none;
color: blue|green;
text-decoration: none
}
a:hover {
color: #D40000;
text-decoration: none
}
.clear {
height: 0;
overflow: hidden;
clear: both
}
.datouwang {
height: 100px;
line-height: 100px;
font-size: 30px;
font-family: "微软雅黑";
text-align: center;
font-weight: normal
}
#chenkbox {
margin: 0px auto;
position: relative;
}
table {
margin: auto;
width: 95%;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
background-color: #fff;
opacity: 0.7;
}
th {
background: #ebf3f0;
font-size: 13px;
color: #000002;
height: 25px;
cursor: pointer;
}
th,
td {
text-align: center;
border: 1px solid #dcdbdb;
padding: 8px 10px;
}
#box {
position: absolute;
display: none;
background: #fff;
text-align: center;
top: 0;
background-color: #000;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
height: 100%;
cursor: move;
}
#box p {
line-height: 34px;
}
tr{
box-shadow: 3px 3px 3px #888888;
}
</style>
<div id="chenkbox">
<table id="tableSort">
<tr>
<th colspan="20">NBA 常规赛成绩（前50名）</th>
</tr>
<tr>
<th v-for="(type_son,index) in type" v-on:click="sortTable(index)" title="点击排序"> {{type_son}} </th>
</tr>
<tr v-for="(list_son,index) in list">
<td v-for="type_val_son in type_val">{{list_son[type_val_son]}}</td>
</tr>
</table>
<div id="box"></div>
</div>
<script src="http://wx0725.top/js/vue.min.js"></script>
<script src="http://wx0725.top/js/mui.min.js"></script>
<script src="http://wx0725.top/js/jquery.min.js"></script>
<script>
var nba_data = new Vue({
el:'#chenkbox',
data:{
list:<?php echo json_encode(json_decode($shujujson)->data->nbaPlayerSeasonStatRank);?>,
type:['排名','球员','球队','得分','出手数','命中率','3分出手','3分命中率','罚球数','罚球命中率','篮板','前场篮板','后场篮板','助攻','抢断','盖帽','失误','犯规','场次','上场时间(分)'],
type_val:['p','cnName','teamName','points','fgAttempted','fgPCT','threesAttempted','threesPCT','ftAttempted','ftPCT','rebounds','offensiveRebounds','defensiveRebounds','assists','steals','blocks','turnovers','fouls','gamesStarted','minutes'],
},
mounted:function(){
// p_init();
}
});
p_no_init();
/**数组根据数组对象中的某个属性值进行排序的方法
* 使用例子：newArray.sort(sortBy('number',false)) //表示根据number属性降序排列;若第二个参数不传递，默认表示升序排序
* @param attr 排序的属性 如number属性
* @param rev true表示升序排列，false降序排序
* */
function sortBy(attr,rev){
//第二个参数没有传递 默认升序排列
if(rev == undefined){
rev = 1;
}else{
rev = (rev) ? 1 : -1;
}
return function(a,b){
a = a[attr];
b = b[attr];
if(a < b){
return rev * -1;
}
if(a > b){
return rev * 1;
}
return 0;
}
}
// 没有p属性
function p_no_init(){
for(var i=0;i<nba_data.list.length;i++)
nba_data.list[i].p=i;
}
function p_init(){
for(var i=0;i<nba_data.list.length;i++)
nba_data.list[i]['p']=i;
}
function sortTable(id){
nba_data.list=nba_data.list.sort(sortBy(nba_data.type_val[id],false));
p_init();
}
// console.log(arr.sort(compare('age')));
</script>