生成树菜单查看后台数据的web

最新推荐文章于 2024-06-08 23:29:32 发布

Nassir1995

最新推荐文章于 2024-06-08 23:29:32 发布

阅读量413

点赞数

分类专栏：前端 PHP 文章标签： web js原生 js php tree

本文链接：https://blog.csdn.net/u014231144/article/details/78432374

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

PHP

5 篇文章 0 订阅

订阅专栏

第一个文件index.php用以生成目录树

<?php
/**
 * Created by PhpStorm.
 * User: nassir
 * Date: 2017/11/1
 * Time: 15:07
 * 将服务器中的文件已tree的方式展现在web中，根节点为一个临时路径，第一层为项目，第二层为项目下的平台，第三层为平台中的文件
 * 辅助测试用的一个页面，给测试直接展示机器中的内容
 */

const ROOT = __DIR__ . '/..';
//根目录路径
const TMP_ROOT = ROOT . '/first/second/tmp';

$result = [];
if (is_dir(TMP_ROOT)) {
    $projects = array_diff(scandir(TMP_ROOT), array('..','.'));
    foreach ($projects as $project) {
        $project_dir = TMP_ROOT . '/' . $project;
        $result[$project] = [];
        if (is_dir($project_dir)) {
            $planets = array_diff(scandir($project_dir), array('..','.'));
            foreach ($planets as $planet) {
                $result[$project][$planet] = [];
                $planet_dir = $project_dir . '/' . $planet;
                $files = array_diff(scandir($planet_dir), array('..','.'));
                foreach ($files as $file) {
                    $result[$project][$planet][] = $file;
                }
            }
        }
    }
}
$tmp_json = json_encode($result);
echo "<script>var tmp_root = {$tmp_json}</script>";
php?>

<html>
<head>
    <title>测试结果展示</title>
</head>
<body>
<header id="header" class="">
    <h1>测试结果展示</h1>
</header><!-- /header -->
<div class="container">
    <div class="left">
        <ul id="tmp_node"></ul>
    </div>
    <div class="right">
        <ul id="cdn_node"></ul>
    </div>
</div>
<footer>
</footer>
    <script>
        var tmp = document.getElementById('tmp_node')
        console.log(tmp_root)
    //第一层
        for (var project in tmp_root) {
          var project_li_node = document.createElement("li")
          var project_h_node = document.createElement("h3")
          project_h_node.innerHTML = project
          project_li_node.appendChild(project_h_node)
          var project_node = document.createElement("ul")
      //第二层
          for (var planet in tmp_root[project]) {
            var planet_li_node = document.createElement("li")
            var planet_h_node = document.createElement("h3")
            planet_h_node.innerHTML = planet
            planet_li_node.appendChild(planet_h_node)
            var planet_node = document.createElement("ul")
        //文件
            for (var file in tmp_root[project][planet]) {
              var file_li_node = document.createElement("li")
              var a_node = document.createElement("a")
              a_node.setAttribute('href', 'http://result.test.com:8077/test.php?' + project + '&' + planet + '&' + tmp_root[project][planet][file])
              a_node.innerHTML = tmp_root[project][planet][file]
              file_li_node.appendChild(a_node)
              planet_node.appendChild(file_li_node)
            }
            planet_li_node.appendChild(planet_node)
            project_node.appendChild(planet_li_node)
          }
          project_li_node.appendChild(project_node)
          tmp.appendChild(project_li_node)
        }
    </script>
</body>
</html>

第二个文件test.php用以展示文件内容

<?php
/**
 * Created by PhpStorm.
 * User: nassir
 * Date: 2017/11/1
 * Time: 15:07
 */

const GAEA_ROOT = __DIR__ . '/..';
const TMP_ROOT = GAEA_ROOT . '/server/ConfigCenter/tmp';

$dir = explode('&', $_SERVER['QUERY_STRING']);

$content = file_get_contents(TMP_ROOT . '/' . $dir[0] . '/' . $dir[1] . '/' . $dir[2]);

echo '内容：' . '<br>';
echo $content . '<br>' . '<br>';

echo 'md5值' . '<br>';
echo md5($content);

$name = explode('.', $dir[2]);
$cdn_name = $name[0] . '_' . md5($content). '.' . $name[1];

$wai = 'https://guowai.net/cdn/' . $dir[0] . '/platform/' . $dir[1] . '/config/' . $cdn_name;
$nei = 'https://guonei.net/cdn/' . $dir[0] . '/platform/' . $dir[1] . '/config/' . $cdn_name;

echo "<script>var wai = '" . $wai . "'</script>";
echo "<script>var nei = '" .$nei ."'</script>";
php?>

<html>
<head>
    <title>测试结果展示</title>
</head>
<body>
<header id="header" class="">
</header><!-- /header -->
<div>
    <div id="wai"></div>
    <div id="nei"></div>
</div>
<footer>

</footer>
<script>
    var con = document.getElementById('wai')
    var a_node = document.createElement("a")
    a_node.setAttribute('href', wai)
    a_node.innerHTML = '国外cdn验证'
    con.appendChild(a_node)
    con1 = document.getElementById('nei')
    a1_node = document.createElement("a")
    a1_node.setAttribute('href', nei)
    a1_node.innerHTML = '国内cdn验证'
    con1.appendChild(a1_node)
</script>
</body>
</html>

这里使用原生js处理后台给出的目录信息，当然也可以用框架解决，那样又快又好

Nassir1995

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
生成树菜单查看后台数据的web

第一个文件index.php用以生成目录树<?php/** * Created by PhpStorm. * User: nassir * Date: 2017/11/1 * Time: 15:07 * 将服务器中的文件已tree的方式展现在web中，根节点为一个临时路径，第一层为项目，第二层为项目下的平台，第三层为平台中的文件 * 辅助测试用的一个页面，给测试直接展示机器中的内容
复制链接

扫一扫

专栏目录