增加teacher登陆和teacher主页

Html/static/js/login.js

@@ -1,47 +1,78 @@
 document.addEventListener('DOMContentLoaded', function() {
-    // 获取登录表单及按钮
-    const loginForm = document.querySelector('.login-form');
-    const loginButton = document.querySelector('.login-btn');
+    const switchRoleButton = document.getElementById('switch-role');
+    const loginForm = document.getElementById('login-form');
+    const usernameLabel = document.getElementById('username-label');
     const usernameInput = document.getElementById('username');
     const passwordInput = document.getElementById('password');
-    
-    // 在点击登录按钮时提交表单
-    loginButton.addEventListener('click', function(event) {
-        event.preventDefault();  // 防止表单的默认提交行为
-        
-        // 获取输入框的值
+    const registerLinkHref = document.getElementById('register-link-href');
+
+    let isTeacherLogin = false;
+
+    // 切换角色按钮点击事件
+    switchRoleButton.addEventListener('click', function() {
+        isTeacherLogin = !isTeacherLogin;  // 切换状态
+        toggleButtonColor(isTeacherLogin);
+        toggleLoginFields(isTeacherLogin);
+    });
+    // 根据角色切换按钮背景色
+    function toggleButtonColor(isTeacher) {
+        if (isTeacher) {
+            loginForm.classList.add('teacher-login');
+        } else {
+            loginForm.classList.remove('teacher-login');
+        }
+    }
+    // 切换显示不同的表单字段
+    function toggleLoginFields(isTeacher) {
+        if (isTeacher) {
+            // 显示教师登录字段
+            usernameLabel.textContent = '教师用户名';
+            switchRoleButton.textContent = '切换到学生登录'; // 更新按钮文本
+            registerLinkHref.href = '/register_teacher';
+            registerLinkHref.textContent = '注册新教师账号';
+        } else {
+            // 显示学生登录字段
+            usernameLabel.textContent = '学生用户名';
+            switchRoleButton.textContent = '切换到教师登录'; // 更新按钮文本
+            registerLinkHref.href = '/register';
+            registerLinkHref.textContent = '注册新学生账号';
+        }
+    }
+
+    // 处理登录提交
+    loginForm.addEventListener('submit', function(event) {
+        event.preventDefault();  // 防止默认提交
+
         const username = usernameInput.value.trim();
         const password = passwordInput.value.trim();
-        
-        // 检查输入框是否为空
+
         if (!username || !password) {
-            alert('用户名和密码不能为空');
+            alert('请填写所有必需的字段');
             return;
         }
 
-        // 显示加载提示
-        loginButton.innerHTML = '登录中...';
-        loginButton.disabled = true;
-        
-        // 创建一个请求对象
-        const data = {
-            username: username,
-            password: password
-        };
-        
-        // 使用 Fetch API 发送 POST 请求到 Flask 后端
-        fetch('/login_post', {
+        // 登录请求的 URL 依据角色不同而不同
+        const loginUrl = isTeacherLogin ? '/login_teacher_post' : '/login_post';
+
+        const data = isTeacherLogin ? { username, password } : { username, password };
+
+        // 发送登录请求
+        fetch(loginUrl, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
             },
-            body: JSON.stringify(data)  // 将数据转换为 JSON 格式发送
+            body: JSON.stringify(data)  // 将数据发送到后端
         })
-        .then(response => response.json())  // 解析响应数据
+        .then(response => response.json())
         .then(data => {
             if (data.success) {
                 // 登录成功，跳转到主页
-                window.location.href = '/dashboard';  // 根据需要修改跳转的路径
+                if (isTeacherLogin) {
+                    window.location.href = '/teacherboard';
+                } else {
+                    window.location.href = '/dashboard';
+                }
             } else {
                 // 登录失败，提示错误信息
                 alert('登录失败: ' + data.message);
@@ -50,11 +81,7 @@ document.addEventListener('DOMContentLoaded', function() {
         .catch(error => {
             console.error('Error:', error);
             alert('登录请求失败，请稍后重试');
-        })
-        .finally(() => {
-            // 恢复按钮状态
-            loginButton.innerHTML = '登录';
-            loginButton.disabled = false;
         });
     });
+
 });

Html/static/js/register_teacher.js

@@ -0,0 +1,41 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const registerTeacherForm = document.getElementById('register-teacher-form');
+
+    registerTeacherForm.addEventListener('submit', function(event) {
+        event.preventDefault(); // 阻止表单默认提交行为
+
+        const username = document.getElementById('teacher-username').value;
+        const email = document.getElementById('teacher-email').value;
+        const password = document.getElementById('teacher-password').value;
+        const confirmPassword = document.getElementById('teacher-confirm-password').value;
+
+        // 检查密码和确认密码是否一致
+        if (password !== confirmPassword) {
+            alert('密码和确认密码不一致');
+            return;
+        }
+
+        // 使用 Fetch API 发送注册请求
+        fetch('/register_teacher_post', {  // 教师注册路由
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRFToken': '{{ csrf_token() }}' // 如果使用 CSRF 保护
+            },
+            body: JSON.stringify({ username, email, password })  // 发送数据
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                alert('教师注册成功');
+                window.location.href = '/login'; // 注册成功后跳转到登录页面
+            } else {
+                alert('注册失败: ' + data.message);
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            alert('注册失败');
+        });
+    });
+});

Html/static/js/teacherboard.js

@@ -0,0 +1,69 @@
+function show_teacher_data(user_data, user_course_data) {
+    // 这里可以根据user_course_data生成课程卡片
+    const courseCardsContainer = document.getElementById('course-cards');
+    user_course_data.forEach(course => {
+        const courseCard = document.createElement('div');
+        courseCard.classList.add('course-card');
+        courseCard.onclick = function() { openCourseDetails(course.id); };
+        courseCard.innerHTML = `
+            <img src="${course.cover_image}" alt="课程封面" class="course-image">
+            <div class="course-info">
+                <h3 class="course-name">${course.name}</h3>
+                <p class="course-description">${course.description}</p>
+            </div>
+        `;
+        courseCardsContainer.appendChild(courseCard);
+    });
+}
+
+function openCourseDetails(courseId) {
+    // 打开课程目录
+    const courseDetails = document.getElementById('courseDetails');
+    const courseTitle = document.getElementById('course-title');
+    courseTitle.textContent = "课程名称: " + courseId; // 假设这里显示课程ID，实际情况应该是课程名称
+    courseDetails.style.display = 'block';
+
+    // 获取章节数据并渲染
+    renderChapters(courseId);
+}
+
+function closeCourseDetails() {
+    document.getElementById('courseDetails').style.display = 'none';
+}
+
+function renderChapters(courseId) {
+    const chapterList = document.getElementById('chapter-list');
+    chapterList.innerHTML = ""; // 清空章节列表
+    // 假设从服务器获取课程章节数据
+    const chapters = [
+        { title: "第一章：算法基础", lessons: ["算法简介", "算法设计方法"] },
+        { title: "第二章：数据结构", lessons: ["数组", "链表"] }
+    ];
+
+    chapters.forEach(chapter => {
+        const chapterItem = document.createElement('li');
+        chapterItem.innerHTML = `
+            <strong>${chapter.title}</strong>
+            <ul>
+                ${chapter.lessons.map(lesson => `<li>${lesson} <button onclick="editLesson('${lesson}')">编辑</button></li>`).join('')}
+            </ul>
+            <button onclick="addLesson('${chapter.title}')">新增课时</button>
+        `;
+        chapterList.appendChild(chapterItem);
+    });
+}
+
+function addChapter() {
+    // 新增章节的逻辑
+    alert("新增章节功能");
+}
+
+function addLesson(chapterTitle) {
+    // 新增课时的逻辑
+    alert("新增课时功能: " + chapterTitle);
+}
+
+function editLesson(lesson) {
+    // 编辑课时的逻辑
+    alert("编辑课时: " + lesson);
+}