大家好,今天我们来聊聊如何搭建一个一站式的网上服务大厅,并且在其中加入排行功能。这个项目不仅能够帮助我们更好地管理各种服务,还能让用户体验到更加透明和有趣的服务过程。
准备工作
首先,我们需要准备一些基础的东西,比如Python环境、Flask框架以及MySQL数据库。安装这些工具后,我们可以开始搭建我们的服务大厅了。
数据库设计
我们要创建两个表:一个是用户表(users),另一个是服务记录表(service_records)。用户表需要包含用户的ID、用户名等基本信息;服务记录表则需要包含服务的ID、用户ID、服务类型和时间戳等信息。
# 用户表
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(255) NOT NULL UNIQUE
);
# 服务记录表
CREATE TABLE service_records (
id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT NOT NULL,
service_type VARCHAR(255),
timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users(id)
);
后端逻辑
接下来是后端逻辑部分,这里我们会用到Flask来处理请求和响应。我们需要创建几个API接口,包括注册用户、提交服务记录、获取排行榜等。
from flask import Flask, request, jsonify
from flask_mysqldb import MySQL
app = Flask(__name__)
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = 'service_hall'
mysql = MySQL(app)
@app.route('/register', methods=['POST'])
def register():
username = request.json.get('username')
cur = mysql.connection.cursor()
cur.execute("INSERT INTO users (username) VALUES (%s)", [username])
mysql.connection.commit()
return jsonify({'message': 'User registered successfully'})
@app.route('/submit_record', methods=['POST'])
def submit_record():
user_id = request.json.get('user_id')
service_type = request.json.get('service_type')
cur = mysql.connection.cursor()
cur.execute("INSERT INTO service_records (user_id, service_type) VALUES (%s, %s)", [user_id, service_type])
mysql.connection.commit()
return jsonify({'message': 'Service record submitted successfully'})
@app.route('/top_users', methods=['GET'])
def top_users():
cur = mysql.connection.cursor()
cur.execute("SELECT u.username, COUNT(s.id) as count FROM users u JOIN service_records s ON u.id = s.user_id GROUP BY u.id ORDER BY count DESC LIMIT 10")
results = cur.fetchall()
return jsonify(results)
if __name__ == '__main__':
app.run(debug=True)
前端展示
最后一步是前端展示,我们可以通过简单的HTML和JavaScript来展示排行榜。这里使用了一个简单的表格来显示前10名用户及其服务次数。
<table>
<thead>
<tr><th>Username</th><th>Service Count</th></tr>
</thead>
<tbody id="rank-table"></tbody>
</table>
<script>
fetch('/top_users')
.then(response => response.json())
.then(data => {
const tableBody = document.getElementById('rank-table');
data.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${item.username}</td>
<td>${item.count}</td>
`;
tableBody.appendChild(row);
});
});
</script>