whttpserver 是一個簡單的HTTP服務器，類似于python -m http.server，但增加了文件上傳和編輯的功能。
1. 安裝 whttpserver 模塊
# 臨時設置環境變量 PYTHONUTF8=1，強制 Python 使用 UTF-8 編碼
set PYTHONUTF8=1
pip install whttpserver2. 啟動服務
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 lang="zh">
<head><title>Directory listing for {{the_path}}</title><style>* {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>
<body><div class="header"><div class="breadcrumb"><a href="/">根目錄</a><span>?</span><a href="{{ parent_path }}">上一級</a></div><h3><input type="button" value="刷 新" class="refresh-btn" onclick="javascript: location.href = location.href;"></h3><h3>文件目錄管理器</h3></div><div class="upload-section"><form class="upload-form" method="post" action="/upload?path={{req_path}}" enctype="multipart/form-data" target="hidden_iframe" onsubmit="return addMessage();"><input type="file" name="file" class="file-input"><input type="submit" value="上傳文件" class="upload-btn" onclick="showUploadingMessage();"></form><div id="messages" class="messages"></div><div id="uploadingMessage" class="uploading-message" style="display:none;">正在上傳文件，請稍候...</div></div><div class="table-container"><div class="table-header"><h4>當前目錄: {{the_path}}</h4></div><div class="table-scroll"><table><thead><tr><th>文件名稱</th><th>文件類別</th><th>文件大小</th><th>訪問權限</th><th>所屬用戶</th><th>所屬組</th> <th>最后修改時間</th></tr></thead><tbody>{% for item in data %}<tr class="{{ item.type }}"><td><a href="{{ item.href }}" class="{{ item.type }}">{{ item.name }}</a></td><td>{{ item.type }}</td><td>{{ item.size }}</td><td>{{ item.permissions }}</td><td>{{ item.owner }}</td><td>{{ item.group }}</td><td>{{ item.mtime }}</td></tr>{% endfor %}</tbody></table></div></div><div class="footer"><p>文件目錄管理系統 | 優雅簡潔的文件瀏覽體驗</p></div><iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"></iframe><script type="text/javascript">function 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>新模板的頁面效果如下：
?
🏷? 如有疑問，可以關注?我的知識庫，直接提問即可。?
