- 一、概述
- 项目背景
随着社会对健康生活方式的重视和对体育锻炼需求的增加，校园内的运动器械成为学生们进行体育锻炼的重要资源。然而，许多学生可能无法购买自己喜欢的全部运动器械。因此，建立一个校园运动器械租借系统的想法应运而生。该系统旨在为学生提供一个方便、安全和经济的途径，以租借校园内的运动器械。通过租借系统，学生可以根据自己的需要选择所需的器械，并在规定的时间内租借使用。
通过建立校园运动器械租借系统，可以促进学生们更加积极参与体育锻炼，改善他们的健康状况，并为校园内的体育教育提供更好的支持和资源
健康状况，并为校园内的体育教育提供更好的支持和资源
2.编写目的
系统旨在为学生提供一个方便、快捷、安全和经济的途径，以租借校园内的运动器械，让学生可以更加方便地享受校园内的运动器械资源。系统可以集中管理校园内的运动器械，实现对器械的分类、储存、调配、维护等管理，从而最大化地利用校园内的运动器械资源。
3.开发环境
数据库：MySQL8.0、Navicat Premium 12
Java：JDK1.8.0 eclipse4.16.0
JDBC:mysql-connector-java-8.0.19.jar
html:Dreamweaver、eclipse
二、需求分析
- 需要完成的功能
用户登录：学生可以通过学号和手机号登录进入自己的个人中心；
用户查询：学生可以通过关键字或学号进行搜索，以获得所需的器械信息。
用户发布：学生可以在个人中心为出租品注册编号并将数据存入数据库
2.ER模型图
三.数据库逻辑设计
由ER模型图转换为关系表
四、软件功能设计
- 用户登录
通过html中的action=”login.jsp”把用户提交的参数放到login中验证是否正确，验证过程中需要调用数据库中的数据，若参数正确则进入用户个人中心界面，即跳转到xingxing.jsp，若参数不正确则回到login.html登录界面。
Html中使用表单来接收数据，具体html代码来自login.html如下:
<!DOCTYPE html>
<html>
<head></head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-image: url("背景.jpg");
background-repeat: no-repeat;
background-size: cover;
backdrop-filter: blur(1px);
}
#ziti {
font-size: 23px;
}
#ziti2 {
font-size: 23px;
}
#ziti1 {
font-size: 30px;
}
form {
text-align: center;
background-color: #F5F5F5;
border-collapse: collapse;
border: 1px solid #F5F5F5;
padding: 20px;
}
th,
td {
padding: 8px;
border: 1px solid #F5F5F5;
}
#login {
display: flex;
justify-content: center;
margin-top: 20px;
}
#login input[type="submit"],
#login input[type="reset"] {
margin: 10px;
padding: 8px 16px;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<form method="post" onSubmit="return validate(this)" action="login.jsp">
<div id="ziti1">
<p><b>用户登录</b></p>
</div>
<table>
<tr>
<td id="ziti"><b>学生学号：</b></td>
<td><input type="text" name="sno"></td>
</tr>
<tr>
<td id="ziti2"><b>学生手机号：</b></td>
<td><input type="password" name="sphone"></td>
</tr>
</table>
<div id="login">
<input type="submit" value="登录">
<input type="reset" value="重置">
</div>
</form>
</body>
</html>
用户登录后界面会显示用户个人信息，通过xingxing.jsp从数据库调取数据，具体代码来自xingxing.jsp如下：
<%@ page import="java.sql.*"%>
<%
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
String url = "jdbc:mysql://localhost:3306/crs";
String user = "root";
String password = "131505";
String sphone= request.getParameter("sphone");
String sno= request.getParameter("sno");
try {
Class.forName("com.mysql.cj.jdbc.Driver");
conn = DriverManager.getConnection(url,user, password);
stmt = conn.createStatement();
rs = stmt.executeQuery("select * from student where sphone='"+sphone+"' or sno='"+sno+"'");
} catch (Exception e) {
e.printStackTrace();
}
if (rs != null && rs.next()) {
%>
<table id="user">
<tr>
<th>用户学号</th>
<th>用户姓名</th>
<th>用户专业</th>
<th>用户手机号</th>
</tr>
<%
do {
%>
<tr>
<td><%= rs.getString("sno") %></td>
<td><%= rs.getString("sname") %></td>
<td><%= rs.getString("sdept") %></td>
<td><%= rs.getString("sphone") %></td>
</tr>
<%
} while (rs.next());
%>
</table>
<%
} else {
%>
<p>No results found.</p>
<%
}
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (stmt != null) {
try {
stmt.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
%>
2.用户发布
用户查询和用户发布的html页面都放在了xingxing.jsp中，通过表单获取参数，传给对应的jsp文件。
用户发布表单接收的参数传给Newcheck.jsp，在Newcheck.jsp中连接数据库，通过sql语言进行插入并判断是否插入成功，若插入成功则跳转到success.jsp，对插入结果进行输出操作；
若插入失败则跳转到faliure.jsp提醒用户插入操作失败；
用户发布功能的主要html代码如下，来自xingxing.jsp：
<div id="menu">
<b>出租物品填写</b><br>
<form method="post" action="Newcheck.jsp" onSubmit="return validate(this)"accept-charset="UTF-8">
<p> <label for="sno">学号:</label>
<input type="text" id="sno" name="sno" required>
</p>
<p>
<label for="rid">出租物品ID:</label>
<input type="text" id="rid" name="rid" required>
</p>
<p>
<label for="text">出租运动器械名:</label>
<input type="text" id="rname" name="rname" required>
<input type="submit" value="提交" id="submit-button"></p>
</form>
</div>
用户发布的内容检查代码来自Newcheck.jsp,关键代码如下：
request.setCharacterEncoding("utf-8");
String sno = request.getParameter("sno");
String rid = request.getParameter("rid");
String rname= request.getParameter("rname");
System.out.println(rname);
try {
String sql = "insert into rental_item(sno,rid,rname) values('"+sno+"','"+rid+"','"+rname+"')";
Class.forName(DBDRIVER);
conn = DriverManager.getConnection(DBURL);
pstmt = conn.prepareStatement(sql);
int result = pstmt.executeUpdate();
if (result > 0) {
flag = true;
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (pstmt != null) {
pstmt.close();
}
if (conn != null) {
conn.close();
}
} catch (Exception e) {
e.printStackTrace();
}
}
%>
<%
if (flag) { // 注册成功，应该跳转到 success.jsp
%>
<jsp:forward page="success.jsp" />
<%
} else { // 注册失败，跳转到 failure.jsp
%>
<jsp:forward page="failure.jsp" />
<%
}
%>
用户发布成功的界面代码如下，来自success.jsp:
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品出租信息发布成功</title>
<style type="text/css">
body {
background-color:#f0f0f0;
background-repeat: no-repeat;
background-size:auto;
backdrop-filter: blur(1px);
}
</style>
</head>
<body>
<h1>商品出租信息发布成功</h1>
<%
//数据库连接，因为涉及密码故不展开
request.setCharacterEncoding("utf-8");
String rid= request.getParameter("rid");
String sno= request.getParameter("sno");
String rname= request.getParameter("rname");
try {
Class.forName("com.mysql.cj.jdbc.Driver");
conn = DriverManager.getConnection(url,user, password);
stmt = conn.createStatement();
rs = stmt.executeQuery("select * from rental_item where rid='"+rid+"' and sno='"+sno+"'");
} catch (Exception e) {
e.printStackTrace();
}
if (rs != null && rs.next()) {
%>
<table>
<tr>
<th>出租者学号</th>
<th>商品</th>
<th>商品id</th>
</tr>
<%
do {
%>
<tr>
<td><%= rs.getString("sno") %></td>
<td><%= rs.getString("rname") %></td>
<td><%= rs.getString("rid") %></td>
</tr>
<%
} while (rs.next());
%>
</table>
<%
} else {
%>
<p>没有发现</p>
<%
}
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (stmt != null) {
try {
stmt.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
%>
</body>
</html>
用户发布商品失败的代码如下，来自failure.jsp:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<p>注册失败！该商品ID与他人重合</p>
</body>
</html>
3.用户查询
用户查询表单接收的参数传给Newcheck22.jsp，在Newcheck22.jsp中连接数据库，通过sql语言进行查询并判断是否查询到内容，若查询到内容则跳转到success2.jsp，对查询结果进行输出操作；
若查询失败则跳转到faliure1.jsp提醒用户查询操作失败；
用户查询功能的html代码来自xingxing.jsp如下:
<div id="content">
查询心动的运动好物
<form method="post" action="Newcheck22.jsp" onSubmit="return validate(this)" accept-charset="UTF-8">
<p>
<label for="rnametxt">运动好物:</label>
<input type="text" id="rnametxt" name="rnametxt" >
</p>
<p><br><br><br></p>
<p>
<label>出租者学号:</label>
<input type="text" name="sno">
<input type="submit" value="查询" id="submit-button">
</p>
</form>
</div>
用户查询功能的Newcheck22.jsp的关键代码如下：
try {
String sql ="select sno, rname from rental_item where rname = ? or sno = ?";
Class.forName(DBDRIVER);
conn = DriverManager.getConnection(DBURL);
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, rnametxt);
pstmt.setString(2, sno);
rs = pstmt.executeQuery();
if (rs.next()) {
// 如果有内容，则此处执行，表示查询出来，合法用户
flag = true;
}
} catch (Exception e) {
} finally {
try {
conn.close(); // 连接一关闭，所有的操作都将关闭
} catch (Exception e) {
}
}
%>
<%
if (flag) {
%>
<jsp:forward page="success2.jsp" />
<%
} else {
%>
<jsp:forward page="failure1.jsp" />
<%
}
%>
用户查询成功跳转到的success2.jsp的关键代码如下：
try {
Class.forName("com.mysql.cj.jdbc.Driver");
conn = DriverManager.getConnection(url,user, password);
stmt = conn.createStatement();
rs = stmt.executeQuery("select sno,rname from rental_item where rname='"+rnametxt+"' or sno='"+sno+"'");
} catch (Exception e) {
e.printStackTrace();
}
if (rs != null && rs.next()) {
%>
<table>
<tr>
<th>出租者学号</th>
<th>商品</th>
</tr>
<%
do {
%>
<tr>
<td><%= rs.getString("sno") %></td>
<td><%= rs.getString("rname") %></td>
</tr>
<%
} while (rs.next());
%>
</table>
<%
} else {
%>
<p>No results found.</p>
用户查询失败的主要failure.jsp的代码如下：
<meta charset="utf-8">
<title>查询失败</title>
<style type="text/css">
body {
background-image: url("true.jpg");
background-repeat: no-repeat;
background-size: cover;
font-family: Arial, sans-serif;
}
#con{text-align: center;
}
</style>
</head>
<body>
<div id="con">非常抱歉，我们会继续增加商品种类的</div>
</body>
五、界面设计
用户登录界面
用户个人中心
用户发布成功界面success.jsp
用户发布失败界面failure.jsp界面
用户查询成功界面success2.jsp
用户查询失败界面failure1.jsp
六、心得和改进方向
- 心得
关于表单参数在输入中文时总是乱码的问题：
解决：
第一步：在form表单中添加accept-charset="UTF-8"
第二步：在接收表单数据的jsp中添加：request.setCharacterEncoding("utf-8");
关于一个系统的建立：
首先建立数据库，再写html页面，对应html呈现的功能通过jsp与数据库进行连接；
2、改进方向
第一个改进方向：社区发布页面
类似淘宝首页，任何人都可以看到：相关商品，出租状态和时间，图片
第二个改进方向：用户个人中心
用户可以发布商品，管理自己的出租商品，查看自己的请求订单
第三个改进方向：管理员个人中心
管理员可以审核用户发布的信息，可以增删商品
改进完的系统流程大致为：
7982
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
