abstrak：原本想利用這段時(shí)間學(xué)習(xí)的技術(shù)，自己作一個(gè)WEB在線管理系統(tǒng)，其實(shí)現(xiàn)邏輯也有了。奈于時(shí)間緊迫，就先弄了一個(gè)大概界面出來(lái)，作了登錄操作。和文件輸出操作。對(duì)于文件的操作函數(shù)還沒(méi)寫(xiě)。以下是編輯器界面：login.php:<!doctype html> <html lang="en"> <head> &nbs
原本想利用這段時(shí)間學(xué)習(xí)的技術(shù)，自己作一個(gè)WEB在線管理系統(tǒng)，其實(shí)現(xiàn)邏輯也有了。奈于時(shí)間緊迫，就先弄了一個(gè)大概界面出來(lái)，作了登錄操作。和文件輸出操作。對(duì)于文件的操作函數(shù)還沒(méi)寫(xiě)。
以下是編輯器界面：
login.php:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WEB文件在線管理系統(tǒng)</title>
<style>
body{background:url("images/timg.jpeg");background-size: cover;}
h1{width:500px;margin:250px auto 0;height:40px;text-align: center;color: white}
.login{width:500px;margin:10px auto;}
.login p{width: 100%;text-align: center}
.login input{width:65%;margin:10px auto;border: solid 1px #ccc;height:35px;line-height: 35px;text-indent: 1em;outline: none}
.login button{width:65%;height:35px;line-height:35px;text-align:center;color:white;background-color:#4cae4c;color:white;font-weight:bolder;cursor:pointer;border:none;font-size:16px;}
</style>
</head>
<body>
<h1>WEB文件在線管理系統(tǒng)</h1>
<div class="login">
<form>
<p><input type="text" name="username" PLACEHOLDER="請(qǐng)輸入用戶名"></p>
<p><input type="text" name="password" placeholder="請(qǐng)輸入密碼"></p>
<p><button type="button">提交</button></p>
</form>
</div>
<script>
let btn=document.getElementsByTagName('button')[0];
btn.onclick=function(){
//1、創(chuàng)建xhr對(duì)象
let xhr= new XMLHttpRequest();
//2、監(jiān)聽(tīng)相應(yīng)狀態(tài)
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status===200){
let p=document.createElement('p');
p.style.color='red';
//設(shè)置一個(gè)變量，將服務(wù)器端返回的值轉(zhuǎn)化成json格式
let json=JSON.parse(xhr.responseText);
// console.log(json);
if(json.status==1){
p.innerHTML=json.msg;
}else if(json.status==0){
p.innerHTML=json.msg;
}
document.forms[0].appendChild(p);//登錄成功與否的提示語(yǔ)
btn.disabled=true;//禁用按鈕
setTimeout(function(){
document.forms[0].removeChild(p);
btn.disabled=false;//啟用按鈕
if(json.status==1){
location.href='admin.php';//登錄成功后跳轉(zhuǎn)地址
}
},2000)
}else{
alert('相應(yīng)失敗'+xhr.status);
}
}else{
//圖片不停的轉(zhuǎn)動(dòng)
}
}
//3、設(shè)置請(qǐng)求參數(shù)
xhr.open('post','inc/check.php',true);
//4、設(shè)置請(qǐng)求頭部
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//5、獲取表單數(shù)據(jù)
let data={
username:document.getElementsByName('username')[0].value,
password:document.getElementsByName('password')[0].value
}
let data_json=JSON.stringify(data);//將json轉(zhuǎn)化成文本
xhr.send('data='+data_json);
}
</script>
</body>
</html>admin.php:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WEB在線文件管理器</title>
<?php
require 'inc/CheckLogin.php';
?>
<style>
body{margin: 0;padding:0;}
.header {
width: 100%;
height: 50px;
background-color:rgba(43,102,154,.9)
}
.logo{width: 400px;height: 50px;font-size: 16px;color: white;line-height: 50px;float: left;margin-left: 15px;}
.login{width:150px;text-align:center;float:right;height: 50px;line-height: 50px;font-size: 12px;}
.logout{display: none;width:100%;height:70px;position: absolute;top:50px;right:0px;}
.login a{color: white;text-decoration: none}
.member{position: relative;width: 120px;display:block;padding-left:15px;height: 50px;background-color:rgba(43,102,154,1);}
.member span{color: red;font-weight:bolder;padding-right: 0 5px;font-size: 14px;}
.member:hover .logout{display: block;background-color:#c0c0c0}
.logout ul{padding:0;margin: 0;}
.logout ul li{list-style: none;height:30px;line-height: 30px;color: #0f0f0f}
.by_left{width:10%;float: left;background-color:#333333;min-height: 650px;}
.by_left ul{margin: 0;padding:0; margin-top: 20px;}
.by_left li{list-style: none;height:40px;line-height:40px;text-indent:1em;font-size: 13px;}
.by_left li a{color: white;text-decoration: none}
.iframe{width:90%;float: right;}
</style>
</head>
<body>
<div class="header">
<div class="logo">WEB文件在線管系統(tǒng)</div>
<div class="login">
<a href="#" class="member">歡迎您,<span><?php session_start(); echo $_SESSION['username']; ?></span>管理員
<div class="logout">
<ul>
<li>個(gè)人中心</li>
<li>退出登錄</li>
</ul>
</div>
</a>
</div>
</div>
<div class="by_left">
<ul>
<li><a href="#">文件瀏覽</a></li>
<li><a href="#">遠(yuǎn)程下載</a></li>
<li><a href="#">爬蟲(chóng)系統(tǒng)</a></li>
<li><a href="#">文件上傳</a></li>
<li><a href="#">文件下載</a></li>
</ul>
</div>
<div class="iframe">
<iframe src="main.php" id="main" width="100%" frameborder="0"></iframe>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
$height=$(window).height()-50;
console.log($height);
$('.by_left').css('height',$height);
$('.iframe').css('height',$height);
$('#main').css('height',$height);
});
</script>
</html>main.php:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WEB文件在線管理系統(tǒng)</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
header{width: 100%;height:50px;}
header h2{height: 50px;line-height: 50px;text-align: center;font-size:13px;}
.list_left{width:50%;float:left;height: 350px;}
.list_left ul{margin: 0;padding:0;}
.list_left li{list-style: none;height: 35px;line-height: 35px;border-bottom:dotted 1px #ccc;position: relative;text-indent:35px}
.list_left li i{width:15px;height:15px;display: block;position: absolute;top:10px;left:-20px;}
.list_left li span{float: right;margin-right: 10px;}
.title{height: 35px;line-height: 35px;text-indent: 20px;}
.list_right ul{margin: 0;padding: 0;}
.list_right li{height: 35px;line-height: 35px;list-style: none;text-indent: 20px;}
</style>
</head>
<body>
<header>
<div class="breadcrumb"> <span>本地文件統(tǒng)計(jì)</span></div>
</header>
<div class="list_left">
<?php
$dir='../manager/';
echo'<ul>';
foreach (scandir($dir) as $v){
if($v !='.' && $v !='..'){
if(is_file($v)){
echo'<li><i class="glyphicon glyphicon-file"></i>';
echo $v;
echo'<span><a href="">查看</a> <a href="#">刪除</a></span></li>';
}else{
echo'<li><i class="glyphicon glyphicon-file"></i>';
echo $v;
echo'<span><a href="">查看</a> <a href="#">刪除</a></span></li>';
}
}
}
echo'</ul>';
?>
</div>
<div class="list_right">
<div class="title">文件類型統(tǒng)計(jì):</div>
<ul>
<li>文件：15個(gè)</li>
<li>文件夾：2個(gè)</li>
<li>圖片文件：16個(gè)</li>
<li>js文件：1個(gè)</li>
</ul>
</div>
</body>
</html>
Guru membetulkan：查無(wú)此人Masa pembetulan：2019-02-20 09:05:45
Rumusan guru：寫(xiě)的不錯(cuò)，萬(wàn)事開(kāi)頭難，只要堅(jiān)持寫(xiě)下去，一定會(huì)寫(xiě)好的，繼續(xù)加油。