wsy182
/
SmartRollCall
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

merge into: wsy182:master
Branches Tags
wsy182:dev
wsy182:master
...
pull from: wsy182:dev
Branches Tags
wsy182:dev
wsy182:master
This repository has been archived on 2024-09-30. You can view files and clone it, but cannot push or open issues/pull-requests.

3 Commits
master ... dev

Author SHA1 Message Date
wangsiyuan 32e1af6bf2 更新 requirements.txt 2023-12-31 00:23:03 +08:00
wangsiyuan b5dd4b6d7d 1 2023-12-30 22:44:36 +08:00
wangsiyuan cf2ff28e58 更新 login.html 2023-12-30 21:31:47 +08:00
11 changed files with 287 additions and 141 deletions
Show Stats Expand all files Collapse all files

2
app/static/css/layui.css
View File

File diff suppressed because one or more lines are too long

16
app/static/js/menu.js
View File

@ -1,11 +1,11 @@
$.get('/api/menu', function (menuItems) { $.get('/api/menu', function (menuItems) {
var menuList = $('.layui-nav.layui-nav-tree'); var menuList = $('.layui-nav.layui-nav-tree');
menuList.empty(); menuList.empty();
menuItems.forEach(function (item) { menuItems.forEach(function (item) {
var href = item.path || 'javascript:void(0);'; // 提供一个默认值 var href = item.path || 'javascript:void(0);'; // 提供一个默认值
menuList.append('<li class="layui-nav-item"><a href="' + href + '">' + item.name + '</a></li>'); menuList.append('<li class="layui-nav-item"><a href="' + href + '">' + item.name + '</a></li>');
});
layui.element.render('nav', 'test');
}); });
layui.element.render('nav', 'test');
});

41
app/templates/announcement.html
View File

