基于python的极简版家用网盘（使用bottle）

1.服务器主文件

2.index.html

3.上传界面（下载界面已经囊括在服务器主文件里了）

4.投屏界面

5.进入高级设置

6.css和js

7.最后

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()

基于python的极简版家用网盘（使用bottle）相关推荐

python3web库_基于 Python3 写的极简版 webserver
基于 Python3 写的极简版 webserver.用于学习 HTTP协议,及 WEB服务器工作原理.笔者对 WEB服务器的工作原理理解的比较粗浅,仅是基于个人的理解来写的,存在很多不足和漏洞, ...
基于python的个人博客_一款基于 Django 的极简主义个人博客系统
shadow_blog 介绍 shadow_blog 是一款基于 Django 的极简主义个人博客,已应用在苍茫误此生博客前端基于 Boundless-UI,风格简约.支持响应式布局, 已适配主流的 ...
python入门笔记——飞机大战（极简版、未进行继承优化）
python入门笔记--飞机大战(极简版.未进行继承优化) import random import pygame# 引用pygame里的模块 from pygame.locals import *# ...
Atlas 200 DK开发者套件环境部署（1.0.9.alpha）极简版
Atlas 200 DK开发者套件环境部署(1.0.9.alpha)极简版前言 Atlas 200 DK开发者套件介绍环境部署介绍资源要求开发环境部署安装Docker 获取镜像(两种方法任选 ...
[转载] 【数据处理】 python 极速极简画图——频数(率)分布直方图
参考链接: Python | 使用XlsxWriter模块在Excel工作表中绘制面积图说明当我们拿到数据的时候,第一时间就是想知道数据的特点,然鹅单个的数值如平均数.中位数仍不够直观,我们更 ...
openGauss 极简版安装
openGauss 官网 openGauss 下载地址支持的操作系统 ● ARM: ● openEuler 20.03LTS(推荐采用此操作系统) ● 麒麟V10 ● Asianux ...
《重大人生启示录》极简版
<重大人生启示录>极简版献给所有活着和将要死去的人们,献给所有历经悲伤的人们本文摘录了启示录最重要的内容,不必非要看全本,不必购买书序言这是极为特殊的历史转折期,物质文明发展到这一 ...
很多小伙伴不太了解ORM框架的底层原理，这不，冰河带你10分钟手撸一个极简版ORM框架（赶快收藏吧）
大家好,我是冰河~~ 最近很多小伙伴对ORM框架的实现很感兴趣,不少读者在冰河的微信上问:冰河,你知道ORM框架是如何实现的吗?比如像MyBatis和Hibernate这种ORM框架,它们是如何实现的 ...
7句话让Codex给我做了个小游戏，还是极简版塞尔达，一玩简直停不下来
点击上方"视学算法",选择加"星标"或"置顶" 重磅干货,第一时间送达梦晨萧箫发自凹非寺量子位 | 公众号 QbitAI 什么,7 ...

基于python的极简版家用网盘（使用bottle）

2.index.html

3.上传界面（下载界面已经囊括在服务器主文件里了）

4.投屏界面

5.进入高级设置

6.css和js

基于python的极简版家用网盘（使用bottle）相关推荐

最新文章

热门文章