Layui框架+PHP打造个人简易版网盘系统
网盘系统
大家应该都会注册过致命的一些网盘~如百度云。百科介绍:网盘,又称网络U盘、网络硬盘,是由互联网公司推出的在线存储服务,服务器机房为用户划分一定的磁盘空间,为用户免费或收费提供文件的存储、访问、备份、共享等文件管理等功能,并且拥有高级的世界各地的容灾备份。
我也一直在用网盘。。但是有一个特别让人无语的是你不开他家的会员,就给你限速。那下载速度简直跟乌龟似得~~
周末在家无聊突发奇想~自己用Layui这款前端框架配合PHP做了一个简易版的网盘。后续也有想法继续去更新完善它,大家有什么想法和建议可以在下方留言!
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"/> <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"/> <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!看代码,具体实现的步骤写在注释里了:
<?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标签嵌入到网盘主界面的):
<!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 />'; }
5大体功能展示以及下个版本要完善的功能假想~~
主界面:
下载文件直接点击文件名就可以下载
后面我想添加一个上传图片,类似图床的功能~以及上传视频在线观看~
大家如果有什么好的建议欢迎在下边留言~