好的，让我们一步一步来实现这个功能。
首先，我们需要创建一个文件夹来存放我们的代码和数据文件。我们可以在文件夹中创建以下文件：
- index.html：包含我们的 HTML 页面代码。
- main.py：包含我们的 Python 代码。
- data.csv：包含密保号码和对应的时间值。
- log.csv：记录密保号码存储的日志。
下面是 HTML 代码，你可以将其复制到 index.html 文件中。
```html
<!DOCTYPE html>
<html>
<head>
<title>一键通系统
- 零一技术 ×
华为云服务</title>
<style>
body {
font
-family: Arial,
sans-serif;
background
-color: #f2f2f2;
margin: 0;
padding: 0;
}
h1 {
text
-align: center;
font
-size: 36px;
font
-weight: bold;
margin
-top: 50px;
}
h2 {
text
-align: center;
color: #666;
font
-size: 24px;
font
-weight: normal;
margin
-top: 20px;
margin
-bottom: 50px;
}
form {
width: 500px;
margin: 0 auto;
background
-color: #fff;
padding: 20px;
border
-radius: 5px;
box
-shadow: 0 0 10px rgba(0,0,0,0.2);
}
label {
display: block;
margin
-bottom: 10px;
font
-size: 18px;
font
-weight: bold;
color: #333;
}
input[type="text"] {
width: 100%;
padding: 10px;
font
-size: 16px;
border: 1px solid #ccc;
border
-radius: 5px;
margin
-bottom: 20px;
box
-sizing: border
-box;
}
input[type="submit"] {
display: block;
margin: 0 auto;
background
-color: #4CAF50;
color: #fff;
font
-size: 18px;
font
-weight: bold;
border: none;
padding: 10px 20px;
border
-radius: 5px;
cursor: pointer;
}
.error {
color: red;
font
-size: 16px;
font
-weight: bold;
margin
-top: 20px;
}
.output {
width: 100%;
padding: 10px;
font
-size: 16px;
border: 1px solid #ccc;
border
-radius: 5px;
box
-sizing: border
-box;
margin
-bottom: 20px;
}
</style>
</head>
<body>
<h1>一键通系统</h1>
<h2>零一技术 ×
华为云服务</h2>
<form method="post">
<label for="security
-code">密保号码 *</label>
<input type="text" id="security
-code" name="security
-code" required>
<label for="phone
-1">手机号一 *</label>
<input type="text" id="phone
-1" name="phone
-1" required>
<label for="phone
-2">手机号二 *</label>
<input type="text" id="phone
-2" name="phone
-2" required>
<input type="submit" value="提交">
</form>
<div class="output"></div>
<script>
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
var securityCode = document.getElementById('security
-code').value;
var phone1 = document.getElementById('phone
-1').value;
var phone2 = document.getElementById('phone
-2').value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.querySelector('.output').textContent = xhr.responseText;
}
};
xhr.open('POST', '/submit');
xhr.setRequestHeader('Content
-Type', 'application/x
-www
-form
-urlencoded');
xhr.send('security
-code=' + encodeURIComponent(securityCode) + '&phone
-1=' + encodeURIComponent(phone1) + '&phone
-2=' + encodeURIComponent(phone2));
});
</script>
</body>
</html>
```
接下来，我们来编写 Python 代码。你可以将以下代码复制到 main.py 文件中。
```python
from http.server import BaseHTTPRequestHandler, HTTPServer
import csv
import urllib.parse
import json
import datetime
# 读取 data.csv 文件
with open('data.csv', 'r') as f:
reader = csv.reader(f)
data = {}
for row in reader:
data[row[0]] = int(row[1])
# 定义处理 POST 请求的函数
def handle_post_request(params):
# 读取密保号码
security_code = params.get('security
-code')
if not security_code:
return '密保号码不能为空'
# 根据密保号码查找对应的时间值
time = data.get(security_code)
if not time:
return '密保号码错误'
# 读取手机号码
phone1 = params.get('phone
-1')
phone2 = params.get('phone
-2')
if not phone1 or not phone2:
return '手机号码不能为空'
# 向
华为云服务端发送请求
# 在这里填写你的代码，调用
华为云服务的 API 并获取响应
# 将密保号码和当前时间写入 log.csv 文件
with open('log.csv', 'a', newline='') as f:
writer = csv.writer(f)
writer.writerow([security_code, datetime.datetime.now().strftime('%Y
-%m
-%d %H:%M:%S')])
# 返回中转号码
return '中转号码：123456789'
# 定义处理请求的类
class RequestHandler(BaseHTTPRequestHandler):
def do_POST(self):
# 解析 POST 请求参数
content_length = int(self.headers['Content
-Length'])
post_data = self.rfile.read(content_length)
params = urllib.parse.parse_qs(post_data.decode('utf
-8'))
# 处理请求并返回响应
response = handle_post_request(params)
self.send_response(200)
self.send_header('Content
-type', 'text/plain')
self.end_headers()
self.wfile.write(response.encode('utf
-8'))
# 启动 HTTP 服务器
def run(server_class=HTTPServer, handler_class=RequestHandler, port=8000):
server_address = ('', port)
httpd = server_class(server_address, handler_class)
print('Starting httpd on port %d...' % port)
httpd.serve_forever()
if __name__ == '__main__':
run()
```
最后，我们需要在命令行中进入我们的文件夹，并运行 Python 代码。在命令行中输入以下命令：
```
python main.py
```
这将启动一个 HTTP 服务器，监听端口 8000。然后在浏览器中输入 http://localhost:8000，就可以看到我们的页面了。
当你填写完三个输入框并点击提交按钮时，页面将向我们的 HTTP 服务器发送 POST 请求，并将输入框中的内容作为参数传递给我们的 Python 代码。我们的 Python 代码将读取这些参数，并根据密保号码查找对应的时间值。然后，它将向
华为云服务端发送请求，获取中转号码，并将密保号码和当前时间写入 log.csv 文件。最后，它将返回中转号码，并将其显示在输出框中。
希望这个示例能够帮助你理解如何使用 HTML 和 Python 来开发 Web 程序。
扫一扫
607
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
