PHP网站设计 —- 网盘(实现用户注册、登录，文件上传、下载、删除、查看等功能)

PHP网站设计 ---- 网盘(实现用户注册、登录，文件上传、下载、删除、查看等功能)

运行效果

视频演示

项目下载(在xampp/htdocs/下可以直接运行)

完整项目包.zip

功能要求

当用户注册后分配相应的云盘空间，使用已注册后的用户名登录后，可以使用文件上传，下载，删除，查看等功能。

应用场景

在实验室，您有没有忘带U盘，电脑上还没有QQ等社交软件时文件无法带走的烦恼。

项目原理

登录页面：
通过输入的用户名和密码，在mysql数据库用户表中查询，查询到用户名如果为空，表示用户表没有此用户，即此用户为注册，如果查询到此用户名，再根据此用户名查询其密码，如果输入密码与数据库内查询到密码一致，登录成功跳转到主页。

注册页面：
注册页面包含三个输入框：用户名，密码，邀请码；输入都非空后，首先判断邀请码是否正确，如错误则刷新本页面并输出邀请码错误，如正确判断数据库内此用户有没有注册，如有注册刷新本页面并输出用户已注册，数据库内没有注册过则插入数据库。

主页：
主页使用传统三段式结构：头、身体、尾，头包含用户登录信息，注销按钮等，身体包括说明文档，主要功能区等，尾包含版权信息等

项目结构

在XAMPP安装目录下htdocs下建立项目文件夹Cloud，在Cloud下建文件夹html和upload，前者为代码放置文件夹，后者为上传文件放置文件夹
Cloud

1.Cloud
在这里插入图片描述
2.html

3.css

4.imgs

5.js

6.js/localization

7.upload下为空

文件夹 html 下代码

1.login.php
效果：
在这里插入图片描述
代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189

<?php
//启动session的初始化
session_start();
$_SESSION["username_html"]="";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轻量云</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body style="background: url(imgs/3.jpg);background-size:cover;">
<div class="wrapper">

<div class="container">
<h1>轻量云网盘</h1>
<form class="form" id="loginform" action="" method="post">
<div><input type="text" name="username" placeholder="用户名" ></div>
<div><input type="password" id="password" name="password" placeholder="密码" ></div>
<div>
<a href="add_user.php">没有账号？点我</a>
</div>
<button type="submit">登录</button>
</form>
</div>
</div>

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/localization/messages_zh.js"></script>
<script type="text/javascript" src="js/md5.js"></script>
<script type="text/javascript">
$().ready(function() {

$('button').click(function(){
var a = $('#password').val();
var b = hex_md5(a);
$('#password').val(b);
});

// 在键盘按下并释放及提交后验证提交表单
$("#loginform").validate({
rules : {
username : {
required : true,
rangelength:[2,8]
},

password : {
required : true,
rangelength:[6,32]
},
},
messages : {
username : {
required : "请输入用户名",
rangelength:"用户名长度必须在2-8个字符之间"
},
password : {
required : "请输入密码",
rangelength:"密码长度必须在6-32个字符之间"
},
}
});
})

var error="${error}";
if(error=="error"){
alert("帐户名或密码错误");
}
</script>
</body>
</html>
<?php

// 定义变量并设置为空值
$username_html = $password_html = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username_html = test_input($_POST["username"]);
$password_html = test_input($_POST["password"]); //此处密码已md5加密
$login_flag = password_verification($username_html,$password_html);
if ($login_flag == 1) { //为1则密码正确
$_SESSION["username_html"]="$username_html";
header("refresh:0;url = http://localhost/Cloud/html/index.php");
echo "登录成功，跳转到主页...";
}
elseif ($login_flag == 0) {//为0密码错误
header("refresh:2;url = http://localhost/Cloud/html/login.php");
echo "密码错误，2秒后跳转到登录页面..";
}
elseif ($login_flag == -1) { //为-1用户名不存在
header("refresh:2;url = http://localhost/Cloud/html/login.php");
echo "用户名不存在，2秒后跳转到登录页面...";
}
else{

}

//查询数据库user表，是否有这个用户及密码是否正确，如果匹配到，跳转到操作界面
}

