[PHP]自己搭建原型站（网站加密码 + 子文件夹导航）

由于git、svn之类的版本管理工具，更适合代码管理，而在原型设计阶段，由于需求和开发过程中的反馈问题，会导致原型依旧需要对历史的版本进行跟踪和留存，自己搭建一个多版本管理的简易平台，会比Axure云更方便更安全。

一、整体的需求

需要避免爬虫爬取，对首页内容进行加密
需要自动展示各个软件版本以及各个软件版本包含的功能点
需要留存和展示各个功能点原型的多个版本
需要展示各个版本的更新时间

二、解决方式

使用首页加密的方式，但对分享的链接可以直接访问，即避免了爬虫和搜索引擎的收录，有可以把链接粘贴至coding、禅道之类的管理系统中方便查看和沟通。
Axure的页面在生成时，按照软件版本/功能点/原型版本的路径去存
在首页，去遍历下一级的文件夹名称-生成版本列表，遍历下下一级的文件夹名称-生成每个版本包含的功能点列表，遍历每个版本下的所有文件修改时间-生成更新时间
在首页点击版本文件夹，可以进入版本详情，版本详情中包含各功能点名称及更新时间。
点击功能点，可以查看该功能的各版本原型，点击各版本原型可查看。

三、使用PHP对首页加密

将以下代码保存成一个php文件，并在首页的php中引用他。

<?php

/********************************************
* 使用方法:
*
* 1、将本段代码保存为 MkEncrypt.php
*
* 2、在要加密的页面前面引入这个 php 文件
* require_once('MkEncrypt.php');
*
* 3、设置页面访问密码
* MkEncrypt('页面密码');
*
********************************************/

// 密码 Cookie 加密盐
if(!defined('MK_ENCRYPT_SALT'))
define('MK_ENCRYPT_SALT', 'Kgs$JC!V');

