最近学校课程学习不是很紧张，所以自己学了下PHP(高中一直想学)。
用到了PHP关于Json，正则表达式的相关知识，html基本技术以及对layerui的运用
Json主要用来讲后端(PHP)数据发送到前端html
正则表达式则用来提取从其他网站获取的信息
下面是各部分代码：
1、前端
主页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中南民族大学CSGO</title>
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
<div id="mynav">
<ul class="layui-nav layui-bg-blue">
<li class="layui-nav-item"><a href="">中南民族大学CSGO</a></li>
<li class="layui-nav-item layui-this"><a href="">首页</a></li>
<li class="layui-nav-item"><a href="">队员介绍</a></li>
<li class="layui-nav-item"><a href="javascript:;">排行榜</a></li>
<li class="layui-nav-item"><a href="javascript:;">下载中心</a></li>
<li class="layui-nav-item"><a href="">联系我们</a></li>
</ul>
</div>
<div class="layui-carousel" id="test1">
<div carousel-item>
<div><img src="https://img.dota2.com.cn/file/cc/98/cc98f108f61b09a55cfd08dc792cfc981571124266.jpg"></div>
<div><img src="https://www.csgo.com.cn/jpg/170914/10691505402107160.jpg"></div>
<div><img src="https://www.csgo.com.cn/jpg/170914/10691505402757806.jpg"></div>
<div><img src="https://www.csgo.com.cn/jpg/170621/10691498033188974.jpg"></div>
<div><img src="https://www.csgo.com.cn/jpg/170407/10691491538825707.jpg"></div>
</div>
</div>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">组织简介</div>
<div class="layui-card-body">
中南民族大学CSGO建立于2017年9月，发展至今已拥有百余热爱CSGO的成员。<br>队长(Apple)QQ：1051968391<br>QQ群：877385942<br>官网：http://www.mdcsgo.club
</div>
</div>
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">李清照</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
</div>
</div>
<div class="layui-col-md4">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>5E天梯榜</legend>
<div style = "text-align:center;">
<br><font size="2" color="black">没看到自己的账号？点击按钮即可提交自己5E账号</font>
</div>
<div style = "text-align:right;">
<br><br><a class="layui-btn layui-btn-radius layui-btn-normal" href="#" class="layui-btn">提交5E账号</a>
</div>
</fieldset>
<table id="demo" lay-filter="test"></table>
<script src="/layui/layui.js"></script>
<script>
//表格相关js
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,height: 312
,url: 'http://localhost/demo/' //数据接口
,page: true //开启分页
,response: {
statusName: 'code' //规定数据状态的字段名称，默认：code
,statusCode: 200 //规定成功的状态码，默认：0
,msgName: 'msg' //规定状态信息的字段名称，默认：msg
,countName: 'count' //规定数据总数的字段名称，默认：count
,dataName: 'data' //规定数据列表的字段名称，默认：data
}
,cols: [[ //表头
{field: 'id', title: 'ID', width:200, fixed: 'left'}
,{field: 'elo', title: '天梯分', width: 80, sort: true}
,{field: 'rank', title: '排名', width: 80, sort: true}
]]
});
});
//下面是折叠信息区，注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
//…
});
//轮播区js
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1'
,width: '100%' //设置容器宽度
,height: 720 //设置容器高度
,arrow: 'always' //始终显示箭头
//,anim: 'updown' //切换动画方式
});
});
</script>
</div>
</div>
</body>
</html>添加用户到数据库的表单(Table)模块：
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>5E天梯榜</legend>
</fieldset>
<table id="demo" lay-filter="test"></table>
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,height: 312
,url: 'http://localhost/demo/' //数据接口
,page: true //开启分页
,response: {
statusName: 'code' //规定数据状态的字段名称，默认：code
,statusCode: 200 //规定成功的状态码，默认：0
,msgName: 'msg' //规定状态信息的字段名称，默认：msg
,countName: 'count' //规定数据总数的字段名称，默认：count
,dataName: 'data' //规定数据列表的字段名称，默认：data
}
,cols: [[ //表头
{field: 'id', title: 'ID', width:200, fixed: 'left'}
,{field: 'elo', title: '积分', width: 80, sort: true}
,{field: 'rank', title: '排名', width: 80, sort: true}
]]
});
});
</script>2、后台API(PHP)
<?php
//$res = '{"code":200,"msg":"","count":1,"data":[{"id":"3020550ygjg50","elo":1400,"rank":140000},{"id":"slxsxy","elo":2442,"rank":3000}]}';//Json格式
$uskey=array("3020550ygjg50","9965821b9qi2","109901105kban","544680408","watchzed","jamgeee","2207503swl2it","1128225rbljx3","1289456lsrxlx");
$add = array("id"=>"slxsxy","elo"=>2442,"rank"=>3000);
$udata = array(array("id"=>"slxsxy","elo"=>2442,"rank"=>3000));
$arrlength=count($uskey);
for ($i=0; $i<=$arrlength-1; $i++)
{
$url = 'http://www.5ewin.com/data/player/'. "" .$uskey[$i]; //这儿填页面地址
$info=file_get_contents($url);
preg_match('|<span class="vam ellip name ">(?<grp0>[^ ]+) </span>|i',$info,$usname);//使用到正则表达式（Regex）
//$usname[1]用正则表达式获得的用户名 $elo[1]天梯分
preg_match('|<h3>天梯</h3>[^<]*<span class="val">(?<grp0>[^<]+)</span>|i',$info,$elo);
$add = array("id"=>"$usname[1]","elo"=>$elo[1],"rank"=>3000);
array_push($udata,$add);//添加获取的5E数据到json数组中
}
$res = array("code"=>200,"msg"=>"","count"=>2,"data"=>$udata);
//发送json数据
// $res = array("code"=>200,"msg"=>"","count"=>2,"data"=>array(array("id"=>"3020550ygjg50","elo"=>1400,"rank"=>140000),array("id"=>"slxsxy","elo"=>2442,"rank"=>3000)));
echo json_encode($res);
?>效果图：
下面是些小技巧:
导航条固定在网页顶部：
进入css ，修改
position:fixed;//位置固定
width: 100%;//导航条宽度拉满
z-index:9999;//让导航条处于最顶部
正则表达式傻瓜式生成软件：RegexBuilder
比较好用
相关收藏：
PHP是怎么返回json格式的数据_百度知道 https://zhidao.baidu.com/question/1989067659641541067.html
php中嵌套html代码和html代码中嵌套php方式 – 范仁义 – 博客园
https://www.cnblogs.com/Renyi-Fan/p/9023325.html
PHP 教程 | 菜鸟教程(手册）
https://www.runoob.com/php/php-tutorial.html
正则表达式测试工具 正则表达式自动生成器 标准版 v2.0 中文安装版 下载-脚本之家
https://www.jb51.net/softs/256821.html
在线正则表达式测试
