Layui框架+PHP打造我的簡易版網盤系統

時間 2019-11-21

標籤 layui 框架 php 打造我的簡易網盤系統欄目 PHP 简体版

原文原文鏈接

網盤系統javascript

你們應該都會註冊過致命的一些網盤~如百度雲。百科介紹：網盤，又稱網絡U盤、網絡硬盤，是由互聯網公司推出的在線存儲服務，服務器機房爲用戶劃分必定的磁盤空間，爲用戶免費或收費提供文件的存儲、訪問、備份、共享等文件管理等功能，而且擁有高級的世界各地的容災備份。php

我也一直在用網盤。。可是有一個特別讓人無語的是你不開他家的會員，就給你限速。那下載速度簡直跟烏龜似得~~css

週末在家無聊突發奇想~本身用Layui這款前端框架配合PHP作了一個簡易版的網盤。後續也有想法繼續去更新完善它，你們有什麼想法和建議能夠在下方留言！html

1

登陸註冊頁

登陸註冊頁不是今天的重點，直接貼上我以前作過的頁面代碼，以前使用bootstrap作的懶得再作新的了直接拿過來用~~

登陸：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>用戶登陸</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        <style type="text/css">
            body{
                margin: 0px;
                padding: 0px;
                background-color: #CCCCCC;
            }
            .panel{
                width: 380px;
                height: 280px;
                position: absolute;
                left: 50%;
                margin-left: -190px;
                top: 50%;
                margin-top: -140px;
            }
            .form-horizontal{
                padding: 10px 20px;
            }
            .btns{
                display: flex;
                justify-content: center;
            }
        </style>
    </head>
    
    
    <body>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">用戶登陸</div>
            </div>
            <div class="panel-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label>用戶名</label>
                        <input type="text" class="form-control" name="userName"/>
                    </div>
                    <div class="form-group">
                        <label>密碼</label>
                        <input type="password" class="form-control" name="pwd"/>
                    </div>
                    
                    <div class="form-group btns">
                        <input type="button" class="btn btn-primary" value="登陸系統" id="submit"/>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a type="button" class="btn btn-success" href="reg.php"/>註冊帳號</a>
                    </div>
                    
                </form>
            </div>
        </div>
    </body>
    
    <script src="js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#submit").click(function(){
                var str = $("form").serialize();
                $.post("admin/doLogin.php",{"user":str},function(data){
                    if (data=="true") {
                        alert("登陸成功");
                        location = "index.html?loginUser="+$("input[name='userName']").val();
                    }else{
                        alert("登陸失敗");
                    }
                });
            });
        });
    </script>
</html>

<?php 
header ( "Content-Type:text/html;charset = utf-8");
    // username=lisi&pwd=123
    //處理登陸信息
    list($username,$pwd) = explode("&", $_POST["user"]);
    list(,$username) = explode("=", $username);
    list(,$pwd) = explode("=", $pwd);
    $str = file_get_contents("user.txt");
    
    //將每一個人的信息分開，並存入數組
    $user = explode("<=>", $str);
    
    // 驗證登陸信息
    foreach ($user as $user) {
        // 遍歷數組，將每一個人的信息，進行分割，並進行對比
        list($realName,$realPwd) = explode("&",$user);
        list(,$realName) = explode("=", $realName);
        list(,$realPwd) = explode("=", $realPwd);
        //驗證
        if($username == $realName && $pwd == $realPwd)
            die("true");
    }
    die("false");

註冊：前端

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>用戶註冊</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        <style type="text/css">
            body{
                margin: 0px;
                padding: 0px;
                background-color: #CCCCCC;
            }
            .panel{
                width: 380px;
                height: 350px;
                position: absolute;
                left: 50%;
                margin-left: -190px;
                top: 50%;
                margin-top: -175px;
            }
            .form-horizontal{
                padding: 10px 20px;
            }
            .btns{
                display: flex;
                justify-content: center;
            }
        </style>
    </head>
    
    
    <body>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">用戶註冊</div>
            </div>
            <div class="panel-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label>用戶名</label>
                        <input type="text" class="form-control" name="userName"/>
                    </div>
                    <div class="form-group">
                        <label>密碼</label>
                        <input type="password" class="form-control" name="pwd" />
                    </div>
                    <div class="form-group">
                        <label>確認密碼</label>
                        <input type="password" class="form-control" name="rePwd" />
                    </div>
                    
                    <div class="form-group btns">
                        <input type="button" class="btn btn-primary" value="肯定註冊" id="submit"/>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a type="button" class="btn btn-success" href="login.php"/>返回登陸</a>
                    </div>
                    
                </form>
            </div>
        </div>
    </body>
    
    <script src="js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#submit").on("click",function(){
                var str = $("form").serialize();
                console.log(str);
                $.post("admin/doReg.php",{"user":str},function(data){
                    if(data=="true"){
                        alert("註冊成功！即將跳轉登錄頁！");
                        location = "login.php";
                    }else{
                        alert("註冊失敗！由於啥我不知道！");
                    }
                });
            });
        });
    </script>
</html>