function password_verification($usernamehtml,$passwordhtml){
$dbms = 'mysql';
$user = 'root';
$pwd = 'root';
$dbName = 'cloud';
$host = 'localhost';
$charset = 'utf8';
$dsn = "$dbms:host=$host;dbname=$dbName;charset=$charset";
try {
$pdo = new PDO( $dsn, $user, $pwd );
} catch ( Exception $e ) {
echo $e->getMessage();
}
$pdo->exec('set names utf8');

///////////////////////////////////////////////////////////////// 用户名存在检测
$sql = "select * from user";
//准备sql模板
$stmt = $pdo->prepare( $sql );
//绑定参数
//
$id = '1';
$stmt->bindValue( 1, $id );
//执行预处理语句
$stmt->execute();
$row_flag = 0;
while ( $row = $stmt->fetch() ) {
$ssss = $row[ 'name' ];
if (!strcmp($usernamehtml,$ssss)) {
$row_flag = 1;
}
}

if ($row_flag == 0) {
//释放查询结果
$stmt = null;
//关闭连接
$pdo = null;
return -1;
}

/////////////////////////////////////////////////////// 密码检测
//查询
$sql = "select * from user where name = '$usernamehtml'";
//准备sql模板
$stmt = $pdo->prepare( $sql );
$id = '1';
//绑定参数
$stmt->bindValue( 1, $id );
//执行预处理语句
$stmt->execute();
//推荐这种方式来获取查询结果
while ( $row = $stmt->fetch() ) {
//echo $row[ 'name' ];
$ssss = $row[ 'password' ];
//echo "<br />";
//echo "passwordhtml:$passwordhtml";
//echo "<br />";
//echo "ssss:$ssss";
if (!strcmp($passwordhtml,$ssss)){
//释放查询结果
$stmt = null;
//关闭连接
$pdo = null;
return 1;
}
else{
//释放查询结果
$stmt = null;
//关闭连接
$pdo = null;
return 0;
}
}
}

function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>

2.add_user.php(注册页面)
效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body style="background: url(imgs/4.jpg);background-size:cover;">
<div class="wrapper">

<div class="container">
<h1>注册页面</h1>
<form class="form" id="loginform" action="" method="post">
<div><input type="text" name="username" placeholder="用户名" ></div>
<div><input type="password" id="password" name="password" placeholder="密码" ></div>
<div><input type="text" id="invitation" name="invitation" placeholder="邀请码" ></div>
<div>
</div>
<br />
<button type="submit">注册</button>
</form>
</div>
</div>

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/localization/messages_zh.js"></script>
<script type="text/javascript" src="js/md5.js"></script>
<script type="text/javascript">
$().ready(function() {

$('button').click(function(){
var a = $('#password').val();
var b = hex_md5(a);
$('#password').val(b);
});

// 在键盘按下并释放及提交后验证提交表单
$("#loginform").validate({
rules : {
username : {
required : true,
rangelength:[2,8]
},

password : {
required : true,
rangelength:[2,32]
},
},
messages : {
username : {
required : "请输入用户名",
rangelength:"用户名长度必须在2-8个字符之间"
},
password : {
required : "请输入密码",
rangelength:"密码长度必须在6-32个字符之间"
},
}
});
})

var error="${error}";
if(error=="error"){
alert("帐户名或密码错误");
}
</script>
</body>
</html>
<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {
// 定义变量并设置为空值
$username_html = $password_html = "";
$username_html = test_input($_POST["username"]);
$password_html = test_input($_POST["password"]);//此处密码已md5加密
$invitation_html = test_input($_POST['invitation']);
/*echo $username_html;
echo "<br />";
echo $password_html;
echo "<br />";
echo $invitation_html;*/
echo "<br />";
$add_user_flag = add_user($username_html,$password_html,$invitation_html);
if($add_user_flag == 1)
{
create_dir($username_html); //分配相应云盘空间
header("refresh:2;url = http://localhost/Cloud/html/login.php");
echo "用户注册成功，2秒后跳转到登录页面...";
}
elseif ($add_user_flag == 0) {
header("refresh:2;url = http://localhost/Cloud/html/add_user.php");
echo "用户名已存在，2秒后跳转到注册页面...";
}
elseif ($add_user_flag == -1) {
header("refresh:2;url = http://localhost/Cloud/html/add_user.php");
echo "邀请码错误，2秒后跳转到注册页面...";
}

//查询数据库user表，是否有这个用户及密码是否正确，如果匹配到，跳转到操作界面
}

