私人网盘系统2.0—全部升级为layUI+PHP(持续更新中)

最新推荐文章于 2025-06-20 16:28:08 发布

weixin_30314631

最新推荐文章于 2025-06-20 16:28:08 发布

阅读量229

点赞数

CC 4.0 BY-SA版权

文章标签： javascript php json ViewUI

原文链接：http://www.cnblogs.com/sunlizheng/p/7860365.html

本次升级新增图片上传功能，优化登录与注册界面，并改进系统美观度。使用layUI框架提升用户体验，修复部分bug。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网盘系统2.0

上周，我做了第一版的“私人网盘系统”，http://www.cnblogs.com/sunlizheng/p/7822036.html 没看过的朋友可以去看一下，这周在家升级做了第二版，算是升级版，相比较第一版增加了图片上传功能，以及美观度的改变，和一些小bug的修复，也感谢上次有几个朋友在评论里留言提的意见，也欢迎朋友们，对这次的更新提出宝贵的意见，下次继续更新~~~废话不多说来吧~~~ 末尾附仓库地址~

1

登录页面

上周因为第一版偷懒直接用以前用bootstrap写的一个登录注册页，加上layUI有点臃肿。这次全线换成了layUI，并且在以后的更新版本中，应该都是他了，layUI这款国产的框架还是不错的安利一下。来~上代码：

① 登录页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>用户登录</title>
        <link rel="stylesheet" type="text/css" href="css/layui.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;
                border: 1px solid #009688;
                background-color: white;
            }
            .body{
                margin-top: 7%;
            }
            .btns{
                display: flex;
                justify-content: center;
            }
        </style>
    </head>
    
    
    <body>
        <div class="panel panel-primary">
            <div class="layui-nav" style="height: 38px;">
                <div class="layui-nav-item" style="line-height: 38px;font-weight: bold;">XX网盘登录</div>
            </div>
            <div class="body">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="font-weight: bold;">用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="userName" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="font-weight: bold;">密码框</label>
                        <div class="layui-input-inline">
                            <input type="password" name="pwd" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    
                    <div class="form-group btns">
                        <input type="button" class="layui-btn" value="登录系统" id="submit"/>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a type="button" class="layui-btn" href="reg.php"/>注册账号</a>
                    </div>
                    
                </form>
            </div>
        </div>
    </body>
    
    <script src="js/jquery-3.1.1.js"></script>
    <script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            $("#submit").click(function(){
                var str = $("form").serialize();
                $.post("admin/doLogin.php",{"user":str},function(data){
                    if (data=="true") {
                        layer.alert('登录成功', {icon: 6});
                        location = "index.html?loginUser="+$("input[name='userName']").val();
                    }else{
                        layer.alert('登录失败', {icon: 5});
                    }
                });
            });
        });
    </script>
</html>

② 注册页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>用户注册</title>
        <link rel="stylesheet" type="text/css" href="css/layui.css"/>
        <style type="text/css">
            body{
                margin: 0px;
                padding: 0px;
                background-color: #CCCCCC;
            }
            .panel{
                width: 380px;
                height: 300px;
                position: absolute;
                left: 50%;
                margin-left: -190px;
                top: 50%;
                margin-top: -140px;
                border: 1px solid #009688;
                background-color: white;
            }
            .body{
                margin: 7%;
            }
            .btns{
                display: flex;
                justify-content: center;
            }
        </style>
    </head>
    
    
    <body>
        <div class="panel">
            <div class="layui-nav" style="height: 38px;">
                <div class="layui-nav-item" style="line-height: 38px;font-weight: bold;">XX网盘注册</div>
            </div>
            <div class="body">
                <form class="form-horizontal">
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="font-weight: bold;">用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="userName" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="font-weight: bold;">密码</label>
                        <div class="layui-input-inline">
                            <input type="password" name="pwd" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="font-weight: bold;">确认密码</label>
                        <div class="layui-input-inline">
                            <input type="password" name="rePwd" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    
                    <div class="form-group btns">
                        <input type="button" class="layui-btn" value="确定注册" id="submit"/>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a type="button" class="layui-btn" 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>

2

系统主页

这次增加了图片上传功能，并在一些按钮之类的样式上做了优化。代码结构可能有些乱。。。见谅赶时间，这些将在之后的更新慢慢优化：

界面还是有些简陋~之后会参考别家的慢慢丰富起来

<!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: 800px;
                border: hidden;
                margin: 0px auto;
                position: absolute;
            }
            #tq{
                margin-top: 80%;
            }
        </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">XX云盘</div>
        <div id="tp-weather-widget" style="margin-left: 80%;"></div>
        <script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";
