要求: 1、客户端: (1)对三位候选人,可以投票和查询;投票针对某个人投票,查询显示三位候选人的票数; (2)设计一个简单输入界面,可进行投票和查询选择和投票时选择候选人; (3)收到服务器发回的信息要显示; 2、服务器: (1)设置数据结构保存当前三位候选人初始信息姓名、编号、票数等信息; (2)收到 投票请求 后,给该候选人票数加1,返回投票成功信息;如失败,返回投票失败提示信息及原因; (3)收到 查询请求 后,查询成功,返回三位候选人票数;查询失败的话,返回查询识别提示信息及原因。
时间: 2023-06-13 20:03:19 浏览: 91
好的,这个需求比较简单,我们可以使用 Python 和 Flask 框架来实现。首先需要安装 Flask 框架:
```
pip install Flask
```
然后创建一个名为 `app.py` 的 Python 文件,代码如下:
```python
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
candidates = [
{"id": 1, "name": "张三", "votes": 0},
{"id": 2, "name": "李四", "votes": 0},
{"id": 3, "name": "王五", "votes": 0}
]
@app.route("/")
def index():
return render_template("index.html", candidates=candidates)
@app.route("/vote", methods=["POST"])
def vote():
candidate_id = int(request.form["candidate_id"])
for candidate in candidates:
if candidate["id"] == candidate_id:
candidate["votes"] += 1
return jsonify({"success": True, "message": "投票成功!"})
return jsonify({"success": False, "message": "投票失败,候选人不存在!"})
@app.route("/query", methods=["POST"])
def query():
return jsonify({"success": True, "data": candidates})
if __name__ == "__main__":
app.run()
```
上面的代码中,我们使用 Flask 创建了一个 Web 应用,并定义了三个路由。`/` 路由是首页,展示三个候选人的信息和投票按钮;`/vote` 路由是投票接口,接收客户端发来的投票请求,修改对应候选人的票数,并返回投票成功或失败的信息;`/query` 路由是查询接口,接收客户端发来的查询请求,返回三位候选人的当前票数。
接下来,我们创建一个名为 `index.html` 的 HTML 文件,代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>投票</title>
</head>
<body>
<h1>投票</h1>
<table border="1">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>票数</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for candidate in candidates %}
<tr>
<td>{{ candidate.id }}</td>
<td>{{ candidate.name }}</td>
<td>{{ candidate.votes }}</td>
<td>
<button onclick="vote({{ candidate.id }})">投票</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<hr>
<button onclick="query()">查询</button>
<div id="query-result"></div>
<script>
function vote(candidateId) {
fetch("/vote", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: "candidate_id=" + candidateId
})
.then(response => response.json())
.then(data => alert(data.message));
}
function query() {
fetch("/query", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
var result = "";
for (var i = 0; i < data.data.length; i++) {
var candidate = data.data[i];
result += candidate.name + ":" + candidate.votes + "<br>";
}
document.getElementById("query-result").innerHTML = result;
} else {
alert("查询失败:" + data.message);
}
});
}
</script>
</body>
</html>
```
上面的代码中,我们使用 HTML 和 JavaScript 实现了一个简单的投票页面。页面中展示了三位候选人的信息和投票按钮,点击投票按钮会向 `/vote` 接口发送投票请求;页面中还有一个查询按钮,点击查询按钮会向 `/query` 接口发送查询请求,并在页面上展示三位候选人的当前票数。
最后,启动应用:
```
python app.py
```
访问 http://localhost:5000 即可看到投票页面。
阅读全文