function add_user($usernamehtml,$passwordhtml,$invitationhtml){
////php操作pdo实现插入
//echo "运行add_user函数";
if ($invitationhtml != '17B') {
echo "邀请码错误";
return -1;
}
else {
if(select_user($usernamehtml) == 1){
$dbms = 'mysql';
$user = 'root';
$pwd = 'root';
$dbName = 'cloud';
$host = 'localhost';
$charset = 'utf8';
$dsn = "$dbms:host=$host;dbname=$dbName;charset=$charset";
try {
$pdo = new PDO( $dsn, $user, $pwd );
} catch ( Exception $e ) {
echo $e->getMessage();
}
$pdo->exec('set names utf8');

$sql="insert into user(name,password) values('$usernamehtml','$passwordhtml')";

if($pdo->query($sql)){
echo '数据添加成功!';
return 1;
}
}
else{
echo "用户名已存在<br />";
return 0;
}

}

}

function select_user($usernamehtml){
$dbms = 'mysql';
$user = 'root';
$pwd = 'root';
$dbName = 'cloud';
$host = 'localhost';
$charset = 'utf8';
$dsn = "$dbms:host=$host;dbname=$dbName;charset=$charset";
$i = 0;
try {
$pdo = new PDO( $dsn, $user, $pwd );
} catch ( Exception $e ) {
echo $e->getMessage();
}
$pdo->exec('set names utf8');

//查询
$sql = "select * from user where name = '$usernamehtml'";
//准备sql模板
$stmt = $pdo->prepare( $sql );
$id = '1';
//绑定参数
$stmt->bindValue( 1, $id );
//执行预处理语句
$stmt->execute();
//推荐这种方式来获取查询结果
echo "<br />";
while ( $row = $stmt->fetch() ) {
//echo $row[ 'id' ];
//echo $row[ 'name' ];
$i = $i +1;
}
//echo "<br />";
//echo "i:$i";
if($i == 0){
//释放查询结果
$stmt = null;
//关闭连接
$pdo = null;
return 1; //用户名可以使用
}
else {
//释放查询结果
$stmt = null;
//关闭连接
$pdo = null;
return -1;
}

}

function create_dir($usernamehtml){
$dir = iconv("UTF-8", "GBK", "../upload/$usernamehtml");
if (!file_exists($dir)){
mkdir ($dir,0777,true);
echo '创建文件夹成功';
} else {
echo '需创建的文件夹已经存在';
}
}

function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}

?>

3.index.php(主页界面)
效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>轻量云主页</title>
<link rel="stylesheet" href="css/hangge.css">
</head>
<body>
<div id="wrapper">

<header class="SiteHeader">
<div class="inner">
<a href="index.html" class="logo">轻量云网盘</a>
<nav id="nav">
<?php
session_start();
$username_html = $_SESSION["username_html"];//读取登录的用户
if ($username_html == "") {
echo "<a href="login.php">未登录</a>";
}
else{
echo "<a>$username_html 已登录</a>";
}

?>
<a href="cancellation.php">注销</a>
</nav>
</div>
</header>

<aside class="NavSidebar">
<nav>
<h2>使用说明</h2>
<ul>
<li>账户注册后，默认分配云空间。</li>
<li>注意数据安全，隐私数据请勿上传。</li>
<li>上传文件时点击浏览选择本地文件进行上传。</li>
<li>下载文件时点击云盘内文件后点击下载。</li>
<li>删除文件时点击云盘内文件后点击删除。</li>
<li style="color: red;"><a href="wechat.html">轻量云网盘感谢各位的支持，开发者联系方式。</a></li>
</ul>
</nav>

<section>
<h2>关于我们</h2>
<p>轻量云网盘由Pengjiaqi开发，提供一定性能的云存储功能。</p>
</section>

<div>
<img src="imgs/2.jpg" width='150px' style="border-radius: 20px;">
</div>
</aside>

<main class="main">
<article class="Content">
<header class="ArticleHeader">
<h2>欢迎来到轻量云网盘</h2>
<p class="Byline">by Pengjiaqi</p>
</header>

<div id="file">


<h2> 文件上传</h2>

<form action="upload_file.php" method="post" enctype="multipart/form-data">
<input type="file" name="myFile" id="test3" style="width: 100%;height: 30px; border-radius: 10px;-webkit-box-shadow: 0 0 5px rgba(0,113,241,1);" /><br/>
<input type="submit" value="上传" class="button_css" />
</form>


