sprint day2
1.项目预期任务量：15天
2.已花费时间：7天
3.剩余时间：8天
任务看板：
SCRUM会议照片：
产品状态：
课程管理模块完成
根据不同角色显示不同功能按钮
功能演示：
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>课程管理系统</title>
<style>
/* 整体页面样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
min-height: 100vh;
}
/* 左侧导航栏样式 */
.sidebar {
width: 200px;
background-color: #f4f4f4;
padding: 20px;
display: flex;
flex-direction: column;
}
.sidebar button {
margin-bottom: 10px;
padding: 10px;
border: none;
border-radius: 4px;
background-color: #4a90e2;
color: white;
cursor: pointer;
}
/* 右侧内容区域样式 */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
}
/* 顶部角色栏样式 */
.role-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #f8f9fa;
border-bottom: 1px solid #ddd;
}
/* 角色栏中登录信息样式 */
.login-info {
font-size: 14px;
}
/* 角色栏中退出登录按钮样式 */
.logout-btn {
background-color: #ff4444;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
/* 课程信息表格样式 */
.course-table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
.course-table th,
.course-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.course-table th {
background-color: #f8f9fa;
font-weight: 600;
}
/* 操作按钮样式 */
.action-btn {
padding: 6px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
margin-right: 5px;
}
.online-btn {
background-color: #4CAF50;
color: white;
}
.offline-btn {
background-color: #FF5733;
color: white;
}
.delete-btn {
background-color: #ff4444;
color: white;
}
/* 表单容器样式 */
.form-container {
width: 100%;
max-width: 500px;
background-color: #f9fafb;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 0 auto;
}
/* 表单组样式 */
.form-group {
margin-bottom: 15px;
}
/* 输入框样式 */
input[type="text"],
input[type="number"],
textarea,
select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
/* 按钮样式 */
button {
background-color: #4a90e2;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 15px;
}
/* 隐藏元素 */
[style*="display: none"] {
display: none !important;
}
</style>
</head>
<body>
<!-- 左侧导航栏 -->
<div class="sidebar">
<button id="browseCourseBtn" onclick="goToHomePage()">课程浏览</button>
<button id="addCourseBtn" onclick="showAddCourseForm()">添加课程</button>
<button id="queryCourseBtn" onclick="toggleSearchBox()">查询课程</button>
</div>
<!-- 右侧内容区域 -->
<div class="main-content">
<!-- 顶部角色栏 -->
<div class="role-bar">
<div class="login-info" id="loginInfo"></div>
<button class="logout-btn" onclick="logout()">退出登录</button>
</div>
<!-- 搜索框容器 -->
<div id="searchBoxContainer" style="display: none;">
<input type="text" class="search-input" id="searchInput" placeholder="搜索课程名称...">
<button class="function-btn" onclick="searchCourse()">查询</button>
</div>
<!-- 课程表格容器 -->
<div id="courseTableContainer">
<table class="course-table" id="courseTable">
<thead>
<tr>
<th>课程名称</th>
<th>课程类型</th>
<th>任课教师</th>
<th>课程时长</th>
<th>课程状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="courseBody"></tbody>
</table>
</div>
<!-- 添加课程表单容器 -->
<div id="addCourseFormContainer" style="display: none;">
<h2 class="mb-4">添加课程信息</h2>
<div class="form-container">
<form id="courseForm" action="/addcourse" method="post"> <!-- POST 请求 -->
<div class="form-group">
<label for="name">课程名称</label>
<input type="text" id="name" name="name" placeholder="请输入课程名称" required>
</div>
<div class="form-group">
<label for="type">课程类型</label>
<input type="text" id="type" name="type" placeholder="请输入课程类型">
</div>
<div class="form-group">
<label for="description">课程简介</label>
<textarea id="description" name="description" rows="4" placeholder="请输入课程简介"></textarea>
</div>
<div class="form-group">
<label for="duration">课程时长</label>
<input type="number" id="duration" name="duration" placeholder="请输入课程时长">
</div>
<div class="form-group">
<label for="instructor">任课教师</label>
<input type="text" id="instructor" name="instructor" placeholder="请输入任课教师">
</div>
<div class="form-group">
<label for="coursestatus">课程状态</label>
<select id="coursestatus" name="coursestatus">
<option value="待核审">待核审</option>
<option value="上线">上线</option>
<option value="下线">下线</option>
</select>
</div>
<div class="button-group">
<button type="submit">提交课程信息</button>
<button type="button" onclick="hideAddCourseForm()">返回</button>
</div>
</form>
</div>
</div>
<!-- 修改课程表单容器 -->
<div id="editCourseFormContainer" style="display: none;">
<h2 class="mb-4">修改课程信息</h2>
<div class="form-container">
<form id="editCourseForm" action="/updatecourse" method="post">
<input type="hidden" id="editCourseId" name="id">
<div class="form-group">
<label for="editName">课程名称</label>
<input type="text" id="editName" name="name" placeholder="请输入课程名称" required>
</div>
<div class="form-group">
<label for="editType">课程类型</label>
<input type="text" id="editType" name="type" placeholder="请输入课程类型">
</div>
<div class="form-group">
<label for="editDescription">课程简介</label>
<textarea id="editDescription" name="description" rows="4" placeholder="请输入课程简介"></textarea>
</div>
<div class="form-group">
<label for="editDuration">课程时长</label>
<input type="number" id="editDuration" name="duration" placeholder="请输入课程时长">
</div>
<div class="form-group">
<label for="editInstructor">任课教师</label>
<input type="text" id="editInstructor" name="instructor" placeholder="请输入任课教师">
</div>
<div class="form-group">
<label for="editCoursestatus">课程状态</label>
<select id="editCoursestatus" name="coursestatus">
<option value="待核审">待核审</option>
<option value="上线">上线</option>
<option value="下线">下线</option>
</select>
</div>
<div class="button-group">
<button type="submit">提交修改信息</button>
<button type="button" onclick="hideEditCourseForm()">返回</button>
</div>
</form>
</div>
</div>
</div>
<script>
let allCourses = [];
let currentRole;
// 页面加载时初始化
window.addEventListener("load", () => {
const urlParams = new URLSearchParams(window.location.search);
const userData = {};
urlParams.forEach((value, key) => {
try {
userData[key] = JSON.parse(value);
} catch (error) {
userData[key] = value;
}
});
const username = userData.username;
const name = userData.name;
currentRole = userData.role;
if (username && name && currentRole) {
document.getElementById('loginInfo').textContent =
`欢迎，${username}（姓名：${name}，角色：${currentRole}）`;
// 隐藏学生的添加课程按钮
if (currentRole === '学生') {
document.getElementById('addCourseBtn').style.display = 'none';
}
}
fetchCourses();
// 监听添加课程表单提交事件
const courseForm = document.getElementById('courseForm');
courseForm.addEventListener('submit', function (e) {
e.preventDefault();
const formData = new FormData(courseForm);
fetch('/addcourse', {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
alert('课程添加成功');
hideAddCourseForm();
fetchCourses();
} else {
alert('课程添加失败');
}
})
.catch(error => {
console.error('添加课程时出错:', error);
alert('添加课程时出现错误，请稍后重试');
});
});
// 监听修改课程表单提交事件
const editCourseForm = document.getElementById('editCourseForm');
editCourseForm.addEventListener('submit', function (e) {
e.preventDefault();
const formData = new FormData(editCourseForm);
fetch('/updatecourse', {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
alert('课程修改成功');
hideEditCourseForm();
fetchCourses();
} else {
alert('课程修改失败');
}
})
.catch(error => {
console.error('修改课程时出错:', error);
alert('修改课程时出现错误，请稍后重试');
});
});
});
// 获取课程数据并过滤
function fetchCourses() {
fetch('/select')
.then(res => res.json())
.then(data => {
let filtered = data;
// 角色过滤逻辑
if (currentRole === '学生') {
filtered = data.filter(c => c.coursestatus === '上线');
} else if (currentRole === '教师') {
filtered = data.filter(c => c.coursestatus !== '下线');
}
allCourses = filtered;
renderCourses(filtered);
})
.catch(err => console.error('数据获取失败:', err));
}
// 渲染课程表格
function renderCourses(courses) {
const tbody = document.getElementById('courseBody');
tbody.innerHTML = '';
courses.forEach(course => {
const row = document.createElement('tr');
const actions = getActionButtons(course);
row.innerHTML = `
<td>${course.name}</td>
<td>${course.type}</td>
<td>${course.instructor}</td>
<td>${course.duration}</td>
<td>${course.coursestatus}</td>
<td>${actions}</td>
`;
tbody.appendChild(row);
});
}
// 根据角色生成操作按钮
function getActionButtons(course) {
if (currentRole === '管理员') {
return `
<button class="action-btn online-btn"
onclick="updateCourseStatus(${course.id}, '上线')">上线</button>
<button class="action-btn offline-btn"
onclick="updateCourseStatus(${course.id}, '下线')">下线</button>
<button class="delete-btn"
onclick="deleteCourse(${course.id})">删除</button>
<button class="action-btn"
onclick="handleFileUpload(${course.id}, '${course.name}')">上传文件</button>
<a href="/download/${course.name}" class="action-btn" download>下载文件</a>
<button class="action-btn"
onclick="showEditCourseForm(${course.id})">修改</button>
`;
} else if (currentRole === '教师') {
return `
<button class="action-btn"
onclick="handleFileUpload(${course.id}, '${course.name}')">上传文件</button>
<a href="/download/${course.name}" class="action-btn" download>下载文件</a>
<button class="action-btn"
onclick="showEditCourseForm(${course.id})">修改</button>
`;
} else if (currentRole === '学生') {
return `
<a href="/download/${course.name}" class="action-btn" download>下载文件</a>
`;
}
return '';
}
// 文件上传处理
function handleFileUpload(courseId, courseName) {
const input = document.createElement('input');
input.type = 'file';
input.accept = '*/*';
input.onchange = e => {
const file = e.target.files[0];
if (!file) return;
const formData = new FormData();
formData.append('file', file);
formData.append('courseName', courseName);
formData.append('courseId', courseId); // 添加课程 id
fetch('/upload', { method: 'POST', body: formData })
.then(res => res.text())
.then(res => {
if (res === 'success') {
alert('上传成功');
// 可以在这里添加根据 id 更新数据的逻辑，例如重新获取课程数据
fetchCourses();
} else {
alert('上传失败');
}
})
.catch(error => {
console.error('文件上传错误:', error);
alert('文件上传过程中出现错误');
});
};
input.click();
}
// 课程状态更新
function updateCourseStatus(courseId, status) {
if (confirm(`确认将课程状态改为 ${status}？`)) {
fetch(`/updatecoursestatus?id=${courseId}&coursestatus=${status}`)
.then(res => res.ok ? fetchCourses() : alert('操作失败'));
}
}
// 删除课程
function deleteCourse(courseId) {
if (confirm('确认删除该课程？')) {
fetch(`/deletecourse?id=${courseId}`)
.then(res => res.ok ? fetchCourses() : alert('删除失败'));
}
}
// 显示添加课程表单
function showAddCourseForm() {
document.getElementById('courseTableContainer').style.display = 'none';
document.getElementById('addCourseFormContainer').style.display = 'block';
}
// 隐藏添加课程表单
function hideAddCourseForm() {
document.getElementById('addCourseFormContainer').style.display = 'none';
document.getElementById('courseTableContainer').style.display = 'block';
}
// 显示修改课程表单
function showEditCourseForm(courseId) {
const course = allCourses.find(c => c.id === courseId);
if (course) {
document.getElementById('editCourseId').value = course.id;
document.getElementById('editName').value = course.name;
document.getElementById('editType').value = course.type;
document.getElementById('editDescription').value = course.description;
document.getElementById('editDuration').value = course.duration;
document.getElementById('editInstructor').value = course.instructor;
document.getElementById('editCoursestatus').value = course.coursestatus;
document.getElementById('courseTableContainer').style.display = 'none';
document.getElementById('editCourseFormContainer').style.display = 'block';
}
}
// 隐藏修改课程表单
function hideEditCourseForm() {
document.getElementById('editCourseFormContainer').style.display = 'none';
document.getElementById('courseTableContainer').style.display = 'block';
}
// 退出登录
function logout() {
window.location.href = 'login.html';
}
// 搜索功能（预留接口）
function searchCourse() {
const keyword = document.getElementById('searchInput').value.trim();
// 这里添加搜索逻辑，当前示例未实现
fetchCourses(); // 简单刷新，实际需带搜索参数
}
// 回到首页
function goToHomePage() {
document.getElementById('searchBoxContainer').style.display = 'none';
hideAddCourseForm();
hideEditCourseForm();
document.getElementById('searchInput').value = '';
fetchCourses();
}
// 切换搜索框
function toggleSearchBox() {
const searchBox = document.getElementById('searchBoxContainer');
searchBox.style.display = searchBox.style.display === 'none' ? 'block' : 'none';
hideAddCourseForm();
hideEditCourseForm();
}
</script>
</body>
</html>
浙公网安备 33010602011771号