P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
        <script>tpwidget("init", {
            "flavor": "slim",
            "location": "WX4FBXXFKE4F",
            "geolocation": "enabled",
            "language": "zh-chs",
            "unit": "c",
            "theme": "chameleon",
            "container": "tp-weather-widget",
            "bubble": "enabled",
            "alarmType": "badge",
            "color": "#FFFFFF",
            "uid": "UF9C2BBF12",
            "hash": "49c8449e4fc27579254374169cfee385"
        });
        tpwidget("show");</script>
    <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"><span onclick="quit()">退出</span></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 style="cursor: pointer;" onclick="func('html/upLoadImg.php')">上传图片</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body" style="background-color: #F7F8F9;">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;background-color: #F7F8F9;">
            <iframe  scrolling="yes" src="html/uploadFile.html" scrd id="iframe"></iframe>
    </div>
  </div>
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © XX网盘
  </div>
</div>
<script src="js/layui.js"></script>
<script src="js/layer.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;
        }
        function quit(){
            layer.alert('见到你真的很高兴', {icon: 6});
            location.replace("login.php");
        }
</script>
</body>
</html>

3

上传图片功能

上传文件的PHP与HTML文件只是更改了一下css样式，大家可以看一下我上周发布的文章，这次我们只来看一下图片如何上传显示：

这是他的基础样式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/layui.css"/>
        <style type="text/css">
            .file {
                position: relative;
                display: inline-block;
                overflow: hidden;
                text-decoration: none;
            }
            .file input {
                position: absolute;
                font-size: 50px;
                right: 0;
                top: 0;
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <form action="../admin/doAddImg.php" method="post" enctype="multipart/form-data">
            <a href="javascript:;" class="layui-btn layui-btn-big layui-btn-radius layui-btn-normal file">选择文件
                <input type="file" name="img[]" multiple="multiple" accept="image/*" />
            </a>
            <input type="hidden" name="userName" />
            <input type="hidden" name="time" />
            <input type="button" value="上传图片" id="btn" class="layui-btn layui-btn-big layui-btn-radius layui-btn-normal"/>
            
        </form>
        <br />
        <div id="liuyanban"></div>
        
        
        
        
        
        <script type="text/javascript" src="../js/jquery-3.1.1.js" ></script>
        <script type="text/javascript">
            var loginUser = '<?php echo isset($_GET["loginUser"])?$_GET["loginUser"]:"null";?>';
            if(loginUser=="null"){}
            getData();
            $("#div1 span").text(loginUser);
            
            $("#btn").click(function(){
                if(!$("input[type='file']").val()){
                    alert("图片至少上传一张");
                    return false;
                }
                $("input[name='userName']").val(loginUser);
                $("input[name='time']").val(getTime());
                $("form").submit();
            });
            
            
            function getData(){
                $.post("../admin/doShowImg.php",function(data){
                    var arr = data.split("<=>");
                    arr.pop();
                    for(var i=0; i<arr.length; i++){
                        var img = JSON.parse(arr[i]);
                        console.log(img);
                        var html = "<br/><div>发布时间："+img.time+"<br><br>";
                        for(var j=0; j<img.imgArr.length; j++){
                            html += "<img style='height:100px; ' src='"+img.imgArr[j]+"'/>&nbsp;&nbsp;&nbsp;";
                        }
                        html += "</div><br><hr>";
                        $("#liuyanban").prepend(html);
                    }
                });
            }
            
            function getTime(){
                var dates = new Date();
                var year = dates.getFullYear();
                var month = dates.getMonth();
                var date1 = dates.getDate();
                var day = dates.getDay();
                var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
                var hours = dates.getHours()<10?
                            "0"+dates.getHours():dates.getHours();
                            
                var minutes = dates.getMinutes()<10? 
                            "0"+dates.getMinutes():dates.getMinutes();
                            
                var seconds = dates.getSeconds()<10?
                            "0"+dates.getSeconds():dates.getSeconds();
                
                return year+"年"+(month+1)+"月"+date1+"日 "+weeks[day]+hours+":"+minutes+":"+seconds;
            }
            
        </script>

        
    </body>
</html>

PHP：

<?php

    header("Content-Type:text/html;charset=utf-8");
    
    echo file_get_contents("imgs.txt");

仓库地址：https://gitee.com/vhacker/yunpan

这次更新的内容总的来说不是很大，但我会持续更新的，不断去完善他。大家有啥好的建议欢迎在下边留言~~~

转载于:https://www.cnblogs.com/sunlizheng/p/7860365.html