<br />
<br />
<h2> 文件删除</h2>

<form action="delete_file.php" method="post">
<input id="test1" name="filename" type="text" readonly="readonly" style="width: 100%; height: 30px; border-radius: 10px;-webkit-box-shadow: 0 0 5px rgba(255,113,241,1);" value="" placeholder="请在右侧选择文件" />
<input type="submit" value="点击删除" class="button_css" />
</form>


<br />
<br />
<h2> 文件下载</h2>

<form action="download_file.php" method="get">
<input id="test2" name="filename" type="text" readonly="readonly" style="width: 100%;height: 30px; border-radius: 10px;-webkit-box-shadow: 0 0 5px rgba(0,113,241,1);" value="" placeholder="请在右侧选择文件" />
<input type="submit" value="点击下载" class="button_css" />
</form>

</div>

<div id="filelist">
<h2 style="color: #33CCCC;">云盘内文件:</h2>
<hr width="100%" align="left">
<br />
<?php ///查询目录下文件列表

function getDirContent($path){
if(!is_dir($path)){
return false;
}
$arr = array();
$data = scandir($path);
foreach ($data as $value){
if($value != '.' && $value != '..'){
$arr[] = $value;
}
}
return $arr;
}
if ($username_html=="") {
echo "<h2>请登录</h2>";
}
else{
$file =getDirContent("../upload/$username_html/");
//print_r($file);
//print_r($file[2]);
$arrlength=count($file);
?>
<ul>
<?php
for($x=0;$x<$arrlength;$x++) { //将目录下所有文件输出
echo "<li><a href="javascript:changeText('$file[$x]')";".">$file[$x]</a></li>"; //点击超链接自动向input中填入
}
?>
</ul>
<?php
}
?>

</div>

</article>
</main>

<footer class="footer">
<p class="Disclaimer">pengjiaqi 版权所有,未经允许不得转载</p>
<p>
<a href="index.html">关于我们</a>
<a href="index.html">帮助</a>
</p>
<p>Copyright ? 2020</p>
</footer>
</div>
<script>
function changeText(text) //点击超链接向input填入内容
{
var element1 = document.getElementById("test1");
var element2 = document.getElementById("test2");
element1.value = text;
element2.value = text;
}
</script>
</body>
</html>

4.download_file.php(下载文件)
效果：选择云盘内文件，点击下载
在这里插入图片描述
代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<?php
session_start();
$username_html = $_SESSION["username_html"];//读取登录的用户
if ($username_html=="") {
header("refresh:1;url = http://localhost/Cloud/html/login.php");
exit("请登录");
}
/*******************************************下载*********************************************************/
header("Content-Type:text/html;charset=utf8");

$file_name = $_GET['filename'];

$download_path = "../upload/$username_html/";

if(!file_exists($download_path.$file_name)){

//Header("Content-type:text/html;charset=utf-8");

echo "文件不存在!</br>";

exit;

}else{

$file=fopen($download_path.$file_name,"r");

header('Content-Typr:application/octet-stream');

header("Accept-Ranges: bytes");

header("Content-Disposition:attachment;filename=".$file_name);

header('Content-length:'.filesize($download_path.$file_name));

readfile($download_path.$file_name);

}

/******************************end******************************************/
?>

5.delete_file.php(删除云盘内文件)
效果：后台操作，选择云盘内文件后，点击删除及删除。
代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<?php
session_start();
$username_html = $_SESSION["username_html"];//读取登录的用户
if ($username_html=="") {
header("refresh:1;url = http://localhost/Cloud/html/login.php");
exit("请登录");
}
$path = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$filename = test_input($_POST["filename"]);
//如果文件夹下有文件，或者目录，均不能删除成功
$file_path="../upload/$username_html/$filename";
if(is_file($file_path)) {
if(unlink($file_path)) {
header("refresh:0;url = http://localhost/Cloud/html/index.php");
echo "删除成功，跳转到主页...";
}
else {
header("refresh:1;url = http://localhost/Cloud/html/index.php");
echo "删除失败，跳转到主页...";
}
}
else {
header("refresh:1;url = http://localhost/Cloud/html/index.php");
echo "文件不存在，跳转到主页...";
}
}

