《云上课堂》

肯定慧
80 阅读4分钟

一、项目目的

由于现在大学生上课坐座位比较分散，且老师又要教多个班级不可能记住所有同学的名字。那么我们可以通过《云上课堂》这个项目去统计每个同学实际的座位和姓名，实现师生更好的交流提升教学质量。

二、思想构成

前端使用vue3+vite模拟每个教室的布局，其中vue3组件包括登录界面、座位可视化效果，教室实际结构(前门、后门、讲台，座位数和座位号等)。后端提供数据接口、用户验证、座位数据存取等功能，通过API.js暴露接口供前端调用。mongdb用于存储学生学号、姓名、辅导员等信息做到随用随取。

三、前端实现

1、前端渲染

登录界面： 通过输入正确的学号和姓名，进入选座界面。 image.png

登录错误1： 假设输入的学号错误，会通过弹窗提示你正确的学号格式。
image.png

登录错误2：
假设输入的姓名和学号不匹配，会通过弹窗提示你登录失败。
image.png

登录错误3： 没有连接网络的情况下，通过弹窗提示你登录失败。 image.png

选座界面： 在登录界面输入了正确的学号和信息，点击登录按钮，跳转到选座界面。选座界面将选座时间段和教室号集成在一起，使得学生可以快速的通过教室号按钮找到自己想选的教室座位。 image.png

确认选座： 学生点击完自己的座位后，弹出提示框，询问你是否确定锁定座位XX。可防止误触选择到其不想选择的座位。 image.png

获取座位token值： 学生确定自己的座位后，会匹配一个token值。 image.png

选座成功： 单击确定，你就选座成功啦！同时你也可以看到其他同学选的座位，在此之外还可以通过下拉列表查找其他时间段的教室情况。 image.png

2、逻辑判断

登录逻辑：

  1. 收集学生输入的登录信息，将其转换为字符串格式，并拼接到API的URL中。
  2. 使用fetch函数向后端API发送GET请求。
  3. 检查响应状态，解析响应数据，并根据响应结果处理登录成功或失败的情况。
  4. 如果登录成功，将返回的token存储到localStorage中，并跳转到主页。
  5. 捕获并处理可能出现的错误，提示用户登录失败。
const handleLogin = async () => {
	try {
		// 定义请求参数对象
		const params = {
			num: num.value,
			name: name.value,
			n: n.value
		};

		// 将参数对象转换为查询字符串
		const queryString = new URLSearchParams(params).toString();

		// 目标 API 的基础 URL
		const baseUrl = `${BASE_URL}/api/stu/login`;

		// 拼接完整的请求 URL
		const apiUrl = `${baseUrl}?${queryString}`;
		// 发起 Fetch 请求
		const response = await fetch(apiUrl);

		// 检查响应状态
		if (!response.ok) {
			throw new Error(`HTTP 错误! 状态码: ${response.status}`);
		}

		// 解析响应数据
		const data = await response.json();
		console.log(data);
		if (data.code === 10000) {
			// 存储 token 到 localStorage
			localStorage.setItem('token', data.token);

			console.log('登录成功，token 已存储');
			// 登录成功后跳转到 App.vue
	
			await router.push('/');
			return;
		} else {
			// 显示服务器返回的错误信息
			alert(data.text)
		}
	} catch (error) {
		console.error('登录失败:', error);
		alert('登录失败');
	}
};

选座逻辑： 假设当A同学点击了某个座位时，会根据seat_id判断此座位是否有人，如果有人就跳转到a页面，并且把已经占座的C同学的信息带过去，方便A同学查看。

const handleSeatClick = (room, seat_id) => {
    const seat = getSeatById(room, seat_id);
    if (seat) {
        seat.isSelected = !seat.isSelected;
        if (seat.name) {
            // 携带参数跳转到 /a 页面
            router.push({
                path: '/a',
                query: {
                    name: seat.name,
                    seatId: seat_id
                    // 可以添加更多需要传递的参数
                }
            });
        }
    }
};

四、后端实现

1、引用内置/下载第三方模块

下载命令： npm install express cors
“express”： 搭建web服务器框架
“cors”: 解决跨域请求问题

// app.js
const express = require('express');
const app = express();
// 在文件顶部添加https模块和fs模块
const https = require('https');
const fs = require('fs');
const cors = require('cors');
const path = require('path');
const crypto = require('crypto');
const os = require('os');

2、自定义模块引入

myFun.js功能： 获取时间，本地ip地址，验证token值格式，验证座位号是否有效。
stu.js功能： 验证学号开头判断是某某班级的学生，生成token值。所有的ip都有对应的token值，防止被盗用。
seat.js功能： 学生选择指定座位，验证token值和座位id是否有效，检查选座是否重复，记录选座时间，ip等信息。
room.js功能： 动态获取具体时间并查询确定时间段(上午/下午)教室的筛选，实时监控教室座位布局和选座记录。

const { getIP } = require('./工具/myFun.js');
const studentRoutes = require('./路由/stu.js');
const deskRoutes = require('./路由/seat.js');
const roomRoutes = require('./路由/room.js');

3、后端接口

记录每次访问时的ip地址，根据服务器的IP地址和预定义的API接口路径，动态生成一个HTML页面。点击HTML页面里的链接会跳转到相应的接口。

app.get('/', (req, res) => {
    console.log(` 有人访问IP地址是 ${req.ip}   ${Math.random()}`);
    let URL = `http://${getIP()}`;
    let activeInterface = `/api/stu/active`;
    let loginInterface = `/api/stu/login`;
    res.send(`
        <!DOCTYPE html>
       <span style="font-size:50px">
            你好 你的IP地址是 <br>
            ${req.ip}
            <br>
            <a href="${URL}${activeInterface}" target="_blank"> 活跃接口 </a>
            <a href="${URL}${loginInterface}" target="_blank"> 登录接口 </a>
        </span>
        <pre>
            🥑🥑🥑🥑🥑🥑expAPI  版本号v12.16 2024年12月17日  🥑🥑🥑🥑🥑🥑
        </pre>
    `);
});

五、结言

《云上课堂》是老师的好助手，它不仅可以帮助老师查询学生姓名和座位，还可以一眼看出学生是否逃课缺课！

avatar
文章
阅读
粉丝