@ -7,6 +7,47 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="static/css/layui.css" rel="stylesheet"/> <link href="static/css/layui.css" rel="stylesheet"/>
<style>
/* 容器样式 */
.layui-container {
padding: 20px;
background-color: #f7f7f7;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
/* 标题样式 */
.layui-header {
margin-bottom: 20px;
font-size: 2em; /* 更大的标题字体 */
color: #333;
border-bottom: 2px solid #e2e2e2;
padding-bottom: 10px;
}
/* 课程信息样式 */
.layui-field-box p {
font-size: 1.2em; /* 更大的文字 */
margin: 10px 0; /* 调整段落间距 */
padding: 10px; /* 内边距 */
background-color: #fff; /* 背景色 */
border-radius: 4px; /* 轻微的圆角 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 细微的阴影 */
}
/* 字段集合样式调整 */
fieldset.layui-elem-field {
border-color: #ddd; /* 更淡的边框颜色 */
}
legend {
font-size: 1.4em; /* Legend文字大小 */
color: #333; /* 文字颜色 */
}
</style>
</head> </head>
<body> <body>

106
app/templates/attendance-reminder.html
View File

@ -91,32 +91,11 @@
</div> </div>
</div> </div>
<div class="layui-body"> <div class="layui-body">
<div> <div class="layui-container">
<!-- 动态显示当前时间的标题 --> <div class="layui-row">
<h2 id="attendance-reminder">签到提醒 </h2> </div>
<h2 id="current-time">当前时间</h2> <div id="course-list" class="layui-row">
<table class="layui-table calendar-table" id="calendar"> <!-- 课程列表将在这里生成 -->
<!-- 日历的头部 -->
<thead>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<!-- 日历的主体部分 -->
<tbody id="calendar-body">
<!-- 动态生成日历的日期部分 -->
</tbody>
</table>
<!-- 提醒内容 -->
<div class="reminder">
<span><span class="color-box" style="background-color: green;"></span>绿色代表当月已签到</span><br>
<span><span class="color-box" style="background-color: #FFA07A;"></span>颜色代表本月需要签到</span>
</div> </div>
</div> </div>
</div> </div>
@ -127,59 +106,34 @@
<script src="/static/js/menu.js"></script> <script src="/static/js/menu.js"></script>
<script src="/static/js/logout.js"></script> <script src="/static/js/logout.js"></script>
<script> <script>
layui.use(['layer'], function () { document.addEventListener("DOMContentLoaded", function () {
var layer = layui.layer; // 模拟从后端获取的课程数据
let courses = [
{name: "线性代数", time: "14:00", description: "线性代数是数学的一个基础分支，关注线性方程组、向量空间、矩阵理论及线性变换等概念。本课程将带领学生探索向量和矩阵的运算，理解行列式、特征值和特征向量的计算，以及线性空间和子空间的概念。透过一系列的应用实例，如图像处理和机器学习，学生将学会如何将理论应用于实际问题中，为进一步学习高等数学和工程应用打下坚实的基础。", room: "101教室"},
{name: "数据结构", time: "15:00", description: "数据结构是计算机科学中的一个重要领域，涉及组织、管理和存储数据的方式，以便高效地访问和修改。本课程覆盖了从基本的数据结构如数组、链表、栈和队列，到更高级的结构如树、图、散列表和堆。通过理论学习与实际编程相结合的方式，学生将掌握如何选择合适的数据结构解决特定问题，以及对各种数据结构进行效率分析和比较。", room: "102教室"},
{name: "计算机网络", time: "16:00", description: "计算机网络是研究计算机之间的连接方式及其通信协议的科学。本课程提供计算机网络的综合介绍，包括网络架构、协议、网络通信理论、实际应用等内容。学生将了解网络层次结构，包括物理层、数据链路层、网络层、传输层和应用层。课程重点讲解TCP/IP模型，以及它在网络通信中的关键作用。通过本课程的学习，学生将获得设计、实施、管理和维护网络的基本知识和技能。", room: "103教室"}
];
// 假设的已签到日期数据 // 获取课程列表容器
var signedDays = [1, 5, 9]; // 这里仅为示例，实际应从服务器获取 let courseListDiv = document.getElementById('course-list');
var requiredSignDays = [2, 6, 15, 23];
// 动态生成日历 // 遍历课程数组，为每门课创建一个卡片
function generateCalendar() { courses.forEach(course => {
var today = new Date(); let courseDiv = document.createElement('div');
var currentMonth = today.getMonth(); courseDiv.className = 'layui-col-md4';
var currentYear = today.getFullYear(); courseDiv.innerHTML = `<div class="course-card layui-elem-field">
<legend>${course.name}</legend>
var firstDay = new Date(currentYear, currentMonth, 1).getDay(); <div class="layui-field-box">
var daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate(); <p><strong>时间:</strong> ${course.time}</p>
<p><strong>教室:</strong> ${course.room}</p>
var calendarHtml = ''; <p><strong>描述:</strong> ${course.description}</p>
var day = 1; <p><strong>剩余时间:</strong> <span class="countdown">计算中...</span></p>
</div>
for (var i = 0; i < 6; i++) { </div>`;
calendarHtml += '<tr>'; courseListDiv.appendChild(courseDiv);
for (var j = 0; j < 7; j++) { });
if (i === 0 && j < firstDay) {
calendarHtml += '<td></td>';
} else if (day > daysInMonth) {
break;
} else {
var classes = '';
if (signedDays.includes(day)) classes += 'signed '; // 已签到
if (requiredSignDays.includes(day)) classes += 'required-sign'; // 需要签到
calendarHtml += `<td class="${classes}">${day}</td>`;
day++;
}
}
calendarHtml += '</tr>';
if (day > daysInMonth) {
break;
}
}
document.getElementById('calendar-body').innerHTML = calendarHtml;
}
function updateTime() {
var now = new Date();
var timeStr = now.getFullYear() + '年' + (now.getMonth() + 1) + '月' + now.getDate() + '日';
document.getElementById('current-time').innerText = '当前时间: ' + timeStr;
}
// 页面加载时生成日历
generateCalendar();
updateTime();
}); });
</script> </script>
</body> </body>
</html> </html>

40
app/templates/attendance.html
View File