function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>

6.upload_file.php(文件上传)
效果：上传文件为后台操作，index选择好文件点击上传，文件会上传到云盘给改用户分配的空间
在这里插入图片描述代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<?php
session_start();
$username_html = $_SESSION["username_html"];
header("Content_type:text/html;charset=utf8");
if ($username_html=="") {
header("refresh:1;url = http://localhost/Cloud/html/login.php");
exit("请登录");
}
$imgname = $_FILES['myFile']['name'];
$tmp = $_FILES['myFile']['tmp_name'];
$error=$_FILES['myFile']['error'];

move_uploaded_file($tmp,"../upload/$username_html/".iconv("UTF-8", "gbk",$imgname));

if ($error==0) {

header("refresh:0;url = http://localhost/Cloud/html/index.php");
echo "上传成功！跳转至主页...";
}else{
switch ($error){
case 1:
header("refresh:1;url = http://localhost/Cloud/html/index.php");
echo "超过了上传文件的最大值，请上传400M以下文件！跳转至主页...";
break;
case 2:
header("refresh:1;url = http://localhost/Cloud/html/index.php");
echo "上传文件过多，请一次上传20个及以下文件！跳转至主页...";
break;
case 3:
header("refresh:1;url = http://localhost/Cloud/html/index.php");
echo "文件并未完全上传，请再次尝试！跳转至主页...";
break;
case 4:
header("refresh:1;url = http://localhost/Cloud/html/index.php");
echo "未选择上传文件！跳转至主页...";
break;
case 5:
header("refresh:1;url = http://localhost/Cloud/html/index.php");
echo "上传文件为0!跳转至主页...";
break;
}
}

?>

7.cancellation.php(注销)
效果：点击注销后，清除登录信息。
代码：

1
2
3
4
5
6
7
8

<?php
session_start();
$_SESSION = array();
session_destroy();
header("refresh:1;url = http://localhost/Cloud/html/login.php");
echo "跳转至主页...";

?>

8.wechat(社交娱乐)
效果：在这里插入图片描述代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加个微信QQ呀</title>
</head>
<body>
<h1>加个微信QQ呀</h1>
<div style="width: 300px">
<img src="imgs/wechat.jpg" width="300px">
</div>
<div style="width: 300px">
<img src="imgs/qq.jpg" width="300px">
</div>
</body>
</html>

文件夹 css 下代码

1.hangge.css

article, aside, figure, figcaption, footer, header, hgroup, nav, section, summary {
display: block;
}

*{
margin: 0px;
padding: 0px;
}

body {
width: 100%;
height: auto;
font-size: medium;
font-family: "Helvetica","Hiragino Sans GB","Microsoft Yahei", sans-serif;
}

a {
color: #999;
text-decoration: none;
cursor: pointer
}

a:hover {
color: #5188a6;
text-decoration: none
}

#wrapper {
width: 100%;
}

#nav {
display: inline-block;
float: right;
font-size: 1.25em;
margin-top: 5px;
margin-right: 10px;
}

header.SiteHeader {
height: 40px;
padding: 10px;
background: #000000;
}

aside.NavSidebar
{
padding: 5px 15px 5px 15px;
width: 12%;
height: 660px;
background-color:#f9f9f9;
font-size: small;
float:left;
}

aside.NavSidebar h2 {
color: #6B6E3F;
border-bottom: thin #6B6E3F solid;
margin-bottom: 10px;
margin-top: 20px;
}

aside.NavSidebar ul {
padding-left: 15px;
}

aside.NavSidebar li {
padding-bottom: 8px;
}

aside.NavSidebar img {
margin-top: 20px;
border: white solid 4px;
}

.Content {
padding: 20px;
margin-left:233px;
}

.Content .LeadIn {
font-weight: bold;
font-size: large;
font-variant: small-caps;
}

.Content h3 {
color: #24486C;
margin-bottom: 2px;
font-size: medium;
}

.Content p {
margin-top: 0px;
}

header.ArticleHeader {
padding: 10px;
margin: 10px;
text-align: center;
}

header.inner {
max-width: 65em;
width: calc(100% - 6em);
margin: 0 auto;
}

.logo {
font-family: 'Pacifico', cursive;
display: inline-block;
height: inherit;
left: 10px;
line-height: inherit;
margin: 0;
padding: 0;
position: absolute;
top: 10px;
color: #DDDDDD;
font-size: 1.75em;
text-transform: none;
font-weight: normal;
padding: 0;
}

