快捷導(dǎo)航

基于Python創(chuàng)建可定制的HTTP服務(wù)器

更新時(shí)間：2023年05月10日 14:35:55 作者：winfredzhang

這篇文章主要為大家演示一下如何使用?http.server?模塊來實(shí)現(xiàn)一個(gè)能夠發(fā)布網(wǎng)頁的應(yīng)用服務(wù)器，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下

1、編寫服務(wù)端代碼

命名為httpserver.py文件

import http.server
import socketserver
 
PORT = 8080
 
Handler = http.server.SimpleHTTPRequestHandler
 
with socketserver.TCPServer(("", PORT), Handler) as httpd:
    print(f"Serving at port {PORT}")
    httpd.serve_forever()

這個(gè)應(yīng)用服務(wù)器將會在本地的 8080 端口監(jiān)聽來自客戶端的 HTTP 請求，并將當(dāng)前目錄下的網(wǎng)頁文件（如 HTML、CSS、JS 等）發(fā)布給客戶端。

要使用這個(gè)應(yīng)用服務(wù)器，只需要將網(wǎng)頁文件放在當(dāng)前目錄下，然后在終端中運(yùn)行上述 Python 腳本即可。在瀏覽器中訪問 http://localhost:8080 即可訪問網(wǎng)頁。

2、編寫網(wǎng)頁html+css文件

命名為index.html和style.css文件

index.html：

<!DOCTYPE html>
<html>
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>登錄頁面</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
      <form>
        <h2>歡迎登錄</h2>
        <label for="username"><b>用戶名</b></label>
        <input type="text" placeholder="請輸入用戶名" name="username" required>
        <label for="password"><b>密碼</b></label>
        <input type="password" placeholder="請輸入密碼" name="password" required>
        <button type="submit">登錄</button>
      </form>
    </div>
  </body>
</html>

style.css:

body {
  background-color: #F8F8F8;
  font-family: Arial, sans-serif;
}
.container {
  width: 400px;
  margin: 0 auto;
  margin-top: 50px;
  background-color: #FFFFFF;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #888888;
}
form {
  display: flex;
  flex-direction: column;
}
h2 {
  text-align: center;
  margin-bottom: 20px;
}
label {
  font-size: 18px;
  margin-bottom: 10px;
}
input[type="text"],
input[type="password"] {
  padding: 10px;
  margin-bottom: 20px;
  border: none;
  border-radius: 5px;
  box-shadow: 0px 0px 5px #888888;
}
button[type="submit"] {
  background-color: #4CAF50;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
  padding: 10px;
  margin-top: 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button[type="submit"]:hover {
  background-color: #3E8E41;
}