潼南县大潼建设有限公司网站,自己接私单网站开发,中国招标建设信息网站,张店网站推广whttpserver 是一个简单的HTTP服务器#xff0c;类似于python -m http.server#xff0c;但增加了文件上传和编辑的功能。
1. 安装 whttpserver 模块
# 临时设置环境变量 PYTHONUTF81#xff0c;强制 Python 使用 UTF-8 编码
set PYTHONUTF81
pip install whttpserver
2.…whttpserver 是一个简单的HTTP服务器类似于python -m http.server但增加了文件上传和编辑的功能。
1. 安装 whttpserver 模块
# 临时设置环境变量 PYTHONUTF81强制 Python 使用 UTF-8 编码
set PYTHONUTF81
pip install whttpserver
2. 启动服务
whttpserver --port 服务器监听的端口号默认为25000 --dir 文件上传和下载的根目录 --debug True or False
启动信息如下 在浏览器地址栏中输入 http://127.0.0.1:8181/ 3. 定制模板
可以看到默认的页面比较简陋我们可以修改下模板文件让它看起来更美观一些。
模板文件路径为%python安装目录%/Lib/site-packages/whttpserver/templates/index.html
修改后的 index.html 文件内容如下
!DOCTYPE html
html langzh
headtitleDirectory listing for {{the_path}}/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: Microsoft YaHei, 微软雅黑, Arial, sans-serif;background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);color: #2c3e50;min-height: 100vh;padding: 20px;overflow: hidden; /* 确保整个页面无滚动条 */display: flex;flex-direction: column;}.header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px;padding-bottom: 15px;border-bottom: 1px solid rgba(44, 62, 80, 0.1);}.breadcrumb {display: flex;align-items: center;gap: 8px;font-size: 18px;}.breadcrumb a {color: #3498db;text-decoration: none;transition: all 0.3s ease;padding: 5px 10px;border-radius: 4px;}.breadcrumb a:hover {background: rgba(52, 152, 219, 0.1);transform: translateY(-2px);}.breadcrumb span {color: #7f8c8d;}.upload-section {background: white;border-radius: 12px;padding: 20px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);margin-bottom: 25px;}.upload-form {display: flex;gap: 15px;align-items: center;}.file-input {flex: 1;padding: 12px 15px;border: 2px dashed #3498db;border-radius: 8px;background: rgba(52, 152, 219, 0.05);font-size: 16px;cursor: pointer;}.refresh-btn {background: #009688;color: white;border: none;padding: 12px 25px;border-radius: 8px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);}.upload-btn {background: #3498db;color: white;border: none;padding: 12px 25px;border-radius: 8px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);}.upload-btn:hover {background: #2980b9;transform: translateY(-2px);box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4);}.messages {margin-top: 15px;padding: 10px;border-radius: 6px;background: rgba(46, 204, 113, 0.1);color: #27ae60;display: none;}.uploading-message {margin-top: 10px;color: #3498db;font-style: italic;}.table-container {background: white;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);flex: 1;display: flex;flex-direction: column;max-height: calc(100vh - 300px); /* 确保表格高度适应屏幕 */}.table-header {padding: 20px;border-bottom: 1px solid rgba(44, 62, 80, 0.1);}.table-header h3 {font-size: 22px;color: #2c3e50;}.table-scroll {overflow-y: auto;max-height: calc(100vh - 320px); /* 确保表格内容不超出视口 */}/* 隐藏滚动条但保留功能 */.table-scroll::-webkit-scrollbar {width: 0;height: 0;}table {width: 100%;border-collapse: separate;border-spacing: 0;font-size: 15px;}th {background: #f8f9fa;color: #7f8c8d;font-weight: 600;text-align: left;padding: 15px 20px;position: sticky;top: 0;border-bottom: 2px solid #ecf0f1;}td {padding: 12px 20px;border-bottom: 1px solid #ecf0f1;}tr:hover td {background: rgba(236, 240, 241, 0.5);}.file a {color: #27ae60;text-decoration: none;font-weight: 500;transition: all 0.2s ease;}.dir a {color: #3498db;text-decoration: none;font-weight: 500;transition: all 0.2s ease;}.file a:hover, .dir a:hover {text-decoration: underline;opacity: 0.9;}.footer {text-align: center;padding: 20px;color: #7f8c8d;font-size: 14px;margin-top: 20px;border-top: 1px solid rgba(44, 62, 80, 0.1);}/style
/head
bodydiv classheaderdiv classbreadcrumba href/根目录/aspan›/spana href{{ parent_path }}上一级/a/divh3input typebutton value刷 新 classrefresh-btn onclickjavascript: location.href location.href;/h3h3文件目录管理器/h3/divdiv classupload-sectionform classupload-form methodpost action/upload?path{{req_path}} enctypemultipart/form-data targethidden_iframe onsubmitreturn addMessage();input typefile namefile classfile-inputinput typesubmit value上传文件 classupload-btn onclickshowUploadingMessage();/formdiv idmessages classmessages/divdiv iduploadingMessage classuploading-message styledisplay:none;正在上传文件请稍候.../div/divdiv classtable-containerdiv classtable-headerh4当前目录: {{the_path}}/h4/divdiv classtable-scrolltabletheadtrth文件名称/thth文件类别/thth文件大小/thth访问权限/thth所属用户/thth所属组/th th最后修改时间/th/tr/theadtbody{% for item in data %}tr class{{ item.type }}tda href{{ item.href }} class{{ item.type }}{{ item.name }}/a/tdtd{{ item.type }}/tdtd{{ item.size }}/tdtd{{ item.permissions }}/tdtd{{ item.owner }}/tdtd{{ item.group }}/tdtd{{ item.mtime }}/td/tr{% endfor %}/tbody/table/div/divdiv classfooterp文件目录管理系统 | 优雅简洁的文件浏览体验/p/diviframe namehidden_iframe idhidden_iframe styledisplay:none;/iframescript typetext/javascriptfunction showUploadingMessage() {document.getElementById(uploadingMessage).style.display block;}function addMessage() {var iframe document.getElementById(hidden_iframe);iframe.onload function() {var content iframe.contentDocument || iframe.contentWindow.document;var message content.body.innerHTML;var messagesDiv document.getElementById(messages);messagesDiv.innerHTML p message /p;messagesDiv.style.display block;document.getElementById(uploadingMessage).style.display none;// 3秒后隐藏消息setTimeout(function() {messagesDiv.style.display none;location.href location.href;}, 3000);};return true;}/script
/body
/html
新模板的页面效果如下 ️ 如有疑问可以关注 我的知识库直接提问即可。