header.ArticleHeader h2 {
font-size: xx-large;
}

header.ArticleHeader h3 {
margin-top: 8px;
font-weight: bold;
}

header.ArticleHeader .Byline {
margin-top: 8px;
font-style: italic;
font-size: small;
}

footer {
height: 50px;
background: #333333;
color:#c0c0c0;
padding: 10px;
text-align: center;
font-size: x-small;
clear:both;
}

footer .Disclaimer {
font-style: italic;
}

footer p {
margin: 3px;
}

#filelist{
float:right;
width: 20%;
margin-right: 25%;
height:auto;
}

#file{

float:left;
width: 30%;
margin-left:15%;
height: auto;
}
.button_css{
margin-top: 5px;
float: right;
background-color: #3300FF;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 15px;
}

#test1,#test2,#test3{
font-size: 16px;
text-align: center;
}

2.styles.css

body {
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body ::-webkit-input-placeholder {
/* WebKit browsers */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body :-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body ::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body :-ms-input-placeholder {
/* Internet Explorer 10+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
form label.error {
width: 200px;
margin-left: 8px;
color: Red;
}
.wrapper {
/* background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%); */
opacity: 0.8;
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 600px;
margin-top: -300px;
overflow: hidden;

}

.wrapper.form-success .container h1 {
-webkit-transform: translateY(85px);
-ms-transform: translateY(85px);
transform: translateY(85px);
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 40px 0;
height: 400px;
text-align: center;
}
.container h1 {
font-size: 40px;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: ease-in-put;
transition-timing-function: ease-in-put;
font-weight: 200;
}
form {
padding: 20px 0;
position: relative;
z-index: 2;
}
form input[type="text"],
form input[type="password"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
width: 250px;
border-radius: 3px;
padding: 10px 15px;
margin: 0 auto 10px auto;
display: block;
text-align: center;
font-size: 18px;
color: white;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
}
form input[type="text"]:hover,
form input[type="password"]:hover
{
background-color: rgba(255, 255, 255, 0.4);
}
form input[type="text"]:focus,
form input[type="password"]:focus {
background-color: white;
width: 300px;
color: #53e3a6;
}
form button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background-color: white;
border: 0;
padding: 10px 15px;
color: #53e3a6;
border-radius: 3px;
width: 250px;
cursor: pointer;
font-size: 18px;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
}
form button:hover {
background-color: #f5f7f9;
}
.bg-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.bg-bubbles li {
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
left: 10%;
}
.bg-bubbles li:nth-child(2) {
left: 20%;
width: 80px;
height: 80px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 17s;
animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
left: 25%;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
-webkit-animation-duration: 22s;
animation-duration: 22s;
background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
left: 70%;
}
.bg-bubbles li:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
-webkit-animation-delay: 3s;
animation-delay: 3s;
background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
-webkit-animation-delay: 15s;
animation-delay: 15s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
left: 90%;
width: 160px;
height: 160px;
-webkit-animation-delay: 11s;
animation-delay: 11s;
}

}

文件夹 js 下代码

js/localization/messages_zh.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

2.jquery.validate.min.js/jquery-2.1.1.min.js/md5.js
可以通过js文件名，百度自行下载
链接：zip
//////////////////////****** 代码部分end *******///////////////////////////

数据库

例：(此处是我的数据库，里面已经填了数据，你们呢建数据库时应该为空)
在这里插入图片描述
slq代码:(先建立cloud数据库然后运行sql文件即可)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

/*
Navicat Premium Data Transfer

Source Server : Mysql
Source Server Type : MySQL
Source Server Version : 80019
Source Host : localhost:3306
Source Schema : cloud

Target Server Type : MySQL
Target Server Version : 80019
File Encoding : 65001

Date: 29/06/2020 12:55:44
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`id` int(0) NOT NULL AUTO_INCREMENT,
`name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
`password` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
`register_time` datetime(0) NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP(0),
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 22 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

上传、下载文件设置参数

其中，phpini设置：
1，post_max_size = 501M
2，max_file_uploads = 20
3，post_max_size = 30M
参考：
PHP 简单实现文件上传、保存、下载的功能
使用 PHP 实现文件的上传和保存