### 使用 Python、HTML5 和 MySQL 构建教学数据信息管理系统的解决方案 构建一个教学数据信息管理系统需要结合后端（Python + MySQL）和前端（HTML5）技术。以下是一个完整的解决方案，包括架构设计、关键步骤以及示例代码。 #### 1. 系统架构设计 系统分为三个主要部分： - **前端**：使用 HTML5、CSS3 和 JavaScript 构建用户界面。 - **后端**：使用 Python 的 Flask 或 Django 框架处理业务逻辑，并通过 `mysql-connector-python` 库与 MySQL 数据库交互。 - **数据库**：使用 MySQL 存储教学相关的数据，例如学生信息、课程信息和成绩记录。 #### 2. 安装必要的库 在开始开发之前，需要安装以下库： - `mysql-connector-python`：用于连接 MySQL 数据库[^1]。 - `Flask`：轻量级的 Web 框架，用于处理 HTTP 请求和响应[^2]。 可以通过以下命令安装这些库： ```bash pip install mysql-connector-python flask ``` #### 3. 数据库设计 创建一个名为 `teaching_system` 的数据库，并设计以下表结构： - **students**：存储学生信息。 ```sql CREATE TABLE students ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(100) NOT NULL, age INT NOT NULL, gender ENUM('Male', 'Female') NOT NULL ); ``` - **courses**：存储课程信息。 ```sql CREATE TABLE courses ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(100) NOT NULL, description TEXT ); ``` - **grades**：存储学生成绩。 ```sql CREATE TABLE grades ( id INT AUTO_INCREMENT PRIMARY KEY, student_id INT NOT NULL, course_id INT NOT NULL, score DECIMAL(5, 2) NOT NULL, FOREIGN KEY (student_id) REFERENCES students(id), FOREIGN KEY (course_id) REFERENCES courses(id) ); ``` #### 4. 后端实现 以下是基于 Flask 的后端代码示例，展示如何连接 MySQL 数据库并执行基本操作。 ```python from flask import Flask, request, jsonify, render_template import mysql.connector # 初始化 Flask 应用 app = Flask(__name__) # 连接 MySQL 数据库 def connect_db(): return mysql.connector.connect( host="localhost", user="root", password="password", database="teaching_system" ) # 主页路由 @app.route('/') def index(): return render_template('index.html') # 添加学生信息 @app.route('/add_student', methods=['POST']) def add_student(): data = request.json conn = connect_db() cursor = conn.cursor() cursor.execute("INSERT INTO students (name, age, gender) VALUES (%s, %s, %s)", (data['name'], data['age'], data['gender'])) conn.commit() cursor.close() conn.close() return jsonify({"message": "Student added successfully!"}) # 查询所有学生信息 @app.route('/get_students', methods=['GET']) def get_students(): conn = connect_db() cursor = conn.cursor(dictionary=True) cursor.execute("SELECT * FROM students") students = cursor.fetchall() cursor.close() conn.close() return jsonify(students) if __name__ == '__main__': app.run(debug=True) ``` #### 5. 前端实现 以下是一个简单的 HTML 页面，用于显示学生信息并允许添加新学生。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Teaching Data Management System</title> </head> <body> <h1>Student Information</h1> <button onclick="fetchStudents()">Get Students</button> <ul id="student-list"></ul> <h2>Add New Student</h2> <form id="student-form"> <input type="text" id="name" placeholder="Name" required> <input type="number" id="age" placeholder="Age" required> <select id="gender" required> <option value="Male">Male</option> <option value="Female">Female</option> </select> <button type="submit">Add Student</button> </form> <script> function fetchStudents() { fetch('/get_students') .then(response => response.json()) .then(data => { const list = document.getElementById('student-list'); list.innerHTML = ''; data.forEach(student => { const li = document.createElement('li'); li.textContent = `${student.name} (${student.age}, ${student.gender})`; list.appendChild(li); }); }); } document.getElementById('student-form').addEventListener('submit', function(event) { event.preventDefault(); const name = document.getElementById('name').value; const age = document.getElementById('age').value; const gender = document.getElementById('gender').value; fetch('/add_student', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name, age, gender }) }).then(() => alert('Student added!')); }); </script> </body> </html> ``` #### 6. 总结 上述示例展示了如何使用 Python、HTML5 和 MySQL 构建一个简单的教学数据信息管理系统。后端使用 Flask 处理请求并与数据库交互，前端使用 HTML5 和 JavaScript 提供用户界面。 ---