本帖最后由 香谢枫林 于 2020-5-9 11:58 编辑
美图网站千千万，吾赏美图自己说了算！
网站的页面不多，共计5个：首页、图集列表、收藏列表、套图展示（方式一）、套图展示（方式二），今天讲讲总体框架和首页设计。
总体框架：
数据库：MySQL
后台：PHP
前端：HTML+CSS+JavaScript（为图省事，页面样式用的bootstrap：https://v3.bootcss.com/）
总体框架：
总体框架
数据库连接、数据库类、全局设置我都做到文件里封装了，这样引用一下文件就可以连数据库、使用相应的参数了。
全局变量设置：
数据库类：
数据库类
全局变量作用：
1、连接数据库，引用一次即可连接数据库，省去很多代码（include('global.php');）
2、提供全局变量，方便修改参数，例如：拼接图片URL的地址头部
3、控制网站版本，之前遇到一个问题，就是网站更新后，浏览器打开还是旧文件，后来查询发现是js文件缓存问题，通过设置JS版本号来让客户端重新获取网站文件
控制网站版本方法(给js加版本号)：
[PHP] 纯文本查看 复制代码 <script src="js/index.js?v=<?php echo($_Version_); ?>"></script>
进入正题：网站首页
首页
首页主要分3块：左上角显示图集列表，中间显示图片信息，右上方功能按钮区。
左上角功能区很好做，做个select控件，用PHP输出总表信息即可，这里要2个字段，tablename（用于js查询）和BeautyName（用于显示）。
[PHP] 纯文本查看 复制代码 function groupoption($db){
$query = $db->query("select * from pc_dic_lanvshen order by BeautyID");
while($row=$db->fetch_array($query)){
echo("<option value='".$row['TableName']."'>".$row['BeautyName']."</option>");
}
}
<select name="imagetype" id="imagetype">
<?php groupoption($db); ?>
</select>
中间图片显示比较简单，两个插件：label（显示图片信息）和img（显示图片）
[Asm] 纯文本查看 复制代码 <label id="lb" name="lb"></label>
<img id="img" name="img" height="650px" align="center" unselectable="on" style="-moz-user-select:none;" src="images/aa.jpg">
右上方功能按钮区是重点：
首先要用js设计一个图片显示函数，接收imageid显示相应的图片信息，机制是：通过AJAX给PHP后台传tablename和imageid两个值，PHP接收后读取数据库对应的图片信息返回给JS显示
注意：img控件要写入imageid，方便js读取使用
[JavaScript] 纯文本查看 复制代码 //显示图片函数
function AimgView(imageid){
$.getJSON("server.php",{pagetype:1,tablename:tablename,imageid:imageid,sid:Math.random()},function(json){
$("#img").attr("src",json.imagepath);
$("#img").attr("value",json.imageid);
$("#lb").html("ID:"+ "<a href='"+ json.imagepath +"' target='_blank'>" + json.imageid + "</a>" +" Folder：<span style='color:blue' id='sp_flodername'>" + json.flodername + "</span>" + " Girl：<span style='color:fuchsia'>" + json.jpnname + "</span> "+" Picture：<span style='color:red'>" + json.imagename + "</span> "+" Count：<span style='color:blue'>" + json.num + "/" + json.icount + "</span> ");
});
}
功能1：上一张和下一张
思路：读取img的imageid值，++或者--运算，然后调用AimgView（imageid）即可
功能2：随机所有图集中的一张图片
思路：该功能主要在PHP后台，JS通过AJAX调用后台服务（后台先随机选择总表一个值，然后找到对应的美图表，再随机选择一个值），返回一个新的imageid，同时用imagetype值更新select控件内容，然后调用AimgView（imageid）即可
后台PHP代码：
[PHP] 纯文本查看 复制代码 $arr = iRandomNum($db,$imagetype);
echo json_encode($arr);
function iRandomNum($db,$imagetype)
{ //创造随机数
if ($imagetype == "美图合集") {
$query = $db->query("select max(BeautyID) from pc_dic_lanvshen");
$row = $db->fetch_array($query);
$iMaxID = $row[0];
$irandid = rand(1,$iMaxID);
$query = $db->query("select * from pc_dic_lanvshen where BeautyID = $irandid");
$row = $db->fetch_array($query);
$imagetype = $row["BeautyName"];
$tablename = $row["TableName"];
$iMaxID = $row["MaxID"];
$randnum = rand(1,$iMaxID);
} else {
$query = $db->query("select * from pc_dic_lanvshen where BeautyName= '$imagetype'");
$row = $db->fetch_array($query);
$imagetype = $row["BeautyName"];
$tablename = $row["TableName"];
$MaxID = $row["MaxID"];
$randnum = rand(1,$MaxID);
}
return array("tablename"=>$tablename,"imageid"=>$randnum,"imagetype"=>$imagetype);
}
前端JS代码：
[JavaScript] 纯文本查看 复制代码 //随机ALL
function pic_random_all() {
$.getJSON("server.php",{imagetype:"美图合集",pagetype:3,sid:Math.random()},function(json){
random_sequence(json.imageid,json.imagetype);
$("#imagetype option:contains('"+json.imagetype+"')").prop("selected", true);
AimgView(json.imageid);
});
}
功能3：随机所选图集中的一张图片
思路：JS获取select控件里的tablename，然后传给PHP后台（后台在该tablename里随机选择一个值），返回新的imageid，
主要在PHP后台，JS通过AJAX调用后台服务（后台先随机选择总表一个值，然后找到对应的美图表，再随机选择一个值），返回一个新的imageid，然后调用AimgView（imageid）即可
功能4：往回翻查随机历史
思路：JS利用堆栈，在随机操作时，把tablename（或者beautyname）和imageid压入堆栈，用时pop出来即可。
注：tablename和imageid两个参数才可以定位一张图片；如果随机结束立刻翻查是看不到效果的，因为最后一张就是当前图片，再次翻查才能看到效果。
[Asm] 纯文本查看 复制代码 //记录随机显示的图片序列
function random_sequence(objid,objtype) {
item_random.shift();
item_random.shift();
}
//往回翻查记录
item_imageid = item_random.pop();
item_imagetype = item_random.pop();
$("#imagetype option:contains('"+item_imagetype+"')").prop("selected", true);
imagetype = $("#imagetype option:selected").text();
tablename = $("#imagetype option:selected").val();
AimgView(item_imageid);
功能5：收藏图片
思路：JS获取图片的imageid和tablename，传给PHP后台（后台查找对应的图片信息，存入收藏表即可）
功能6：自动上一张、自动下一张、自动随机
思路：JS用setInterval()函数定期执行即可
例如：每隔1.3s自动随机一张图片
注意：使用setInterval()函数要配合clearInterval()成对使用成对，否则会不易控制
[JavaScript] 纯文本查看 复制代码 timers = setInterval(function () {
pic_random();
},1300);
功能7：至于列表（跳转到收藏列表显示页面）、套图（跳转到显示图片所在套图的所有图片）、套图集（显示图片所在套图的所有图片）、索引（跳转到套图集列表），都是页面跳转，传参即可
注：套图和套图集跳转到2个页面，显示图片的方式不同
PHP和JS参数问题：地址传参遇到"#$ ^ & * + ="特殊符号，接收时会出问题，因此需要编码传输，经过本人查询测试，找到了PHP和JS编解码比较一致的方式
PHP：地址传参编码rawurlencode($flodername)
PHP：地址接收时无需解码$flodername = $_GET['flodername’];
JS：地址传参编码encodeURIComponent($flodername)
PHP：地址接收时解码decodeURIComponent($flodername)
因为JS没有PHP直接get地址参数的方法，所以要自己写一个：
[JavaScript] 纯文本查看 复制代码 var Request = new Object();
Request = GetRequest();
tablename = Request["tablename"];
flodername = Request["flodername"];
//获取并解析URL地址中的参数
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=decodeURIComponent(strs[i].split("=")[1]);
}
}
return theRequest;
}
首页功能至此完成！
待我用户组晋级到前途无量时，我会将网站搭建到云服务器上共享给大家测试！
待我用户组晋级到出类拔萃时，我会开源整个网站代码！
上一篇：数据库设计篇
下一篇：网站页面设计（二） | 
发表于 2020-5-4 16:17
