目录
1.服务器主文件
本人使用的是python3.11.1，其他版本尚未测试。
此处用了不少库，功能都写在后面了，自行安装即可。
from bottle import *#服务器 from os import *#后面需要使用绝对路径 import socket#获取IP import bottle import random#生成随机数 import qrcode#生成二维码 import pyautogui#用于投屏 import threading#多线程建议不要省略import bottle，因为可能会导致bottle库的run()和init中的run()重名而报错。
下面是服务器的全部代码
服务器.py
from bottle import *#服务器 from os import *#后面需要使用绝对路径 import socket#获取IP import bottle import random#生成随机数 import qrcode#生成二维码 import pyautogui#用于投屏 import threading#多线程 hostname = socket.gethostname() ip = socket.gethostbyname(hostname) #这里是声明那几个文件夹 apath = path.abspath("./infile") bpath = path.abspath("./网盘") cpath = path.abspath("./背景图片") dpath = path.abspath("./temp") mainport = 8080 #上传下载功能的服务器端口 tpport = 8081 #投屏功能的服务器端口 #网盘密码的更改需要在infile文件夹下的index.html中更改 #投屏的帧数需要在infile文件夹下的tp.html中更改 @route("/") def home(): return static_file("index.html", apath) @route("/infile/<name>") def infiledown(name): return static_file(name, root=apath) @route("/backimg") def do_backimg(): imgs = listdir(cpath) img = imgs[random.randrange(0, len(imgs))] return static_file(img, root=cpath) @route("/file/<name>") def do_download(name): return static_file(name, root=bpath, download=True) @route("/up") def uppage(): return static_file("up.html", apath) @route("/upload", method="POST") def do_upload(): upd = request.files.get("upload") upd.save(bpath, overwrite=True) return static_file("upend.html", root=apath) @route("/down") def downpage(): files = listdir(bpath) result = "" for file in files: result += """ <form action="/file/{name}" method="get"> <input type="submit" id="{name}" class="hidd"> </form><div class="show"><label for="{name}"><span class="spanshow">{name}</span></label></div>""".format(name=file) return """<!DOCTYPE html> <html> <head> <title>下载</title> </head> <body> <div id='main'>"""+ result+ """ </div> <a href="/other" style="position: absolute;bottom: 0%;right: 0%;">高级</a> <link rel="stylesheet" href="/infile/downpage.css"> <script src="/infile/downpage.js"></script> </body> </html>""" @route("/other") def dootherret(): return static_file("other.html", root=apath) @route("/yanzheng",method='post') def dootheryz(): reyz=request.forms.get("pwd") if int(reyz) == 123456: #此处为进入高级界面的密码（纯数字） return static_file('business.html',apath) else: return "Password error" @route("/shut",method="post") def doyxpy(): system('shutdown -s') @route("/tpbefore") def tpbefore(): return '<a href="{}">进入投屏界面</a>'.format(str(ip) + ":" + str(tpport) + "/tp") def f1(): @route("/tp") def dotp(): return static_file('tp.html',apath) @route("/upimg/<>") def doupimg(): im = pyautogui.screenshot() im.save(dpath + "/sss.png") return static_file('sss.png',dpath) bottle.run(host=ip, port=tpport, reloader=True) t1=threading.Thread(target=f1,args=("apath","dpath"),daemon=True) t1.start() img = qrcode.make(str(f"http://"+str(ip)+':'+str(mainport))) imgpath=dpath+"/1.png" img.save(imgpath) os.startfile(imgpath,"open") bottle.run(host=ip, port=mainport, reloader=True, debug=True)
2.index.html
在这里，我尝试使用了一些动画，可能配色不是很好，如果想的话可以改为自己喜欢的颜色
<html> <head> <title>网盘</title> </head> <body> <div id="main"> <div id="login-back"> <div id="login"> <p>请输入登录密码：</p> <p><input type="password" id="loginpwd"></p> <p><label for="loginbut" id="loginward"><span>登录</span></label></p> <p id="out" style="text-align: center;color: red;"></p> <button onclick="opens()" style="display: none;" id="loginbut"></button> </div> </div> <div id="door-l"></div> <div id="door-r"></div> <div id="selectmask"> <form action="/up" method="get"> <input type="submit" id="ups" class="hidd"> </form> <form action="/down" method="get" class="hidd"> <input type="submit" id="downs"> </form> <p class="pss"><label for="ups"><img src="infile/sel1.png" style="height: 20%;"></label></p> <p class="pss"><label for="downs"><img src="infile/sel2.png" style="height: 20%;"></label></p> </div> </div> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0px; background-image: url('/backimg'); } #main { background-color: rgba(0, 0, 0,0); height: 100%; width: 100%; z-index: -1; margin: 0px; } #door-l { background-color:skyblue; height: 100%; width: 50%; position: absolute; top: 0px; left: 0px; transition: all 1s; border: 0px; z-index: 9; } #door-r { background-color:skyblue; ; height: 100%; width: 50%; position: absolute; top: 0px; right: 0px; transition: all 1s; border: 0px; z-index: 9; } #login-back { height: 100%; width: 100%; margin: 0px; background-color:wheat; position: absolute; top: 0%; z-index: 10; transition: all 1s; } #login{ height: 30%; width: 30%; background-color: white; position: absolute; top: 35%; left: 35%; z-index: 11; text-align: center; } #loginpwd{ height: 15%; width: 70%; text-align: center; font-size: large; } #loginward{ text-align: center; vertical-align: middle; position: absolute; top: 70%; left: 25%; width: 50%; height: 20%; background-color:deepskyblue; font-size: larger; color: white; } #selectmask{ position: absolute; text-align: center; height: 100%; width: 100%; top: -100%; background-color: rgba(0, 0, 0, 0); z-index: 8; transition: all 1s; flex-direction: column; } #up{ width: 60%; height: 30%; border-radius: 50%; border: 1px solid black; background-color: brown; } .hidd{ display: none; } </style> <script> function opens(){ let a = document.getElementById('loginpwd').value; if (a == 123456){ //在a==后面输入密码 document.getElementById('out').style.color="green" document.getElementById('out').innerHTML="正在进入网盘..." setTimeout(()=>{openfont()},2000); } else{ document.getElementById('out').innerHTML="密码错误" } } function openfont(){ document.getElementById('login-back').style.top="-100%"; setTimeout(()=>{opendoor()},1300); } function opendoor(){ document.getElementById('door-l').style.width="0%"; document.getElementById('door-r').style.width="0%"; setTimeout(()=>{downselect()},1100); } function downselect(){ document.getElementById('selectmask').style.top="0%"; } </script> </body> </html>
3.上传界面（下载界面已经囊括在服务器主文件里了）
up.html
<html> <body> <form method="post" action="/upload" enctype="multipart/form-data"> <input type="file" name="upload" id="upload" style="display: none;"> <input type="submit" id='sub' style="display: none;"> </form> <label for="upload" id="lab1"><span><img style="height: 100%;" src="infile/up1.png"></span></label> </body> <style> html, body { background-image: url('/backimg'); } #lab1 { background-color: white; position: absolute; top: -20%; height: 10%; transition: all 1s; } </style> <script src="/infile/jquery.min.js"></script> <script> function LoadingStart(LoadText) { var loadingHidder = null; loadingHidder = "<div class='commLoading' style='background: rgba(0,0,0,0.1); width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;'><div style='background: #fff;position: absolute;top: 50%;left: 50%; transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);padding: 30px 50px 20px;border-radius: 5px;line-height: 20px;box-sizing: border-box;text-align: center;'><img src='https://www.buruyouni.com/static/upload/images/loading.gif' style='width: 35px;display: block;margin: 0 auto 15px;' /><span>" + LoadText + "<span></div></div>"; $("body").css("overflow", "hidden").append(loadingHidder); } function LoadingEnd() { $("body").css("overflow", ""); $(".commLoading").remove(); } function commAlert(ALERTINNERHTML) { var alertHTML = ""; alertHTML += "<div class='commAlertMask'><div class='commMaskBox'><div class='commMaskClose'><i style='font-size:22px;font-style:normal'>x</i></div><div className='commAlertCont'>" + ALERTINNERHTML + "</div></div></div>"; $("body").append(alertHTML); $(".commAlertMask .commMaskClose").click(function () { $(".commAlertMask").remove(); }); } $('#upload').change(function () { LoadingStart("uploading..."); document.getElementById('sub').click(); document.getElementById('lab1').style.top="-20%" }); window.onload = function () { document.getElementById('lab1').style.top = '0%' } </script> </html>
upend.html
<!DOCTYPE html> <head> <style> p { font-size: 1.25rem; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .circle { stroke-dasharray: 1194; stroke-dashoffset: 1194; transition: 0.6s all 0s linear; } .tick { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: 1.5s all 0s linear; } </style> </head> <body> <svg width="400" height="400"> <circle class="circle" fill="none" stroke="#68e534" stroke-width="20" cx="200" cy="200" r="190" stroke-linecap="round" transform="rotate(-90)" transform-origin="200 200"></circle> <polyline class="tick" fill="none" stroke="#68e534" stroke-width="24" points="88,214 173,284 304,138" stroke-linecap="round" stroke-linejoin="round"></polyline> </svg> <script> var p = document.getElementById('ui'); var circle = document.getElementsByClassName('circle'); var tick = document.getElementsByClassName('tick'); console.log(circle); console.log(circle[0].strokeDashoffset); function starts_2() { tick[0].style.strokeDashoffset = 0; }; function starts_1() { circle[0].style.strokeDashoffset = 0; }; function changes(){ window.location.href="/down" } function starts() { setTimeout(() => { starts_1() }, 1000); setTimeout(() => { starts_2() }, 1800); setTimeout(()=> {changes()},3000) }; window.onload = starts(); </script> </body> </html>
4.投屏界面
tp.html
<img id="imgs" style="width: 100%;"> <script> var imgs = document.getElementById('imgs'); var i = 0; function fun2(){ srcs = "/upimg/" + String(i) + ".png"; imgs.src = srcs; i++; } function fun1(){ setInterval('fun2()',1000); /*此处的1000即为每1000ms向服务器请求一帧*/ } window.onload=fun1() </script>
5.进入高级设置
other.html
<p>高级版登录验证：</p> <form action="/yanzheng" method="post"> <input type="password" name="pwd" id="pwd"> <input type="submit" value="登录"> </form>
business.html
<html> <head> <title></title> </head> <body> <p>关机</p> <form action="/shut" method="post"> <input type="submit" id="shutdown" style="display: none;"> </form> <button onclick="fun1()">关机</button> <hr> <a href="/tpbefore">启动投屏</a> <script> function fun1() { var result = confirm("确认关机？") if (result) { document.getElementById('shutdown').click; } } </script> </body> </html>
6.css和js
downpage.css
html, body { background-image: url('/backimg'); margin: 0px; } #main { background-color: rgba(255, 255, 255, 30%); position: absolute; top: -100%; left: 0px; width: 100%; transition: all 1s; margin: 0px; } .hidd { display: none; } .spanshow { font-size:x-large; } .show { margin: 0px; width: 100%; height: 20%; color: black; transition: background-color 1s linear, color 1s linear; -webkit-transition: background-color 1s linear, color 1s linear; -moz-transition: background-color 1s linear, color 1s linear; -o-transition: background-color 1s linear, color 1s linear; } .show:hover { background-color: #FF3d67; color: blue; }downpage.js
function func0(){ document.getElementById('main').style.top="0%"; } function fun1(){ setTimeout(()=>{func0()},500) } function fun3(){ var te1=document.getElementById('te1'); var te2=document.getElementById('te2'); var sub=document.getElementById('sub'); te1.value = te2.value; sub.click(); } window.onload=fun1()
1021
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
