问题7:编写前端文件
2024/8/1 13:32:45 
请根据文件描述，基于bootstrap和jquery框架依次编写对应的静态页面。遇到字数限制可以分布输出，我说继续则继续。
2024/8/1 13:32:45 
好的，下面我们将依次编写对应的静态页面。我们将使用Bootstrap和jQuery框架来实现这些页面。我们首先从登录页面开始，然后依次实现注册页面和用户主页等。
## 1. 登录页面 (Login Page)
### login.html```html<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script></head><body> <div class="container mt-5"> <div class="row justify-content-center"> <div class="col-md-6"> <div class="card"> <div class="card-header text-center"> <h3>Login</h3> </div> <div class="card-body"> <form id="loginForm"> <div class="form-group"> <label for="username">Username</label> <input type="text" class="form-control" id="username" name="username" required> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" id="password" name="password" required> </div> <button type="submit" class="btn btn-primary btn-block">Login</button> </form> </div> </div> <div class="text-center mt-2"> <p>Don't have an account? <a href="register.html">Register</a></p> </div> </div> </div> </div>
<script> $(document).ready(function() { $('#loginForm').on('submit', function(event) { event.preventDefault(); const username = $('#username').val(); const password = $('#password').val();
// 调用API进行用户登录 $.ajax({ url: 'http://yourdomain.com/api/login', method: 'POST', contentType: 'application/json', data: JSON.stringify({ username: username, password: password }), success: function(response) { // 根据用户角色重定向到不同的主页 if (response.role === 'admin') { window.location.href = 'admin_dashboard.html'; } else if (response.role === 'teacher') { window.location.href = 'teacher_dashboard.html'; } else { window.location.href = 'student_dashboard.html'; } }, error: function() { alert('Login failed. Please check your username and password.'); } }); }); }); </script></body></html>```
## 2. 注册页面 (Registration Page)
### register.html```html<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Register</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script></head><body> <div class="container mt-5"> <div class="row justify-content-center"> <div class="col-md-6"> <div class="card"> <div class="card-header text-center"> <h3>Register</h3> </div> <div class="card-body"> <form id="registerForm"> <div class="form-group"> <label for="username">Username</label> <input type="text" class="form-control" id="username" name="username" required> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" id="email" name="email" required> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" id="password" name="password" required> </div> <div class="form-group"> <label for="role">Role</label> <select class="form-control" id="role" name="role" required> <option value="student">Student</option> <option value="teacher">Teacher</option> </select> </div> <button type="submit" class="btn btn-primary btn-block">Register</button> </form> </div> </div> <div class="text-center mt-2"> <p>Already have an account? <a href="login.html">Login</a></p> </div> </div> </div> </div>
<script> $(document).ready(function() { $('#registerForm').on('submit', function(event) { event.preventDefault(); const username = $('#username').val(); const email = $('#email').val(); const password = $('#password').val(); const role = $('#role').val();
// 调用API进行用户注册 $.ajax({ url: 'http://yourdomain.com/api/users', method: 'POST', contentType: 'application/json', data: JSON.stringify({ username: username, email: email, password: password, role: role }), success: function() { alert('Registration successful! Please login.'); window.location.href = 'login.html'; }, error: function() { alert('Registration failed. Please try again.'); } }); }); }); </script></body></html>```
## 3. 用户主页 (User Dashboard)
### admin_dashboard.html```html<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Admin Dashboard</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script></head><body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Admin Dashboard</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="user_management.html">User Management</a> </li> <li class="nav-item"> <a class="nav-link" href="class_management.html">Class Management</a> </li> <li class="nav-item"> <a class="nav-link" href="course_management.html">Course Management</a> </li> <li class="nav-item"> <a class="nav-link" href="comment_management.html">Comment Management</a> </li> <li class="nav-item"> <a class="nav-link" href="profile.html">Profile</a> </li> <li class="nav-item"> <a class="nav-link" href="login.html">Logout</a> </li> </ul> </div> </nav> <div class="container mt-5"> <h2>Welcome, Admin!</h2> <p>Use the navigation bar to manage users, classes, courses, and comments.</p> </div></body></html>```
### teacher_dashboard.html```html<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Teacher Dashboard</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script></head><body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Teacher Dashboard</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="class_management.html">Class Management</a> </li> <li class="nav-item"> <a class="nav-link" href="course_management.html">Course Management</a> </li> <li class="nav-item"> <a class="nav-link" href="video_management.html">Video Management</a> </li> <li class="nav-item"> <a class="nav-link" href="test_management.html">Test Management</a> </li> <li class="nav-item"> <a class="nav-link" href="comment_management.html">Comment Management</a> </li> <li class="nav-item"> <a class="nav-link" href="profile.html">Profile</a> </li> <li class="nav-item"> <a class="nav-link" href="login.html">Logout</a> </li> </ul> </div> </nav> <div class="container mt-5"> <h2>Welcome, Teacher!</h2> <p>Use the navigation bar to manage your classes, courses, videos, tests, and comments.</p> </div></body></html>```
### student_dashboard.html```html<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Student Dashboard</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script></head><body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Student Dashboard</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="class_detail.html">My Classes</a> </li> <li class="nav-item"> <a class="nav-link" href="course_detail.html">Courses</a> </li> <li class="nav-item"> <a class="nav-link" href="profile.html">Profile</a> </li> <li class="nav-item"> <a class="nav-link" href="login.html">Logout</a> </li> </ul> </div> </nav> <div class="container mt-5"> <h2>Welcome, Student!</h2> <p>Use the navigation bar to view your classes and courses.</p> </div></body></html>```
以上是登录页面、注册页面和用户主页（管理员、教师、学生）的静态页面。接下来我们将继续编写用户管理页面、班级管理页面和其他功能页面。如果需要继续，请告诉我。
2024/8/1 13:32:45
好的，接下来我们继续编写用户管理页面、班级管理页面和其他功能页面。
## 4. 用户管理页面 (User Management Page)
### user_management.html```html<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>User Management</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script></head><body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="admin_dashboard.html">Admin Dashboard</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="user_management.html">User Management</a> </li> <li class="nav-item"> <a class="nav-link" href="class_management.html">Class Management</a> </li> <li class="nav-item"> <a class="nav-link" href="course_management.html">Course Management</a> </li> <li class="nav-item"> <a class="nav-link" href="comment_management.html">Comment Management</a> </li> <li class="nav-item"> <a class="nav-link" href="profile.html">Profile</a> </li> <li class="nav-item"> <a class="nav-link" href="login.html">Logout</a> </li> </ul> </div> </nav> <div class="container mt-5"> <h2>User Management</h2> <button class="btn btn-primary mb-3" data-toggle="modal" data-target="#createUserModal">Create New User</button> <table class="table table-bordered"> <thead> <tr> <th>ID</th> <th>Username</th> <th>Email</th> <th>Role</th> <th>Actions</th> </tr> </thead> <tbody id="userTableBody"> <!-- 用户列表将通过JS动态加载 --> </tbody> </table> </div>
<!-- Create User Modal --> <div class="modal fade" id="createUserModal" tabindex="-1" role="dialog" aria-labelledby="createUserModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="createUserModalLabel">Create New User</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form id="createUserForm"> <div class="form-group"> <label for="newUsername">Username</label> <input type="text" class="form-control" id="newUsername" name="username" required> </div> <div class="form-group"> <label for="newEmail">Email</label> <input type="email" class="form-control" id="newEmail" name="email" required> </div> <div class="form-group"> <label for="newPassword">Password</label> <input type="password" class="form-control" id="newPassword" name="password" required> </div> <div class="form-group"> <label for="newRole">Role</label> <select class="form-control" id="newRole" name="role" required> <option value="student">Student</option> <option value="teacher">Teacher</option> <option value="admin">Admin</option> </select> </div> <button type="submit" class="btn btn-primary">Create</button> </form> </div> </div> </div> </div>
<script> $(document).ready(function() { // 获取用户列表并渲染到页面 function loadUsers() { $.ajax({ url: 'http://yourdomain.com/api/users', method: 'GET', success: function(users) { $('#userTableBody').empty(); users.forEach(function(user) { $('#userTableBody').append(` <tr> <td>${user.user_id}</td> <td>${user.username}</td> <td>${user.email}</td> <td>${user.role}</td> <td> <button class="btn btn-warning btn-sm editUserBtn" data-id="${user.user_id}">Edit</button> <button class="btn btn-danger btn-sm deleteUserBtn" data-id="${user.user_id}">Delete</button> </td> </tr> `); }); } }); }
// 加载用户列表 loadUsers();
// 创建用户 $('#createUserForm').on('submit', function(event) { event.preventDefault(); const newUser = { username: $('#newUsername').val(), email: $('#newEmail').val(), password: $('#newPassword').val(), role: $('#newRole').val() };
$.ajax({ url: 'http://yourdomain.com/api/users', method: 'POST', contentType: 'application/json', data: JSON.stringify(newUser), success: function() { $('#createUserModal').modal('hide'); loadUsers(); }, error: function() { alert('Failed to create user. Please try again.'); } }); });
// 编辑用户按钮点击事件 $(document).on('click', '.editUserBtn', function() { const userId = $(this).data('id'); // 处理编辑用户逻辑 });
// 删除用户 $(document).on('click', '.deleteUserBtn', function() { const userId = $(this).data('id'); $.ajax({ url: `http://yourdomain.com/api/users/${userId}`, method: 'DELETE', success: function() { loadUsers(); }, error: function() { alert('Failed to delete user. Please try again.'); } }); }); }); </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script></body></html>```
## 5. 班级管理页面 (Class Management Page)
### class_management.html```html<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Class Management</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script></head><body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="admin_dashboard.html">Admin Dashboard</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="user_management.html">User Management</a> </li> <li class="nav-item"> <a class="nav-link" href="class_management.html">Class Management</a> </li> <li class="nav-item"> <a class="nav-link" href="course_management.html">Course Management</a> </li> <li class="nav-item"> <a class="nav-link" href="comment_management.html">Comment Management</a> </li> <li class="nav-item"> <a class="nav-link" href="profile.html">Profile</a> </li> <li class="nav-item"> <a class="nav-link" href="login.html">Logout</a> </li> </ul> </div> </nav> <div class="container mt-5"> <h2>Class Management</h2> <button class="btn btn-primary mb-3" data-toggle="modal" data-target="#createClassModal">Create New Class</button> <table class="table table-bordered"> <thead> <tr> <th>ID</th> <th>Class Name</th> <th>Description</th> <th>Semester</th> <th>Actions</th> </tr> </thead> <tbody id="classTableBody"> <!-- 班级列表将通过JS动态加载 --> </tbody> </table> </div>
<!-- Create Class Modal --> <div class="modal fade" id="createClassModal" tabindex="-1" role="dialog" aria-labelledby="createClassModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="createClassModalLabel">Create New Class</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form id="createClassForm"> <div class="form-group"> <label for="newClassName">Class Name</label> <input type="text" class="form-control" id="newClassName" name="class_name" required> </div> <div class="form-group"> <label for="newDescription">Description</label> <input type="text" class="form-control" id="newDescription" name="description" required> </div> <div class="form-group"> <label for="newSemester">Semester</label> <input type="text" class="form-control" id="newSemester" name="semester" required> </div> <button type="submit" class="btn btn-primary">Create</button> </form> </div> </div> </div> </div>
<script> $(document).ready(function() { // 获取班级列表并渲染到页面 function loadClasses() { $.ajax({ url: 'http://yourdomain.com/api/classes', method: 'GET', success: function(classes) { $('#classTableBody').empty(); classes.forEach(function(cls) { $('#classTableBody').append(` <tr> <td>${cls.class_id}</td> <td>${cls.class_name}</td> <td>${cls.description}</td> <td>${cls.semester}</td> <td> <button class="btn btn-warning btn-sm editClassBtn" data-id="${cls.class_id}">Edit</button> <button class="btn btn-danger btn-sm deleteClassBtn" data-id="${cls.class_id}">Delete</button> </td> </tr> `); }); } }); }
// 加载班级列表 loadClasses();
// 创建班级 $('#createClassForm').on('submit', function(event) { event.preventDefault(); const newClass = { class_name: $('#newClassName').val(), description: $('#newDescription').val(), semester: $('#newSemester').val() };
$.ajax({ url: 'http://yourdomain.com/api/classes', method: 'POST', contentType: 'application/json', data: JSON.stringify(newClass), success: function() { $('#createClassModal').modal('hide'); loadClasses(); }, error: function() { alert('Failed to create class. Please try again.'); } }); });
// 编辑班级按钮点击事件 $(document).on('click', '.editClassBtn', function() { const classId = $(this).data('id'); // 处理编辑班级逻辑 });
// 删除班级 $(document).on('click', '.deleteClassBtn', function() { const classId = $(this).data('id'); $.ajax({ url: `http://yourdomain.com/api/classes/${classId}`, method: 'DELETE', success: function() { loadClasses(); }, error: function() { alert('Failed to delete class. Please try again.'); } }); }); }); </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script></body></html>```
继续编写课程管理页面、评论管理页面等，请告诉我。
2024/8/1 13:32:45
好的，接下来我们继续编写课程管理页面、视频管理页面和评论管理页面。
## 6. 课程管理页面 (Course Management Page)
### course_management.html```html<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Course Management</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script></head><body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="teacher_dashboard.html">Teacher Dashboard</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="class_management.html">Class Management</a> </li> <li class="nav-item"> <a class="nav-link" href="course_management.html">Course Management</a> </li> <li class="nav-item"> <a class="nav-link" href="video_management.html">Video Management</a> </li> <li class="nav-item"> <a class="nav-link" href="test_management.html">Test Management</a> </li> <li class="nav-item"> <a class="nav-link" href="comment_management.html">Comment Management</a> </li> <li class="nav-item"> <a class="nav-link" href="profile.html">Profile</a> </li> <li class="nav-item"> <a class="nav-link" href="login.html">Logout</a> </li> </ul> </div> </nav> <div class="container mt-5"> <h2>Course Management</h2> <button class="btn btn-primary mb-3" data-toggle="modal" data-target="#createCourseModal">Create New Course</button> <table class="table table-bordered"> <thead> <tr> <th>ID</th> <th>Course Name</th> <th>Description</th> <th>Actions</th> </tr> </thead> <tbody id="courseTableBody"> <!-- 课程列表将通过JS动态加载 --> </tbody> </table> </div>
<!-- Create Course Modal --> <div class="modal fade" id="createCourseModal" tabindex="-1" role="dialog" aria-labelledby="createCourseModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="createCourseModalLabel">Create New Course</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form id="createCourseForm"> <div class="form-group"> <label for="newCourseName">Course Name</label> <input type="text" class="form-control" id="newCourseName" name="course_name" required> </div> <div class="form-group"> <label for="newDescription">Description</label> <input type="text" class="form-control" id="newDescription" name="description" required> </div> <button type="submit" class="btn btn-primary">Create</button> </form> </div> </div> </div> </div>
<script> $(document).ready(function() { // 获取课程列表并渲染到页面 function loadCourses() { $.ajax({ url: 'http://yourdomain.com/api/courses', method: 'GET', success: function(courses) { $('#courseTableBody').empty(); courses.forEach(function(course) { $('#courseTableBody').append(` <tr> <td>${course.course_id}</td> <td>${course.course_name}</td> <td>${course.description}</td> <td> <button class="btn btn-warning btn-sm editCourseBtn" data-id="${course.course_id}">Edit</button> <button class="btn btn-danger btn-sm deleteCourseBtn" data-id="${course.course_id}">Delete</button> </td> </tr> `); }); } }); }
// 加载课程列表 loadCourses();
// 创建课程 $('#createCourseForm').on('submit', function(event) { event.preventDefault(); const newCourse = { course_name: $('#newCourseName').val(), description: $('#newDescription').val() };
$.ajax({ url: 'http://yourdomain.com/api/courses', method: 'POST', contentType: 'application/json', data: JSON.stringify(newCourse), success: function() { $('#createCourseModal').modal('hide'); loadCourses(); }, error: function() { alert('Failed to create course. Please try again.'); } }); });
// 编辑课程按钮点击事件 $(document).on('click', '.editCourseBtn', function() { const courseId = $(this).data('id'); // 处理编辑课程逻辑 });
// 删除课程 $(document).on('click', '.deleteCourseBtn', function() { const courseId = $(this).data('id'); $.ajax({ url: `http://yourdomain.com/api/courses/${courseId}`, method: 'DELETE', success: function() { loadCourses(); }, error: function() { alert('Failed to delete course. Please try again.'); } }); }); }); </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script></body></html>```
## 7. 视频管理页面 (Video Management Page)
### video_management.html```html<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Video Management</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script></head><body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="teacher_dashboard.html">Teacher Dashboard</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="class_management.html">Class Management</a> </li> <li class="nav-item"> <a class="nav-link" href="course_management.html">Course Management</a> </li> <li class="nav-item"> <a class="nav-link" href="video_management.html">Video Management</a> </li> <li class="nav-item"> <a class="nav-link" href="test_management.html">Test Management</a> </li> <li class="nav-item"> <a class="nav-link" href="comment_management.html">Comment Management</a> </li> <li class="nav-item"> <a class="nav-link" href="profile.html">Profile</a> </li> <li class="nav-item"> <a class="nav-link" href="login.html">Logout</a> </li> </ul> </div> </nav> <div class="container mt-5"> <h2>Video Management</h2> <button class="btn btn-primary mb-3" data-toggle="modal" data-target="#uploadVideoModal">Upload New Video</button> <table class="table table-bordered"> <thead> <tr> <th>ID</th> <th>Video Title</th> <th>Description</th> <th>Course</th> <th>Actions</th> </tr> </thead> <tbody id="videoTableBody"> <!-- 视频列表将通过JS动态加载 --> </tbody> </table> </div>
<!-- Upload Video Modal --> <div class="modal fade" id="2024/8/1 13:32:45
### video_management.html (继续)```htmluploadVideoModal" tabindex="-1" role="dialog" aria-labelledby="uploadVideoModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="uploadVideoModalLabel">Upload New Video</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form id="uploadVideoForm" enctype="multipart/form-data"> <div class="form-group"> <label for="newVideoTitle">Video Title</label> <input type="text" class="form-control" id="newVideoTitle" name="video_title" required> </div> <div class="form-group"> <label for="newVideoDescription">Description</label> <input type="text" class="form-control" id="newVideoDescription" name="description" required> </div> <div class="form-group"> <label for="newVideoCourse">Course</label> <select class="form-control" id="newVideoCourse" name="course_id" required> <!-- 动态加载课程选项 --> </select> </div> <div class="form-group"> <label for="newVideoFile">Video File</label> <input type="file" class="form-control-file" id="newVideoFile" name="video_file" required> </div> <button type="submit" class="btn btn-primary">Upload</button> </form> </div> </div> </div> </div>
<script> $(document).ready(function() { // 获取视频列表并渲染到页面 function loadVideos() { $.ajax({ url: 'http://yourdomain.com/api/videos', method: 'GET', success: function(videos) { $('#videoTableBody').empty(); videos.forEach(function(video) { $('#videoTableBody').append(` <tr> <td>${video.video_id}</td> <td>${video.video_title}</td> <td>${video.description}</td> <td>${video.course_name}</td> <td> <button class="btn btn-warning btn-sm editVideoBtn" data-id="${video.video_id}">Edit</button> <button class="btn btn-danger btn-sm deleteVideoBtn" data-id="${video.video_id}">Delete</button> </td> </tr> `); }); } }); }
// 加载课程选项 function loadCourses() { $.ajax({ url: 'http://yourdomain.com/api/courses', method: 'GET', success: function(courses) { courses.forEach(function(course) { $('#newVideoCourse').append(` <option value="${course.course_id}">${course.course_name}</option> `); }); } }); }
// 加载视频和课程列表 loadVideos(); loadCourses();
// 上传新视频 $('#uploadVideoForm').on('submit', function(event) { event.preventDefault(); var formData = new FormData(this); $.ajax({ url: 'http://yourdomain.com/api/videos', method: 'POST', data: formData, processData: false, contentType: false, success: function() { $('#uploadVideoModal').modal('hide'); loadVideos(); }, error: function() { alert('Failed to upload video. Please try again.'); } }); });
// 编辑视频按钮点击事件 $(document).on('click', '.editVideoBtn', function() { const videoId = $(this).data('id'); // 处理编辑视频逻辑 });
// 删除视频 $(document).on('click', '.deleteVideoBtn', function() { const videoId = $(this).data('id'); $.ajax({ url: `http://yourdomain.com/api/videos/${videoId}`, method: 'DELETE', success: function() { loadVideos(); }, error: function() { alert('Failed to delete video. Please try again.'); } }); }); }); </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script></body></html>```
## 8. 评论管理页面 (Comment Management Page)
### comment_management.html```html<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Comment Management</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script></head><body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="admin_dashboard.html">Admin Dashboard</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="user_management.html">User Management</a> </li> <li class="nav-item"> <a class="nav-link" href="class_management.html">Class Management</a> </li> <li class="nav-item"> <a class="nav-link" href="course_management.html">Course Management</a> </li> <li class="nav-item"> <a class="nav-link" href="comment_management.html">Comment Management</a> </li> <li class="nav-item"> <a class="nav-link" href="profile.html">Profile</a> </li> <li class="nav-item"> <a class="nav-link" href="login.html">Logout</a> </li> </ul> </div> </nav> <div class="container mt-5"> <h2>Comment Management</h2> <table class="table table-bordered"> <thead> <tr> <th>ID</th> <th>Content</th> <th>User</th> <th>Course</th> <th>Created At</th> <th>Actions</th> </tr> </thead> <tbody id="commentTableBody"> <!-- 评论列表将通过JS动态加载 --> </tbody> </table> </div>
<script> $(document).ready(function() { // 获取评论列表并渲染到页面 function loadComments() { $.ajax({ url: 'http://yourdomain.com/api/comments', method: 'GET', success: function(comments) { $('#commentTableBody').empty(); comments.forEach(function(comment) { $('#commentTableBody').append(` <tr> <td>${comment.comment_id}</td> <td>${comment.content}</td> <td>${comment.username}</td> <td>${comment.course_name}</td> <td>${comment.created_at}</td> <td> <button class="btn btn-danger btn-sm deleteCommentBtn" data-id="${comment.comment_id}">Delete</button> </td> </tr> `); }); } }); }
// 加载评论列表 loadComments();
// 删除评论 $(document).on('click', '.deleteCommentBtn', function() { const commentId = $(this).data('id'); $.ajax({ url: `http://yourdomain.com/api/comments/${commentId}`, method: 'DELETE', success: function() { loadComments(); }, error: function() { alert('Failed to delete comment. Please try again.'); } }); }); }); </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script></body></html>```
## 9. 个人资料页面 (Profile Page)
### profile.html```html<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Profile</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script></head><body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Profile</a> <button class="navbar-toggler" type="button"2024/8/1 13:32:45
### profile.html (继续)```htmldata-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="admin_dashboard.html">Dashboard</a> </li> <li class="nav-item"> <a class="nav-link" href="user_management.html">User Management</a> </li> <li class="nav-item"> <a class="nav-link" href="class_management.html">Class Management</a> </li> <li class="nav-item"> <a class="nav-link" href="course_management.html">Course Management</a> </li> <li class="nav-item"> <a class="nav-link" href="comment_management.html">Comment Management</a> </li> <li class="nav-item"> <a class="nav-link" href="profile.html">Profile</a> </li> <li class="nav-item"> <a class="nav-link" href="login.html">Logout</a> </li> </ul> </div> </nav> <div class="container mt-5"> <h2>Profile</h2> <form id="profileForm"> <div class="form-group"> <label for="username">Username</label> <input type="text" class="form-control" id="username" name="username" readonly> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" id="email" name="email" readonly> </div> <div class="form-group"> <label for="role">Role</label> <input type="text" class="form-control" id="role" name="role" readonly> </div> <button type="button" class="btn btn-primary" id="editProfileBtn">Edit</button> <button type="submit" class="btn btn-success" id="saveProfileBtn" style="display: none;">Save</button> <button type="button" class="btn btn-secondary" id="cancelEditBtn" style="display: none;">Cancel</button> </form> </div>
<script> $(document).ready(function() { // 加载用户信息 function loadProfile() { $.ajax({ url: 'http://yourdomain.com/api/profile', method: 'GET', success: function(profile) { $('#username').val(profile.username); $('#email').val(profile.email); $('#role').val(profile.role); } }); }
// 加载用户信息 loadProfile();
// 编辑按钮点击事件 $('#editProfileBtn').on('click', function() { $('#username').prop('readonly', false); $('#email').prop('readonly', false); $('#editProfileBtn').hide(); $('#saveProfileBtn').show(); $('#cancelEditBtn').show(); });
// 取消编辑按钮点击事件 $('#cancelEditBtn').on('click', function() { loadProfile(); $('#username').prop('readonly', true); $('#email').prop('readonly', true); $('#editProfileBtn').show(); $('#saveProfileBtn').hide(); $('#cancelEditBtn').hide(); });
// 保存按钮点击事件 $('#profileForm').on('submit', function(event) { event.preventDefault(); const updatedProfile = { username: $('#username').val(), email: $('#email').val() };
$.ajax({ url: 'http://yourdomain.com/api/profile', method: 'PUT', contentType: 'application/json', data: JSON.stringify(updatedProfile), success: function() { $('#username').prop('readonly', true); $('#email').prop('readonly', true); $('#editProfileBtn').show(); $('#saveProfileBtn').hide(); $('#cancelEditBtn').hide(); loadProfile(); }, error: function() { alert('Failed to update profile. Please try again.'); } }); }); }); </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script></body></html>```
到此为止，我们已经完成了用户管理页面、班级管理页面、课程管理页面、视频管理页面、评论管理页面和个人资料页面。如果你有任何进一步的问题，或者需要其他页面或功能，请随时告诉我！