B/S结构用户界面设计
B/S结构用户界面设计
【实验编号】
10003809548j Web界面设计
【实验学时】
8学时
【实验环境】
l 所需硬件环境为微机；
l 所需软件环境为dreamweaver
【实验内容】
本实验旨在设计一个基于B/S架构的在线课程管理系统，主要包括用户登录注册、学生选课、教师课程管理与成绩录入、以及管理员用户与课程管理等功能模块。通过HTML、CSS、JavaScript等技术实现前端界面，后端采用Flask/Django提供API支持，数据库使用MySQL存储用户、课程和成绩数据，前后端通过RESTful接口交互，完成系统的界面设计与功能实现。
【关键步骤】
1. 页面设计
登录页面：用于学生与教师登录，提供密码找回入口。
注册页面：教师注册，填写个人信息。
首页：学生版：显示个人信息和成绩管理模块。
教师版：提供学生信息管理、成绩管理、个人信息修改入口。
学生信息管理页面 （教师版）：增删改查学生信息。
生成绩管理页面 （教师版）：管理成绩，支持单条或批量导出。
跳转逻辑：通过角色判断，确保页面跳转符合权限。
2. 首页设计
布局：顶部标题栏：Logo、系统名称。
中间部分：学生版：个人信息显示、成绩展示。
教师版：功能模块入口（如“学生信息管理”、“成绩管理”等按钮）。
样式：配色方案：选用简洁的商务配色。结构化布局：CSS + Grid 或 Flexbox 实现。
3. 导航栏设计
顶部导航栏：登录后动态更新，根据角色显示不同选项（如“学生管理”、“成绩管理”、“个人设置”等）。
导航按钮链接：确保页面间通过URL路由或按钮触发跳转。使用 `JavaScript` 和前端框架（如 Vue、React）优化动态加载。
4. Logo 和图标设计
Logo制作：使用Photoshop（PS）或 Illustrator 设计系统标志。添加艺术字、花纹等细节，使其与页面风格统一。
小图标：用 FontAwesome 或自定义设计，标明每个模块的功能。
5.功能实现
1. 用户登录模块：
接收账号和密码。
对数据库查询比对，返回结果。
区分学生和教师，设置不同的权限。
- 注册模块
新教师信息录入。
校验邮箱和密码规则，将数据存入SQL数据库。
3. 个人信息管理模块：
查询个人信息表，返回用户数据。
提供修改头像和密码功能（学生）。
4. 学生信息管理模块：
教师端实现增删改查学生信息。
查询后可导出单个学生的Excel成绩表。
5. 学生成绩管理模块：
教师端支持成绩的增删改查及批量导出。
学生端只能查看和导出个人成绩（PDF格式）。
6. 全退出功能：
- 清除用户会话，返回登录页面。
【程序运行截图】
1．登录界面
【实验体会】
通过这次基于JSP、Servlet和Maven的学生信息成绩管理系统开发，我深刻体会到信息技术的强大和软件开发的挑战。 在实践中，我学会了JSP和Servlet如何协同工作，利用Maven进行项目管理，优化了项目结构和依赖管理。
开发过程中，我特别注重用户体验，比如在学生信息管理模块中，设计了简洁直观的操作界面，还实现了成绩的Excel和PDF导出功能，方便用户使用。不过，我也发现了一些不足，比如登录模块的优化还不够，偶尔会犯低级错误。总体来说，这次实验让我不仅巩固了理论知识，还积累了不少实践经验，接下来我会继续提升自己的代码能力和设计水平，让下次项目表现更出色。