<?php 
    header ( "Content-Type:text/html;charset = utf-8");
    
    $user = $_POST["user"]."<=>";
    
    $num = file_put_contents("user.txt", $user,FILE_APPEND);
    
    if($num>0) echo "true";
    else echo "false";

2

網盤主界面佈局

比較匆忙~網盤界面比較簡陋~~~用的Layui作的。layUI在作後臺項目上感受要比bootstrap要好一些的~

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>XX網盤</title>
  <link rel="stylesheet" href="css/layui.css">
  <style type="text/css">
            iframe{
                display: block;
                width: 100%;
                height: 500px;
                border: hidden;
                margin: 0px auto;
                position: absolute;
            }
        </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">XX雲盤</div>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;" class="text1">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          
        </a>
      </li>
      <li class="layui-nav-item"><a href="login.php">退出</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左側導航區域（可配合layui已有的垂直導航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">文件上傳</a>
          <dl class="layui-nav-child">
            <dd><a href="">上傳文件</a></dd>
            <dd><a onclick="func('http://www.baidu.com')">上傳圖片</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body" style="background-color: #F7F8F9;">
    <!-- 內容主體區域 -->
    <div style="padding: 15px;background-color: #F7F8F9;">
            <iframe  scrolling="no" src="html/uploadFile.html" scrd id="iframe"></iframe>
    </div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定區域 -->
    © layui.com - 底部固定區域
  </div>
</div>
<script src="js/layui.js"></script>
<script src="js/jquery-3.1.1.js"></script>
<script>
//JavaScript代碼區域
layui.use('element', function(){
  var element = layui.element;
  
});
</script>
<script type="text/javascript">
        function func(url){
            document.getElementById("iframe").src = url;
        }
</script>
</body>
</html>

2

上傳

重點功能來了~~

文件上傳是靠PHP來實現的。我在的時候特別注意了能夠多文件上傳：能夠Ctrl多個文件選擇

OK！看代碼，具體實現的步驟寫在註釋裏了：java

<?php

    header("Content-Type:text/html;charset=utf-8");
    $count = count($_FILES["file"]["name"]);
    for($i=0; $i<$count; $i++){
        // 取到文件名，並用.分割爲數組
        $arr = explode(".", $_FILES['file']['name'][$i]);
        // 取到數組最後一個即爲後綴名
        $type = $arr[count($arr)-1];
        // 使用原文件名+當前時間+隨機數，生成新文件名
        $fileName = $arr[0].date("YmdHis").rand(100, 999).".".$type;
        $fileName = iconv("UTF-8", "GBK", $fileName);
        // 檢測文件是否爲合法上傳文件
        if(!is_uploaded_file($_FILES['file']['tmp_name'][$i])){
            echo("文件【{$_FILES['file']['name'][$i]}】不是合法上傳文件！<br>");
            continue;
        }
        // 將臨時文件，移動到指定文件夾下
        $isOk = move_uploaded_file($_FILES['file']['tmp_name'][$i], "../upload/{$fileName}");
        if(!$isOk){
            echo("文件【{$_FILES['file']['name'][$i]}】上傳失敗！<br>");
            continue;
        }
        //echo "文件【{$_FILES['file']['name'][$i]}】上傳成功！<br>";
        echo "<script type='text/javascript'>alert('文件【{$_FILES['file']['name'][$i]}】上傳成功！');</script>";
        echo "<script type='text/javascript'> window.location.assign('../html/uploadFile.html')</script>";
    }

如下是HTML代碼：（我是將代碼用ifarm標籤嵌入到網盤主界面的）：jquery

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/layui.css"/>
        <style type="text/css">
            iframe{
                display: block;
                width: 80%;
                height: 300px;
                border: hidden;
                margin: 0px auto;
                position: absolute;
            }
            body{
                background-color: #F7F8F9;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>請選擇上傳到服務器的文件</h1>
            <form action="../admin/doUpload.php" method="post" enctype="multipart/form-data">
                <input type="file" name="file[]" multiple="multiple" />            
                <input type="submit" value="點擊上傳"     class="layui-btn layui-btn-normal"/>            
            </form>
        </div>
        <iframe  scrolling="no" src="../admin/file.php" scrd id="iframe1"></iframe>
    </body>
</html>

3

顯示文件列表

文件上傳後，在網盤主界面顯示上傳文件的列表，如下是代碼：

<?php

    header("Content-Type:text/html;charset=utf-8");
    /*讀取一個文件目錄，並將目錄中的文件夾和文件分類羅列；*/
    $dir = "../upload";
    $dir = iconv("UTF-8", "GBK", $dir);
    $res = opendir($dir);
    $files = [];
    $dirs = [];
    while($f = readdir($res)){
        if($f=="." || $f=="..") continue;
        $f = iconv("GBK", "UTF-8", $f);
        $f1 = iconv("UTF-8", "GBK", $dir."/".$f);
        if(is_file($f1)){
            $files[] = $f;
        }elseif(is_dir($f1)){
            $dirs[] = $f;
        }
    }
    
    echo "<h2>全部文件：</h2>";
    echo "<hr />";
    foreach ($files as $key => $value) {
        echo '<a href="process.php?filename=' . $value . '">' . $value . '</a>';
        echo '<br />';
    }