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

网盘系统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>

② 注册页面

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

<!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

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