用python做一个体育馆管理系统网页
时间: 2023-11-23 17:07:26 浏览: 117
实现一个体育馆管理系统的网页需要以下几个步骤:
1. 设计数据库表结构:需要设计数据库表来存储场馆信息、用户信息、预约信息等数据。
2. 编写后端代码:使用 Python 编写后端代码,连接数据库,实现用户注册、登录、预约、取消预约等功能。
3. 设计前端界面:使用 HTML、CSS 和 JavaScript 设计前端界面,实现用户交互。
以下是一个简单的体育馆管理系统网页的实现示例:
1. 设计数据库表结构:
在 MySQL 中创建以下三个表:
```sql
CREATE TABLE `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(255) NOT NULL,
`password` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
);
CREATE TABLE `venues` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`capacity` int(11) NOT NULL,
PRIMARY KEY (`id`)
);
CREATE TABLE `bookings` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`user_id` int(11) NOT NULL,
`venue_id` int(11) NOT NULL,
`start_time` datetime NOT NULL,
`end_time` datetime NOT NULL,
PRIMARY KEY (`id`)
);
```
2. 编写后端代码:
使用 Flask 框架编写后端代码,实现用户注册、登录、预约、取消预约等功能。以下是部分代码示例:
```python
from flask import Flask, request, session, redirect, url_for, render_template
from flask_mysqldb import MySQL
from datetime import datetime
app = Flask(__name__)
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = 'password'
app.config['MYSQL_DB'] = 'gym'
mysql = MySQL(app)
@app.route('/')
def index():
if 'username' in session:
return redirect(url_for('bookings'))
else:
return redirect(url_for('login'))
@app.route('/register', methods=['GET', 'POST'])
def register():
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
cur = mysql.connection.cursor()
cur.execute('INSERT INTO users (username, password) VALUES (%s, %s)', (username, password))
mysql.connection.commit()
cur.close()
return redirect(url_for('login'))
else:
return render_template('register.html')
@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
cur = mysql.connection.cursor()
cur.execute('SELECT * FROM users WHERE username = %s AND password = %s', (username, password))
user = cur.fetchone()
cur.close()
if user:
session['username'] = user[1]
return redirect(url_for('bookings'))
else:
return render_template('login.html', error='Incorrect username or password')
else:
return render_template('login.html')
@app.route('/logout')
def logout():
session.pop('username', None)
return redirect(url_for('login'))
@app.route('/bookings')
def bookings():
if 'username' in session:
cur = mysql.connection.cursor()
cur.execute('SELECT bookings.id, venues.name, bookings.start_time, bookings.end_time FROM bookings INNER JOIN venues ON bookings.venue_id = venues.id WHERE bookings.user_id = %s ORDER BY bookings.start_time', (session['username'],))
bookings = cur.fetchall()
cur.close()
return render_template('bookings.html', bookings=bookings)
else:
return redirect(url_for('login'))
@app.route('/book', methods=['GET', 'POST'])
def book():
if request.method == 'POST':
venue_id = request.form['venue_id']
start_time = datetime.strptime(request.form['start_time'], '%Y-%m-%d %H:%M')
end_time = datetime.strptime(request.form['end_time'], '%Y-%m-%d %H:%M')
cur = mysql.connection.cursor()
cur.execute('INSERT INTO bookings (user_id, venue_id, start_time, end_time) VALUES (%s, %s, %s, %s)', (session['username'], venue_id, start_time, end_time))
mysql.connection.commit()
cur.close()
return redirect(url_for('bookings'))
else:
cur = mysql.connection.cursor()
cur.execute('SELECT * FROM venues')
venues = cur.fetchall()
cur.close()
return render_template('book.html', venues=venues)
```
3. 设计前端界面:
使用 HTML、CSS 和 JavaScript 设计前端界面。以下是部分代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>GYM Management System</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div class="container">
<h1>GYM Management System</h1>
{% if 'username' in session %}
<p>Welcome, {{ session['username'] }}!</p>
<ul>
<li><a href="{{ url_for('bookings') }}">My Bookings</a></li>
<li><a href="{{ url_for('book') }}">Book a Venue</a></li>
<li><a href="{{ url_for('logout') }}">Logout</a></li>
</ul>
{% block content %}
{% endblock %}
{% else %}
{% block content %}
{% endblock %}
{% endif %}
</div>
</body>
</html>
```
```css
.container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 3rem;
margin-top: 2rem;
}
form {
display: inline-block;
text-align: left;
}
table {
border-collapse: collapse;
margin: 2rem auto;
}
th, td {
padding: 0.5rem;
border: 1px solid #ccc;
}
th {
background-color: #f0f0f0;
}
button {
padding: 0.5rem 1rem;
border: none;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #0069d9;
}
.error {
color: red;
}
```
```javascript
function validateForm() {
var venue_id = document.forms["book-form"]["venue_id"].value;
var start_time = document.forms["book-form"]["start_time"].value;
var end_time = document.forms["book-form"]["end_time"].value;
if (venue_id == "") {
alert("Please select a venue.");
return false;
}
if (start_time == "" || end_time == "") {
alert("Please select a start time and an end time.");
return false;
}
if (new Date(start_time) >= new Date(end_time)) {
alert("End time must be later than start time.");
return false;
}
}
```
阅读全文