@ -7,6 +7,40 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="static/css/layui.css" rel="stylesheet"> <link href="static/css/layui.css" rel="stylesheet">
<style>
#sign-in-reminder {
max-width: 600px; /* 限制最大宽度 */
margin: 50px auto; /* 上下保留空间，左右自动以居中显示 */
padding: 20px; /* 内边距 */
border-radius: 8px; /* 轻微的圆角 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 给予阴影以突出层次 */
background-color: #f7f7f7; /* 浅灰色背景 */
}
#title {
text-align: center; /* 标题居中 */
color: #333; /* 标题颜色 */
font-size: 24px; /* 字号大小 */
}
#course-info {
text-align: center; /* 课程信息文本居中 */
margin-bottom: 20px; /* 与下方元素保持距离 */
}
.layui-btn {
width: 100%; /* 使按钮宽度填满容器 */
background-color: #009688; /* 设定一个现代感的按钮颜色 */
color: white; /* 文字颜色为白色 */
border-radius: 4px; /* 轻微的圆角 */
padding: 10px 0; /* 上下填充，增加按钮触摸面积 */
text-align: center; /* 文字水平居中 */
display: block; /* 转换为块级元素以应用宽度 */
line-height: 1.5; /* 调整行高以垂直居中文字 */
font-size: 16px; /* 设定文字大小 */
}
</style>
</head> </head>
<body> <body>
@ -44,7 +78,7 @@
</div> </div>
<div class="layui-body"> <div class="layui-body">
<div id="sign-in-reminder" class="layui-container"> <div id="sign-in-reminder" class="layui-container">
<blockquote class="layui-elem-quote layui-text" id="title"> <blockquote class="layui-card-header" id="title">
课程签到 课程签到
</blockquote> </blockquote>
<div class="layui-text" id="course-info"></div> <div class="layui-text" id="course-info"></div>
@ -70,7 +104,7 @@
if (response.msg === "ok") { if (response.msg === "ok") {
// 如果后端返回课程名 // 如果后端返回课程名
$("#course-info").text("课程：" + response.data.course_name + "。在上课时间内，请及时签到!"); $("#course-info").text("课程：" + response.data.course_name + "。在上课时间内，请及时签到!");
// 启用签到按钮 // 启用签到按钮
$("#sign-in-btn").prop('disabled', false); $("#sign-in-btn").prop('disabled', false);
courseData = response.data; courseData = response.data;
@ -86,7 +120,7 @@
$("#sign-in-btn").click(function () { $("#sign-in-btn").click(function () {
if (!$(this).prop('disabled')) { if (!$(this).prop('disabled')) {
// 发送签到请求到后端 // 发送签到请求到后端
$.post("/api/student-sign-in",courseData,function (response) { $.post("/api/student-sign-in", courseData, function (response) {
// 处理签到后的响应 // 处理签到后的响应
if (response.msg === 'ok') { if (response.msg === 'ok') {
layer.msg('签到成功!'); layer.msg('签到成功!');

47
app/templates/course-category.html
View File

@ -9,9 +9,10 @@
<link href="static/css/layui.css" rel="stylesheet"/> <link href="static/css/layui.css" rel="stylesheet"/>
</head> </head>
<body> <body>
<div class="layui-layout layui-layout-admin"> <div class="layui-layout layui-layout-admin">
<div class="layui-header"> <div class="layui-header layui-bg-black">
<div class="layui-logo layui-hide-xs layui-bg-black">网上上课点名系统</div> <div class="layui-logo layui-hide-xs layui-bg-black">网上上课点名系统</div>
<!-- 头部区域（可配合layui 已有的水平导航） --> <!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-right"> <ul class="layui-nav layui-layout-right">
@ -56,33 +57,33 @@
layui.use(['table', 'jquery'], function () { layui.use(['table', 'jquery'], function () {
var table = layui.table; var table = layui.table;
var $ = layui.jquery; var $ = layui.jquery;
// 发起GET请求获取数据 // 发起GET请求获取数据
$.get('/api/get-course-type', function (res) { $.get('/api/get-course-type', function (res) {
// 假设返回的res是一个对象，包含必修和选修的课程名数组 // 假设返回的res是一个对象，包含必修和选修的课程名数组
// 处理返回的数据，转换为表格能接受的格式 // 处理返回的数据，转换为表格能接受的格式
var tableData = []; var tableData = [];
res['必修'].forEach(function (course) { res['必修'].forEach(function (course) {
tableData.push({course_type: '必修', course_name: course}); tableData.push({course_type: '必修', course_name: course});
}); });
res['选修'].forEach(function (course) { res['选修'].forEach(function (course) {
tableData.push({course_type: '选修', course_name: course}); tableData.push({course_type: '选修', course_name: course});
}); });
// 渲染表格 // 渲染表格
table.render({ table.render({
elem: '#courseTable', elem: '#courseTable',
cols: [[ // 设置表头 cols: [[ // 设置表头
{field: 'course_type', title: '课程类型', sort: true}, {field: 'course_type', title: '课程类型', sort: true},
{field: 'course_name', title: '课程名称', sort: true} {field: 'course_name', title: '课程名称', sort: true}
]], ]],
data: tableData // 使用处理后的数据 data: tableData // 使用处理后的数据
});
}); });
}); });
});
</script> </script>
</body> </body>
</html> </html>

68
app/templates/course-info.html
View File

@ -7,6 +7,34 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="static/css/layui.css" rel="stylesheet"/> <link href="static/css/layui.css" rel="stylesheet"/>
<style>
.custom-table {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd; /* 轻灰色边框 */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
}
.custom-table th, .custom-table td {
text-align: left;
padding: 12px 15px;
border-bottom: 1px solid #ddd; /* 每行之间的分割线 */
}
.custom-table th {
background-color: #f2f2f2; /* 轻灰色背景 */
color: #333; /* 深色文字 */
}
.custom-table tr:hover {
background-color: #f5f5f5; /* 鼠标悬浮时的背景色 */
}
.custom-table td {
color: #555; /* 内容的文字颜色 */
}
</style>
</head> </head>
<body> <body>
@ -45,27 +73,21 @@
<div class="layui-body"> <div class="layui-body">
<!-- 内容主体区域 --> <!-- 内容主体区域 -->
<div style="padding: 15px;"> <div style="padding: 15px;">
<blockquote class="layui-elem-quote layui-text"> <table class="layui-table custom-table">
课程信息 <!-- 略去colgroup中课程代码的列 -->
</blockquote>
<table class="layui-table">
<colgroup> <colgroup>
<col width="200">
<col width="150"> <col width="150">
<col width="150"> <col width="200">
<col width="150">
<col width="100">
<col>
</colgroup> </colgroup>
<thead> <thead>
<tr> <tr>
<th>课程名称</th> <th>课程名称</th>
<th>课程代码</th>
<th>学分</th> <th>学分</th>
<th>课程描述</th> <th>课程描述</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<!-- 动态生成的课程信息将填充在这里 -->
</tbody> </tbody>
</table> </table>
</div> </div>
@ -77,20 +99,22 @@
<script src="static/layui.js"></script> <script src="static/layui.js"></script>
<script src="/static/js/menu.js"></script> <script src="/static/js/menu.js"></script>
<script src="/static/js/logout.js"></script> <script src="/static/js/logout.js"></script>
<script> <script>
$.get('/api/get-course-info', function (courses) { $.get('/api/get-course-info', function (courses) {
var tbody = $('.layui-table tbody'); var tbody = $('.layui-table tbody');
tbody.empty(); // 清空表格现有内容 tbody.empty(); // 清空表格现有内容
courses.forEach(function (course) { courses.forEach(function (course) {
var row = '<tr>' + var row = '<tr>' +
'<td>' + course.course_name + '</td>' + '<td>' + course.course_name + '</td>' +
'<td>' + course.course_code + '</td>' + // 移除课程代码的数据
'<td>' + course.credits + '</td>' + '<td>' + course.credits + '</td>' +
'<td>' + course.description + '</td>' + '<td>' + course.description + '</td>' +
'</tr>'; '</tr>';
tbody.append(row); // 将新行添加到表格中 tbody.append(row); // 将新行添加到表格中
}); });
}); }
);
</script> </script>
</body> </body>
</html> </html>

27
app/templates/login.html
View File

@ -9,11 +9,22 @@
<body class="layui-padding-3"> <body class="layui-padding-3">
<style> <style>
.demo-login-container{width: 320px; margin: 21px auto 0;} .demo-login-container {
.demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;} width: 320px;
margin: 21px auto 0;
}
.demo-login-other .layui-icon {
position: relative;
display: inline-block;
margin: 0 2px;
top: 2px;
font-size: 26px;
}
</style> </style>
<form class="layui-form" id="loginForm"> <form class="layui-form" id="loginForm">
<h1 style="text-align:center; color: #16baaa;">网上上课点名系统</h1> <h1 style="text-align:center; color: #1E90FF; font-family: 'Arial', sans-serif; text-shadow: 2px 2px 4px;">
网上上课点名系统</h1>
<div class="demo-login-container"> <div class="demo-login-container">
<div class="layui-form-item"> <div class="layui-form-item">
<div class="layui-input-wrap"> <div class="layui-input-wrap">
@ -39,13 +50,17 @@
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
<!-- 登录按钮 --> <!-- 登录按钮 -->
<button class="layui-btn layui-btn-fluid" type="submit" lay-submit lay-filter="login" id="btnLogin">登录</button> <button class="layui-btn layui-btn-fluid" type="submit" lay-submit lay-filter="login" id="btnLogin"
style="background-color: #4CAF50; color: white;">登录
</button>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
<!-- 注册按钮 --> <!-- 注册按钮 -->
<button type="button" class="layui-btn layui-btn-fluid" id="btnRegister">注册</button> <button type="button" class="layui-btn layui-btn-fluid" id="btnRegister"
style="background-color: #1E90FF; color: white;">注册
</button>
</div> </div>
</div> </div>
</form> </form>

5
app/templates/register.html
View File

@ -18,7 +18,7 @@
} }
</style> </style>
<h1 style="text-align:center; color: #16baaa;">注册</h1> <h1 style="text-align:center; color: #1E90FF;">注册</h1>
<form class="layui-form"> <form class="layui-form">
<div class="demo-reg-container"> <div class="demo-reg-container">
@ -60,7 +60,8 @@
</div> </div>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" type="submit" lay-submit lay-filter="btnRegister">注册</button> <button class="layui-btn layui-btn-fluid" type="submit" lay-submit lay-filter="btnRegister" style="background-color: #1E90FF; color: white;">注册</button>
</div> </div>
</div> </div>
</form> </form>

76
app/templates/test.html Normal file
View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>签到提醒仪表板</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css" media="all">
<style>
.course-card {
padding: 10px;
border: 1px solid #DDD;
border-radius: 5px;
margin: 10px 0;
background-color: #FFF;
}
.course-card .layui-field-box {
padding: 10px;
}
.course-card button {
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-xs12">
<h1>签到提醒仪表板</h1>
</div>
</div>
<div id="course-list" class="layui-row">
<!-- 课程列表将在这里生成 -->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
// 模拟从后端获取的课程数据
let courses = [
{name: "数学", time: "14:00", description: "关于几何和代数的深入学习", teacher: "张老师", room: "101教室"},
{name: "物理", time: "15:00", description: "探索物质世界的基本规律", teacher: "李老师", room: "102教室"},
{name: "化学", time: "16:00", description: "化合物与元素的神秘世界", teacher: "王老师", room: "103教室"}
];
// 获取课程列表容器
let courseListDiv = document.getElementById('course-list');
// 遍历课程数组，为每门课创建一个卡片
courses.forEach(course => {
let courseDiv = document.createElement('div');
courseDiv.className = 'layui-col-md4';
courseDiv.innerHTML = `<div class="course-card layui-elem-field">
<legend>${course.name} - ${course.teacher}</legend>
<div class="layui-field-box">
<p><strong>时间:</strong> ${course.time}</p>
<p><strong>教室:</strong> ${course.room}</p>
<p><strong>描述:</strong> ${course.description}</p>
<p><strong>剩余时间:</strong> <span class="countdown">计算中...</span></p>
<button class="layui-btn layui-btn-normal">签到</button>
</div>
</div>`;
courseListDiv.appendChild(courseDiv);
});
});
</script>
</body>
</html>

BIN
requirements.txt
View File

Binary file not shown.