一.项目来源和项目简介
（1）项目来源
此项目来自于同学的一次期末大作业，大作业是关于体育赛事查询系统，在该同学的代码基础上，我进行加工和完善，使其更加美观完善，功能化更加完整。
（2）项目简介
基于Jsp+servlet+javaBean的体育赛事信息查询web系统。先实现用户注册登录功能，用户输入密码登陆成功后进入查询主页菜单，菜单点击查询后再实现查询功能。构造比赛类，包含比赛名称（字符串）、比赛种类（字符串）、比赛地点（字符串）、比赛日期（整数）、门票价格（浮点数）。构造比赛信息类，其中包含若干比赛、用容器存储比赛对象，然后定义方法void addCompetition（Competition c）添加比赛对象，定义方法void persist（），将所有比赛存至competitons.dat里，定义方法Competution[] restore()从文件competitons.dat中读取所有比赛，并返回比赛列表数组。main函数中创造比赛信息类对象，向其中添加3个比赛对象，测试其persist和restore方法。然后把比赛数据在网页中可以显示出来。
二.运行环境和运行结果
运行环境：eclipse
运行结果：
1.注册页面
2.登陆页面
3.查询页面
三.主要问题
所布置的题目是要求具有简单的注册查询功能，所以功能较为单一，并且页面过于单调，色彩不够鲜明，不具备自己独特的项目特色，在满足同学期末大作业要求的基础上，我增加了封面背景，关键字查询的功能，使系统页面更加美观，查询更加精确便利。
四.新代码附上
FileUtil.java
点击查看代码
FileUtil.java
package util;
import bean.User;
import bean.News;
import java.io.*;
import java.util.ArrayList;
import java.util.List;
public class FileUtil {
private static final String USER_FILE = "/Users/fengziyang/eclipse-workspace/SportsNewsSystem/src/main/users.txt";
public static void saveUser(User user) {
try (BufferedWriter writer = new BufferedWriter(new FileWriter(USER_FILE, true))) {
writer.write(user.getUsername() + "," + user.getPassword());
writer.newLine();
} catch (IOException e) {
e.printStackTrace();
}
}
public static boolean validateUser(String username, String password) {
try (BufferedReader reader = new BufferedReader(new FileReader(USER_FILE))) {
String line;
while ((line = reader.readLine()) != null) {
String[] parts = line.split(",");
if (parts[0].equals(username) && parts[1].equals(password)) {
return true; // 用户名和密码匹配
}
}
} catch (IOException e) {
e.printStackTrace();
}
return false; // 用户名或密码不匹配
}
}
News.java
package bean;
public class News {
private int id;
private String date;
private String sport;
private String title;
private String content;
public News(int id, String date, String sport, String title, String content) {
super();
this.id = id;
this.date = date;
this.sport = sport;
this.title = title;
this.content = content;
}
public News(String title, String content) {
this.title = title;
this.content = content;
}
public int getId() {
return id;
}
public String getDate() {
return date;
}
public String getSport() {
return sport;
}
public String getTitle() {
return title;
}
public String getContent() {
return content;
}
public void setId(int id) {
this.id = id;
}
public void setDate(String date) {
this.date = date;
}
public void setSport(String sport) {
this.sport = sport;
}
public void setTitle(String title) {
this.title = title;
}
public void setContent(String content) {
this.content = content;
}
}
点击查看代码
User.java
package bean;
public class User {
private String username;
private String password;
public User(String username, String password) {
this.username = username;
this.password = password;
}
public String getUsername() {
return username;
}
public String getPassword() {
return password;
}
}
点击查看代码
Index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>体育赛事新闻信息查询系统</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-image: url('images/index_background.jpg');
background-position: center; /* 居中背景图片 */
background-repeat: no-repeat; /* 不重复背景图片 */
}
.container {
max-width: 800px;
margin: auto;
background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
}
.nav {
text-align: center;
margin-top: 20px;
}
.nav a {
text-decoration: none;
color: #fff;
background-color: #5cb85c;
padding: 10px 20px;
border-radius: 5px;
margin: 0 10px;
transition: background-color 0.3s ease;
}
.nav a:hover {
background-color: #4cae4c;
}
</style>
</head>
<body>
<div class="container">
<h1>欢迎来到体育赛事新闻信息查询系统</h1>
<div class="nav">
<a href="register.jsp">注册</a>
<a href="login.jsp">登录</a>
</div>
</div>
</body>
</html>
点击查看代码
Register.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>注册</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.register-container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
text-align: center;
color: #333;
}
form {
margin-top: 20px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 3px;
box-sizing: border-box;
}
input[type="submit"] {
width: 100%;
padding: 10px;
border: none;
background-color: #3079ed;
color: white;
border-radius: 3px;
cursor: pointer;
margin-top: 10px;
}
input[type="submit"]:hover {
background-color: #1a5fb4;
}
</style>
</head>
<body>
<div class="register-container">
<h1>注册</h1>
<form action="register" method="get">
用户名: <input type="text" name="username" required/><br/>
密码: <input type="password" name="password" required/><br/>
<input type="submit" value="注册"/>
</form>
</div>
</body>
</html>
点击查看代码
Login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>登录</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
text-align: center;
color: #333;
}
form {
margin-top: 20px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 3px;
box-sizing: border-box;
}
input[type="submit"] {
width: 100%;
padding: 10px;
border: none;
background-color: #5cb85c;
color: white;
border-radius: 3px;
cursor: pointer;
margin-top: 10px;
}
input[type="submit"]:hover {
background-color: #4cae4c;
}
.error {
color: red;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="login-container">
<h1>登录</h1>
<form action="login" method="get">
用户名: <input type="text" name="username" required/><br/>
密码: <input type="password" name="password" required/><br/>
<input type="submit" value="登录"/>
</form>
<c:if test="${param.error != null}">
<p class="error">用户名或密码错误</p>
</c:if>
</div>
</body>
</html>
点击查看代码
Query.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ page import="bean.News" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>体育赛事新闻查询</title>
<style>
body {/* 设置页面字体、背景颜色、颜色、外边距和内边距 */
font-family: 'Arial', sans-serif;
background-color: #f9f9f9;
color: #333;
margin: 0;
padding: 0;
}
.container { /* 设置容器的宽度、最大宽度和外边距 */
width: 90%;
max-width: 1200px;
margin: auto;
overflow: hidden;
}
header, form, h3, table {/* 设置头部、表单、标题3和表格的外边距 */
margin-top: 20px;
}
header, h3 {/* 设置头部和标题3的文本居中和颜色 */
text-align: center;
color: #4CAF50;
}
form {/* 设置表单的布局方式为flex布局 */
display: flex;
justify-content: center; /* 水平居中 */
align-items: center;/* 垂直居中 */
gap: 10px;/* 设置元素之间的间隔 */
}
input[type="text"] { /* 设置文本输入框的样式 */
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
width: 300px;
}
input[type="submit"] {/* 设置提交按钮的样式 */
padding: 10px 20px;
border: none;
background-color: #4CAF50;
color: white;
cursor: pointer;
border-radius: 4px;
}
input[type="submit"]:hover {/* 设置提交按钮鼠标悬停时的样式 */
background-color: #45a049;
}
table {
width: 100%;
border-collapse: collapse;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
th, td {/* 设置表格的宽度、边框合并和阴影效果 */ border: 1px solid #ddd;
padding: 12px 8px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<header>
<h2>查询体育赛事新闻</h2>
</header>
<form action="query" method="get">
<label for="sport">运动类型:</label>
<input type="text" id="sport" name="sport" placeholder="请输入运动类型">
<input type="submit" value="查询">
</form>
<h3>查询结果:</h3>
<table>
<thead>
<tr>
<th>ID</th>
<th>日期</th>
<th>运动</th>
<th>标题</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<%
List<News> newsList_2 = (List<News>) request.getAttribute("newsList");
if (newsList_2 != null && !newsList_2.isEmpty()) {
for (News news : newsList_2) {
%>
<tr>
<td><%= news.getId() %></td>
<td><%= news.getDate() %></td>
<td><%= news.getSport() %></td>
<td><%= news.getTitle() %></td>
<td><%= news.getContent() %></td>
</tr>
<%
}
} else {
%>
<tr>
<td colspan="5" class="center">没有找到相关新闻。</td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
</body>
</html>
五.重构软件的测试截图
（1）新添加的主页面
（2）新关键词查询页面
六.总结
根据这个项目，我先对项目整体进行分析，在这个系统中，用户可以通过注册和登录页面与后端进行交互。在注册过程中，用户提交的信息会通过RegisterServlet处理并保存到文件中。登录时，用户输入的用户名和密码会由LoginServlet处理，并利用FileUtil.validateUser方法验证其合法性，根据验证结果决定用户的去向。新闻查询功能允许用户在查询页面选择新闻类型，QueryServlet处理这些请求并将筛选后的新闻列表展示在查询结果页面。整个流程涉及用户信息的存储与验证，以及新闻内容的检索和展示。
根据对其大作业的分析，制作的项目流程图如下：
根据类的设计和介绍制作了目录如下：
通过这次实验，我不仅学习到了具体的技术知识，还提高了解决实际问题的能力，在解决实际问题的过程中，我学会了如何调试代码、优化性能以及处理用户交互中的各种异常情况。这些实践经验极大地提升了我的编程能力和问题解决能力。为将来开发更复杂的Web应用打下了坚实的基础。
浙公网安备 33010602011771号