/**
* 设置访问密码
*
* @param $password 访问密码
* @param $pageid 页面唯一 ID 值，用于区分同一网站的不同加密页面
*/
function MkEncrypt($password, $pageid = 'default') {
$pageid = md5($pageid);
$md5pw = md5(md5($password).MK_ENCRYPT_SALT);
$postpwd = isset($_POST['pagepwd']) ? addslashes(trim($_POST['pagepwd'])) : '';
$cookiepwd = isset($_COOKIE['mk_encrypt_'.$pageid]) ? addslashes(trim($_COOKIE['mk_encrypt_'.$pageid])) : '';

if($cookiepwd == $md5pw) return; // Cookie密码验证正确

if($postpwd == $password) { // 提交的密码正确
setcookie('mk_encrypt_' . $pageid, $md5pw, time() + 3600000, '/');
return;
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="author" content="mengkun">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>该页面已被加密</title>
<style type="text/css">
*{font-family:"Microsoft Yahei",微软雅黑,"Helvetica Neue",Helvetica,"Hiragino Sans GB","WenQuanYi Micro Hei",sans-serif;box-sizing:border-box;margin:0px;padding:0px;font-size:14px;-webkit-transition:.2s;-moz-transition:.2s;-ms-transition:.2s;-o-transition:.2s;transition:.2s}
html,body{width:100%;height:100%}
body{background-color:#F4F6F9;color:#768093}
input,button{font-size:1em;border-radius:3px;-webkit-appearance:none}
input{width:100%;padding:5px;box-sizing:border-box;border:1px solid #e5e9ef;background-color:#f4f5f7;resize:vertical}
input:focus{background-color:#fff;outline:none}
button{border:0;background:#6abd09;color:#fff;cursor:pointer;opacity:1;user-select:none}
button:hover,button:focus{opacity:.9}
button:active{opacity:1}
.main{width:100%;max-width:500px;height:300px;padding:30px;background-color:#fff;border-radius:2px;box-shadow:0 10px 60px 0 rgba(29,29,31,0.09);transition:all .12s ease-out;position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;text-align:center}
.alert{width:80px}
.mk-side-form{margin-bottom:28px}
.mk-side-form input{float:left;padding:2px 10px;width:77%;height:37px;border:1px solid #ebebeb;border-right-color:transparent;border-radius:2px 0 0 2px;line-height:37px}
.mk-side-form button{position:relative;overflow:visible;width:23%;height:37px;border-radius:0 2px 2px 0;text-transform:uppercase}
.pw-tip{font-weight:normal;font-size:26px;text-align:center;margin:25px auto}
#pw-error {color: red;margin-top: 15px;margin-bottom: -20px;}
.return-home{text-decoration:none;color:#b1b1b1;font-size:16px}
.return-home:hover{color:#1E9FFF;letter-spacing:5px}
</style>
</head>
<body>
<div class="main">
<svg class="alert" viewBox="0 0 1084 1024" xmlns="http://www.w3.org/2000/svg" width="80" height="80">
<defs><style/></defs>
<path d="M1060.744 895.036L590.547 80.656a55.959 55.959 0 0 0-96.919 0L22.588 896.662a55.959 55.959 0 0 0 48.43 83.907h942.14a55.959 55.959 0 0 0 47.525-85.534zm-470.619-85.172a48.008 48.008 0 1 1-96.015 0v-1.567a48.008 48.008 0 1 1 96.015 0v1.567zm0-175.345a48.008 48.008 0 1 1-96.015 0V379.362a48.008 48.008 0 1 1 96.015 0v255.157z" fill="#FF9800"/>
</svg>

<form action="" method="post" class="mk-side-form">
<h2 class="pw-tip">该页面已被加密</h2>
<input type="password" name="pagepwd" placeholder="请输入访问密码查看" required><button type="submit">提交</button>
<?php if($postpwd): ?>
<p id="pw-error">Oops!密码不对哦~</p>
<script>setTimeout(function() {document.getElementById("pw-error").style.display = "none"}, 2000);</script>
<?php endif; ?>
</form>
<a href="/" class="return-home" title="点击回到网站首页">- 返回首页 - </a>
</div>
</body>
</html>
<?php
exit();
}

需要加密的首页php可以参照代码中的require once 和 MkEncrypt这两步，增加两行。

三、遍历文件夹并生成指向链接

核心的实现方法就是遍历下一级的文件夹，将文件夹名称显示在第一列，并生成针对该文件夹的路径；

当是文件夹时，则使用该文件夹的路径对下一级进行遍历，当下一级遍历的时是文件夹时，使用“|”符号连接所有的下级文件夹名称，作为版本内容；

对指定文件夹遍历所有的文件修改时间，取最新的时间，作为版本修改时间。


<?php
function getLatestModifiedTime($folderName) {
$latestModifiedTime = 0;
$iterator = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($folderName));
foreach ($iterator as $fileInfo) {
if ($fileInfo->isFile()) {
$modifiedTime = $fileInfo->getMTime();
if ($modifiedTime > $latestModifiedTime) {
$latestModifiedTime = $modifiedTime;
}
}
}
return $latestModifiedTime;
}
echo "
<style>
.button1 {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 16px 32px;
text-align: center;
background-color: #4CAF50;
color: white;
border: 2px solid #4CAF50;
border-radius:5px;
}
.button1:hover {
cursor: pointer;
}
</style>
<div align=center>
<br>
<a href='https://docs.qq.com/sheet/DWXdGc1VLQkladExK?tab=BB08J2'><button class='button1'>需求快速登记表（20230921之后）</button></a>
<br><br>
<hr />
<br>
<table border=1 width=1100 >
<tr>
<td width=200 >版本</td>
<td width=700 >包含内容</td>
<td width=200 >最后更新时间</td>
</tr>";
$dir = dirname(__FILE__);
$folders = array_filter(glob($dir . '/*'), 'is_dir');
foreach ($folders as $folder) {
$folderName = basename($folder);
$latestModifiedTime = getLatestModifiedTime($folderName);
echo "<tr><td><a href='$folderName'>$folderName</a></td><td>" ;
$filesAndDirs = scandir($folderName);
foreach ($filesAndDirs as $name) {
if (is_dir($folderName . '/' . $name)) {
if($name <> "." and $name <> ".."){
echo $name . "|";
}}
}
echo "</td><td>" . date('Y-m-d', $latestModifiedTime). "</td></tr>";
}
echo "</table></div>"
?>

由于下一级为各个版本包含的功能点，因此在进入版本文件夹时，展示各个功能点即可，不需要再对下一级的各功能点的原型修改版本进行整合，因此下一级的php代码可以这么写。


<?php

function getLatestModifiedTime($folderName) {
$latestModifiedTime = 0;
$iterator = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($folderName));
foreach ($iterator as $fileInfo) {
if ($fileInfo->isFile()) {
$modifiedTime = $fileInfo->getMTime();
if ($modifiedTime > $latestModifiedTime) {
$latestModifiedTime = $modifiedTime;
}
}
}
return $latestModifiedTime;
}
echo "<div align=center>
<table border=1 width=800 >
<tr>
<td width=600 >内容</td>
<td width=200 >最后更新时间</td>
</tr>";

$dir = dirname(__FILE__);
$folders = array_filter(glob($dir . '/*'), 'is_dir');
foreach ($folders as $folder) {
$folderName = basename($folder);
$latestModifiedTime = getLatestModifiedTime($folderName);
echo "<tr><td><a href='$folderName'>$folderName</a></td>";
echo "<td>" .date('Y-m-d', $latestModifiedTime). "</td></tr>";
}

echo "</table></div>"
?>

而再下一级，由于只有各个功能点的原型更改记录（通常我会将这一级的页面作为原型页面给到开发），因此不需要更多信息，可以用很简单的遍历文件夹，把名字和路径echo出来就可以。


<?php
$dir = dirname(__FILE__);
$folders = array_filter(glob($dir . '/*'), 'is_dir');
foreach ($folders as $folder) {
$folderName = basename($folder);
echo "<a href='$folderName'>$folderName</a><br>";
}
?>