Web 技术 - 大作业-Web系统开发
写在前面
妈的退役完写完课设就开始搞这个 b 东西，度过了行动力超强的两周然后开始期末考试然后直接给我榨干了。
生成式人工智能实在太给力了妈的，实验报告中基本所有图都是 AI 生成的，直接写个脚本把代码导入到一个 word 里，然后把 word 丢给 AI 读想生成啥生成啥太爽了我去。
github 项目：https://github.com/Luckyblock233/MomoBlog-Web。
第一章 实践任务描述
（一）问题描述
设计一个前后端交互web系统，前端内容可选如下：
- 完善第一次实验中三个主题页面之一
- 独立开发其他个人主页/博客/旅游景点介绍/电子商务网站
具体设计要求如下：
- 开发对应的后台系统，实现登录界面，至少包含账号、密码、验证码；网站前端和后端需要实现联动，实现菜单栏动态效果、轮播图、新闻等动态内容的增、删、查、改功能；需具备文件上传功能，例如新闻图片、轮播图片等（语言不限，但不能使用三方框架）。
- 采用同步和异步前后端交互方式（用JSON格式），包括表单提交、AJAX等。
- 设计数据库，使用JDBC(或者其他后端技术)连接数据库，数据库类型不限，不能使用各类高级后端框架；
- 熟练使用Session和Cookie，在此基础上实现登录验证和持久登录等功能。
- 对服务端错误、http错误码、异常、验证错误等情况能设置友好的用户提示。
（二）实验环境
- IDE：IntelliJ IDEA 2024.1.1 (Ultimate Edition)
- 数据库：MySQL
- Windows 11 10.0.22631 版本 22631
- java version 22.0.1 2024-04-16
第二章 项目文件结构及功能
第三章 页面效果展示
（一）登录注册
（二）用户首页
（三）管理员首页
第四章 页面逻辑图
（一）index.jsp
（二）register.jsp
（三）home.html
（四）admin.html
第五章 核心技术点
（一）CSS 选择器及优先级
（二） 图形验证码的生成与验证
随机生成4位数字验证码，将其绘制在背景为浅灰色的图片上，并通过随机噪点增加验证码的复杂性。
生成的验证码内容会存储到用户的会话中，设置有效期为60秒，同时通过响应头禁止缓存，确保验证码实时刷新。最后，将验证码图片以JPEG格式输出到客户端，以便用户验证。核心代码示例如下：
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
try {
// 背景色
g.setColor(new Color(220, 220, 220));
g.fillRect(0, 0, width, height);
// 生成验证码
Random random = new Random();
StringBuilder codeBuilder = new StringBuilder();
for (int i = 0; i < 4; i++) {
codeBuilder.append(random.nextInt(10));
}
String captchaCode = codeBuilder.toString();
// 存储到会话
HttpSession session = request.getSession(true);
session.setAttribute("captchaCode", captchaCode);
session.setMaxInactiveInterval(60);
// 绘制验证码
g.setColor(Color.BLACK);
g.setFont(new Font("Arial", Font.BOLD, 18));
g.drawString(captchaCode, 10, 22);
// 添加噪点
g.setColor(new Color(150, 150, 150));
for (int i = 0; i < 100; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height);
g.drawOval(x, y, 1, 1);
}
// 输出图片
ImageIO.write(image, "JPEG", response.getOutputStream());
（三）Cookie与Session实现持久化登录
通过 LoginServlet 处理用户登录请求，主要功能包括：
- 验证用户输入的验证码是否正确，防止恶意登录。
- 使用 UserDao 验证用户名和密码的正确性，并从数据库中检索用户信息。
- 成功登录后，将用户的 ID 和用户名存储到会话中，并设置会话有效期。
- 如果用户选择“记住我”功能，则生成一个唯一的会话令牌（sessionToken），存储到数据库中，同时通过 Cookie 将令牌发送给客户端，实现持久化登录。
- 对于失败的情况（如验证码或用户名密码错误），将用户重定向回登录页面并提示错误信息。
// 验证码校验
if (captchaCode == null || !request.getParameter("nowCaptchaCode").equals(captchaCode)) {
response.sendRedirect(request.getContextPath() + "/index.jsp?error=" +
URLEncoder.encode("验证码错误", StandardCharsets.UTF_8));
return;
}
// 验证用户
UserDao userDao = new UserDao();
try {
if (userDao.SearchUser(request.getParameter("nowUsername"), request.getParameter("nowPassword"))) {
Optional<User> user = userDao.findByUsername(request.getParameter("nowUsername"));
int userId = user.get().getId();
// 设置会话
httpSession.setAttribute("userId", userId);
httpSession.setAttribute("username", user.get().getUsername());
httpSession.setMaxInactiveInterval(30 * 60);
// 记住我功能
if (request.getParameter("keep") != null) {
String sessionToken = UUID.randomUUID().toString();
new SessionDao().insertSession(userId, sessionToken);
Cookie cookie = new Cookie("sessionToken", sessionToken);
cookie.setMaxAge(2 * 7 * 24 * 60 * 60);
cookie.setHttpOnly(true);
response.addCookie(cookie);
}
// 登录成功
response.sendRedirect("protected/home.html");
} else {
response.sendRedirect(request.getContextPath() + "/index.jsp?error=" +
URLEncoder.encode("用户名或密码错误", StandardCharsets.UTF_8));
}
} catch (SQLException e) {
e.printStackTrace();
}
}
（四）轮播图 JS 实现
通过多张图片平铺，用 overflow:hidden 只显示一张图片、其他的隐藏，无缝滚动用定时器，改变元素的 left 值让图片呈现左右滚动的效果。
在CSS中，通过 .slide-container 定义固定宽度的容器并隐藏溢出内容，.slide-list 使用 flex 布局排列图片并通过 transition 实现平滑切换，.slide-item 设置与容器相同的宽度保证每次显示一张图片，同时 .slide-container img 使用固定尺寸和 object-fit: cover 裁剪图片以保持比例和清晰度。
.slide-container {
width: 800px;
overflow: hidden;
border: 1px solid #ccc;
position: relative;
margin: auto;
}
.slide-list {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide-item {
width: 800px;
}
.slide-container img {
width: 800px;
height: 600px;
object-fit: cover;
}
（五）JDBC数据库操作
JDBC（Java Database Connectivity） 是 Java 提供的标准数据库访问接口，用于在 Java 应用程序中与关系型数据库进行交互。它通过一组 API 提供了统一的方式，使开发者能够连接数据库、执行 SQL 查询、更新数据，并处理结果集。JDBC 工作流程如下：
- 加载驱动程序：
Class.forName("com.mysql.cj.jdbc.Driver");
- 建立连接：
Connection connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/db_name", "user", "password");
- 创建语句对象：
Statement statement = connection.createStatement();
- 执行sql查询：
ResultSet resultSet = statement.executeQuery("SELECT * FROM users");
- 处理结果集：
while (resultSet.next()) {
System.out.println(resultSet.getString("name"));
}
- 关闭资源：
resultSet.close();
statement.close();
connection.close();
第六章 心得体会
本次实验以开发一个基于前后端交互的 Web 系统为目标，通过综合运用 JSP、Servlet、JDBC、CSS、JavaScript 等技术，实现了包括用户登录注册、验证码验证、持久化登录、轮播图展示、数据库操作等功能模块的完整开发过程。在实验过程中，我对 Web 开发的全栈技术有了更深入的理解，同时也积累了丰富的实践经验。
（一）收获
本次实验让我从以下几个方面收获颇丰：
- 技术积累：系统学习并实践了 Web 开发的核心技术，包括 JSP、Servlet、JDBC、AJAX 等，深入理解了从数据库到前端的完整开发流程。
- 项目管理能力：通过模块化开发和任务分解，明确了项目开发的优先级和时间分配，提升了项目管理意识。
- 代码质量：实验中注重了代码的可读性和安全性，使用注释和异常处理机制优化了代码质量。
（二）遇到的问题与解决方案
在实验过程中，我遇到了各种各样的问题，这些问题不仅考验了我的技术能力，也锻炼了我的解决问题的能力和耐心。
- 验证码的显示问题
生成图形验证码时无法正常显示。仔细检查代码和查阅相关资料后，发现是由于响应头的设置不正确导致的，导致浏览器无法识别验证码图片的格式。 - 数据库连接异常
在进行 JDBC 数据库连接时，报错信息提示 “SQLException: No suitable driver found”。随后发现是由于没有正确加载 MySQL 驱动程序导致的。 - 轮播图的无缝滚动问题
图片切换时会出现短暂的空白或卡顿现象，影响用户体验。经过反复调试和参考其他优秀的轮播图实现代码，发现是由于定时器的设置和图片切换的逻辑不够优化导致的，于是进行了调整，实现了比较好的效果。
通过解决这些问题，我积累了一些宝贵的经验和方法。首先，遇到问题时要保持冷静，仔细分析报错信息和问题的表现形式，确定问题的大致范围；然后，通过查阅相关的技术文档、书籍和网络资料，寻找可能的解决方案。在查阅资料的过程中，要学会筛选有用的信息，避免被过多无关的内容所干扰；如果自己无法解决问题，可以向老师、同学或技术社区求助，听取他们的意见和建议，拓宽解决问题的思路。同时，要善于利用调试工具，如 IDE 的调试功能、浏览器的开发者工具等，对代码进行逐步调试，查找问题的根源所在；在解决问题后，要及时总结经验教训，将解决问题的过程和方法记录下来，以便日后遇到类似问题时能够快速解决。
（三）总结
通过此次实验，我对 Web 技术有了全面的认识，并在实践中提升了编码能力和项目开发能力。实验内容涵盖了前后端开发的多个重要模块，使我能从全局视角理解 Web 应用的实现原理和关键技术。这些知识与技能将为我未来的学习和工作打下坚实的基础。
附录 参考资料
- https://css.bqrdh.com/safety-color
- iconfont-阿里巴巴矢量图标库 https://www.iconfont.cn/
- MDN Web Docs https://developer.mozilla.org/zh-CN/
- Apache Tomcat® - Apache Tomcat 10 Software https://tomcat.apache.org/download-10.cgi
- 解决Windows下Tomcat日志乱码：编码一致性关键 https://blog.csdn.net/wpl__/article/details/115659501
- IntelliJ IDEA中配置Tomcat（超详细）_intellij idea配置tomcat-CSDN博客 https://blog.csdn.net/Wxy971122/article/details/123508532
- Servlet - 3.1下@MultipartConfig注解方式上传文件-CSDN博客 https://blog.csdn.net/mytt_10566/article/details/71077154
- 什么年代了，你还不知道 Servlet3.0 中的文件上传方式？ https://juejin.cn/post/6974933954210037768
- 如何在textarea中插入提示文本 - 前端哥 https://www.qianduange.cn/article/11002.html
- 使用IDEA自动生成UML类图和时序图_idea uml generator怎么用-CSDN博客 https://blog.csdn.net/qq_43269093/article/details/110168656
- jsp+dao+bean+servlet（MVC模式）实现简单用户登录和注册页面（连接数据库，登录页面包含验证码，两周内免登陆等功能）_eclipse如何拿到数据库信息实现用户验证登录(包括验证码)只用bean,controller,d-CSDN博客 https://blog.csdn.net/qq_43505820/article/details/109562912
浙公网安备 33010602011771号