小组成员 | 负责部分 |
徐宁阳 | servlet |
王子晨 | MySQL数据库搭建及jdbc |
李奇 | web界面 |
1.系统概述
在IntelliJ IDEA平台上,实现了二手书城系统。二手书城网站是我们结合了自身情况,在了解了班级、学校的同学的一些需求的基本情况下,为解决许多同学看书难,找书难,借书难等问题而编写的网站,通过此网站希望将资源整合并有效解决资源浪费等问题,最终实现书籍共享、知识共享、资源共享。数据库结构有多种成分,包括:数据表、记录、字段等。而该数据库结构由商家、管理员、买家构成,包含订单、书籍、购物车、用户、回收、评论等数据表。主体功能有:二手书城的首页页面、商品展示区、商品详情、购物车、订单、广场、后台管理。买家:首页有美观大气、简洁明了的前端页面,相应的商品展示,简洁易懂的导航栏及搜索框;商品展示区展示管理员审核通过的书籍供客户进行挑选;若有中意书籍,可进入商品详情旋入购物车或者立即购买;购物车可就行结算和删除;订单则是在商品详情区购买和购物车结算生成的订单,可进行订单记录的删除。商家:同样可以进行购买,还有着后台管理,可在其中添加想要售卖的书籍和修改书籍的相关信息,允许其操作属于自己售卖的书籍。管理员:有着最大的权限,可以购买,可以在后台审核商家书籍,修改删除书籍,删除订单。广场是大家都可以在其中发表动态,比如发表自己想要的二手书和想要售卖的二手书。这就是二手书城的总体概述,尽最大的努力实现功能,满足用户需求。
2.系统功能分析
主页:顶部实现注册和登录功能,导航栏实现首页、商品、市场、购物车、订单等网页的链接跳转,以及实现书本的分类和搜索框的搜索功能。中间区域包括热门书籍和推荐书本,并实现图片轮播功能;网站的公告以及搜索榜的实现。底部区域为服务保障以及版权相关信息。
商品页:从数据库读取所有的在售书本展示在页面中,书本信息包括图片、书名、价格、月销等,通过点击书本图片或书名可以进入到商品详情页,在商品详情页也要展示图片的基本信息还要加上库存提示,并且通过点击“+”"-"按钮实现商品数量的变化,实现数量不能大于库存并且不能小于1的约束条件,同时显示出对应数量的书本的总金额,最后可以通过此页实现加入购物车和立即购买的功能,加入购物车将商品信息传入到购物车页面,而立即购买将转入订单页提示购买信息。
购物车、订单、市场三个页面是相对于顾客而言的,若未登录将提示“先登录”。
购物车:此界面展示对应用户对商品进行加入购物车操作的信息,包括图片、数量总金额等,用户可对此商品进行删除或结算等功能,相应的在数据库中也进行删除操作,同时保证结算时跳转到订单页面。
订单页:订单页展示的是用户在确认购买商品后生成相应的订单,包括订单号、用户名、书本编号、数量、总金额、日期等属性。同时实现数据库中相应书本月销增加对应数量而库存减少相同数量的条件。
市场页:市场页是用户发表评论的地方,在登录状态下,用户可通过上方文本框编辑文字并发表在市场中,也可通过搜索栏搜索对应关键字的用户的评论,并且设置敏感词汇的不搜索情况并提示重新输入。下方是展示其他用户的评论的区域,可以通过此区域看到其他用户的基本信息及评论内容,基本信息包括其他用户头像,昵称,发表时间等,并且实现每一个用户发表的评论内容按时间排序,最新评论的内容在最上面。
注册页:注册用户需输入用户名,手机号,学号,密码,学院和班级,其中手机号以数字“1”开头,第二位为3/4/5/8且总位数为11位,用正则表达式实现,学号设置为统一位数,密码实现隐藏且需为数字字母混合使用,学院与班级实现级联显示。注册成功后跳转到登录页面以登录,同时在数据库中登记该用户的对应信息,否则提示重新注册。
登录页:通过获取数据库中已注册的对应用户的相关信息来判定是否登录成功,即用户名与密码是否正确。
3.主要内容
页面1:首页
功能说明:本页面是项目的首页界面,主要实现项目主体功能的展示和导航栏的链接地址的说明,实现“预约回收”、“商家申请”、“反馈建议”的实现界面,并根据销量以及用户的关键搜索词条对书本进行热销和热搜的展示,导航栏书本的多种分类也能让用户更加方便的进入相应类型书本的界面。
主要代码:
<!-- 顶部区 -->
<nav>
<div class="nav">
<img src="images/logo.png" alt="">
<div>
<a href="" target="_blank">首页</a>
<a href="commodity.jsp" target="_blank">商品</a>
<a href="comment.jsp">广场</a>
<a href="javascript:;" onclick="islog()">购物车</a>
<a href="javascript:;" onclick="islog()">订单</a>
</div>
</div>
<div class="nav_butt">
<a href="LoginE.jsp" class="login">登录</a>
<a href="Register.jsp" target="_blank" class="reg">注册</a>
</div>
</nav>
<!-- 热卖好物 -->
<div class="clear"></div>
<div class="other">
<div class="block"></div>
<h2>热卖好物</h2>
</div>
<div class="hot_sell">
<%
bookinfor_impl book = new bookinfor_impl();
String name = request.getParameter("name");
String sql = null;
sql = "select * from bookinfor order by mon_sell desc limit 10";
List<bookinfor> lst = book.getboooks(sql);
request.setAttribute("bookLst", lst);
%>
<c:forEach items="${bookLst}" var="book">
<div class="card">
<!-- 内层边框 -->
<div class="card_box">
<a href="showdetail.jsp?depiction=${book.depiction}&book_pic=${book.book_pic}
&new_price=${book.new_price}&quantity=${book.quantity}&identifier=${book.identifier}" ><img src="${book.book_pic}" alt=""></a>
<a href="showdetail.jsp?depiction=${book.depiction}&book_pic=${book.book_pic}
&new_price=${book.new_price}&quantity=${book.quantity}&identifier=${book.identifier}" class="desc">${book.depiction}</a>
<div class="new_price">¥${book.new_price}</div>
<div class="old_price"><del>¥${book.old_price}</del></div>
<div class="mon_sell">月销 ${book.mon_sell}</div>
</div>
</div>
</c:forEach>
</div>
<!-- 侧边栏 -->
<aside>
<div class="aside_area">
<div>
<a href="javascript:;"><img src="images/客服.png" alt=""></a>
<a href="javascript:;">客服</a>
</div>
<div>
<a href="javascript:;"><img src="images/反馈.png" alt=""></a>
<a href="javascript:;">反馈</a>
</div>
<div>
<a href="javascript:;"><img src="images/举报.png" alt=""></a>
<a href="javascript:;">举报</a>
</div>
<div>
<a href="javascript:;" title="回到顶部"><img id="gotoTop" style="display: none;" src="images/回到顶部3.png" alt=""></a>
</div>
</div>
</aside>
页面2:全部商品界面
功能说明:将数据库库中的状态为1的商品(已审核通过的商品)展示到该页面,并且点击不同的书本时展示不同的商品详情,此外还能根据输入的关键词进行模糊查询。
主要代码:
<main>
<%-- 最新区域 --%>
<div class="new_title">全部商品</div>
<section class="new_box">
<%
String pointname = request.getParameter("pointname");
System.out.println("要求名为:"+pointname);
bookinfor_impl book = new bookinfor_impl();
String name = request.getParameter("name");
String sql = null;
if (name == null && pointname==null) {
sql = "select * from bookinfor where quantity>0 and status=1";
} else if(name == null && pointname!=null){
sql = "select * from bookinfor where kinds='"+pointname+"' and quantity>0 and status=1";
}else if (name!=null && pointname!=null){
sql = "select * from bookinfor where quantity>0 and status=1 and depiction like '%" + name + "%' and kinds='"+pointname+"'";
}
// 最后一种情况是name不为空,pointname为空
else {
sql = "select * from bookinfor where quantity>0 and status=1 and depiction like '%" + name + "%'";
}
List<bookinfor> lst = book.getboooks(sql);
request.setAttribute("bookLst", lst);
%>
<c:forEach items="${bookLst}" var="book">
<%-- 内层边框 --%>
<div class="card">
<!-- 内层变框 -->
<div class="card_box">
<a href="showdetail.jsp?depiction=${book.depiction}&book_pic=${book.book_pic}
&new_price=${book.new_price}&quantity=${book.quantity}&identifier=${book.identifier}" ><img src="${book.book_pic}" alt=""></a>
<a href="showdetail.jsp?depiction=${book.depiction}&book_pic=${book.book_pic}
&new_price=${book.new_price}&quantity=${book.quantity}&identifier=${book.identifier}" class="desc">${book.depiction}</a>
<div class="new_price">¥${book.new_price}</div>
<div class="old_price"><del>¥${book.old_price}</del></div>
<div class="mon_sell">月销 ${book.mon_sell}</div>
</div>
</div>
</c:forEach>
</section>
</main>
页面3:注册页面
实现功能:能够实现用户的注册并进行相应的限制,如待注册的名字不能和已经注册的用户相同、学号和电话号码需按格式输入、密码需由数字和字母组成且位数在6到12之间,下拉框选择相应的学院后级联出现所选学院的专业。
主要代码:
<!-- 主体界面 -->
<main>
<h1>账号注册</h1>
<p>已有账号,<a href="./LoginE.jsp">去登陆>></a></p>
<form action="RegisterServlet">
<input class="inp" type="text" name="username" id="userName" placeholder="请输入用户名" autofocus onkeyup="showHint(this.value)">
<div id="showNameInfo"></div>
<input class="inp" type="text" name="number" id="phone_num" placeholder="请输入手机号" onblur="checkphone()">
<div id="phone_tip"></div>
<input class="inp" type="text" name="sno" id="sno_num" placeholder="请输入学号" onblur="checksno()">
<div id="sno_tip"></div>
<input class="inp" type="password" name="pwd" id="pass" placeholder="请设置登陆密码" onkeyup="check()">
<div id="remind1"></div>
<input class="inp" type="password" name="password_ch" id="pass_ch" placeholder="请确认密码" onkeyup="check()">
<div id="remind2"></div>
<select name="college" id="college" required>
<!-- 此处的required和如下的value=""结合能设置下拉框的必选,单独required的没有作用,因为已有值”请选择学院” -->
<option value="">请选择学院</option>
</select>
<select name="major" id="major" required>
<option value="">请选择班级</option>
</select>
<button type="submit">注册</button>
</form>
</main>
页面4:商品详情页
实现功能:能查看对应书本的详细信息,包括价格、名称、库存、总价,并且能实现立即购买和加入购物车的功能。
主要代码:
<!-- 主体部分 -->
<div class="center_con clearfix">
<div class="main_menu fl"><img src="<%=request.getParameter("book_pic")%>" id="book_pic"></div>
<div class="goods_detail_list fr">
<h3 id="depiction"><%=request.getParameter("depiction")%></h3>
<br>
<div class="prize_bar">
<div class="show_prize fl">¥<em id="item_price"><%=request.getParameter("new_price")%></em></div>
</div><br />
<div class="goods_num clearfix">
<div class="num_name fl">数量:</div>
<div class="num_change">
<table>
<tr>
<td>
<input type="button" value="-" onclick=subNum();>
<input type="text" value="1" id="num">
<input type="button" value="+" onclick=addNum();>
</td>
</tr>
</table>
</div>
</div>
<div style="margin-top: 20px">库存:<span id="sum"><%=request.getParameter("quantity")%></span></div>
<div class="total">总价:<span id="sumPrice" style="font-size: 20px; color: red"><%=request.getParameter("new_price")%></span><span>元</span></div>
<div class="operate_btn">
<a href="javascript:;" class="add_car" onclick="addtrolley()">加入购物车</a>
<a href="javascript:;" class="tobuy" onclick="addorder()">立即购买</a>
</div>
</div>
</div>
页面5:购物车页面
实现功能:根据登陆的用户将数据库中购物车表中相应的数据展示给用户,能够在该进行购物车记录的删除或者结算。
主要代码:
<%
trolley_impl trolley = new trolley_impl();
String sno = String.valueOf(session.getAttribute("sno"));
String name = request.getParameter("name");
String sql;
if(name==null){
sql="select * from trolleyinfor where sno="+sno;
}else{
sql="select * from trolleyinfor where depiction like '%" + name +"%'";
}
List<trolley> lst = trolley.getTrolley(sql);
request.setAttribute("trolleyList",lst);
%>
<h1 id="empty" style="margin-top: 70px">购物车空空如也</h1>
<c:forEach items="${trolleyList}" var="trolley">
<div class="supplier" id="suppliers">
<div class="supplierBooks" >
<div class="supplierBookImage">
<img src="${trolley.book_pic}" alt="">
</div>
<div class="supplierBookDescription">
${trolley.depiction}
</div>
<div class="supplierBookPrice">
¥<sapn>${trolley.sum_price}</sapn>
</div>
<div class="supplierBookNum">
${trolley.bookNum}
</div>
<div class="bookDelete">
<a href="DeltroServlet?sno=${trolley.sno}&depiction=${trolley.depiction}"
class="del" onclick="return decide()">删除</a>
<a class="tobuy" href="troTobuyServlet?username=${username}&identifier=${trolley.identifier}&quantity=${trolley.bookNum}&order_price=${trolley.sum_price}&sno=${trolley.sno}&depiction=${trolley.depiction}"
onclick="return checkbuy()">结算</a>
</div>
</div>
</div>
</c:forEach>
页面6:订单页面
实现功能:根据登陆的用户将数据库中订单表中相应的数据展示给用户,能够在该进行订单记录的删除和订单的搜索。
主要代码:
<%--左部导航--%>
<div class="left_nav">
<h4 style="font-weight: 500">全部功能</h4>
<h5 style="font-weight: 400">已买到的宝贝</h5>
<h5 style="font-weight: 400">我的发票</h5>
<h5 style="font-weight: 400">退款维权</h5>
</div>
<div class="order">
<div class="top">
<div style="width: 480px">商品</div>
<div style="width: 170px">单价</div>
<div style="width: 170px">数量</div>
<div style="width: 170px">付款</div>
</div>
<h1 style="text-align: center" id="empty">您暂无订单!</h1>
<c:forEach items="${orderLst}" var="order">
<div class="card">
<div class="top">
${order.o_date} 订单号:${order.o_num}
<a href="DelorderServlet?o_num=${order.o_num}" class="delete" onclick="return decide()"><img style="margin-top:6px; margin-right: 10px; width: 30px; height: 30px; display: inline; float: right;" src="images/删除.png" title="删除此订单"></a>
</div>
<img src="${order.book_pic}">
<div class="depiction">
<p id="depiction">${order.depiction}</p>
</div>
<div class="price">
<p>¥${order.new_price}</p>
</div>
<div class="quantity">
<p>${order.quantity}</p>
</div>
<div class="order_price">
<p>¥${order.order_price}</p>
</div>
</div>
</c:forEach>
</div>
</main>
<%--订单区域end--%>
页面7:后台管理页面
实现功能:显示系统当前时间,展示数据库中所有书本的信息、所有的订单、所有帖子、待审核的商品,并且能够管理数据库中的商品信息(更改和删除(商家能够发布新品))、商品的查询,能够对审核的商品执行“通过”或“打回”的操作。
主要代码:
<%
Integer userid = (Integer) session.getAttribute("userid");
String supplier = String.valueOf(session.getAttribute("username"));
bookinfor_impl book = new bookinfor_impl();
String name = request.getParameter("name");
String sql = null;
if (name == null) {
sql = "select * from bookinfor";
}else {
sql = "select * from bookinfor where depiction like '%" + name + "%'";
}
// 需保证管理员能查看所有供应商的商品,各供应商只能查看自己提供的商品,且需保证某个供应商在查询时不能查询其他供应商的商品
if (userid==1){
if (name==null) {
sql = "select * from bookinfor where supplier='" + supplier + "'";
}
else {
sql = "select * from bookinfor where supplier='"+supplier+"' and depiction like '%" + name + "%'";
}
}
List<bookinfor> lst = book.getboooks(sql);
request.setAttribute("bookLst", lst);
%>
<table border="1" cellspacing="0" cellpadding="4" align="center">
<tr>
<th>书目简图</th>
<th>编号</th>
<th>状态</th>
<th id="identifier">名称</th>
<th>数量(件)</th>
<th>类别</th>
<th>月销(件)</th>
<th>价格(元)</th>
<th>上架日期</th>
<th>供货商</th>
<th colspan="2">操作</th>
</tr>
<c:forEach items="${bookLst}" var="book">
<tr>
<td><img src="${book.book_pic}" alt=""></td>
<td>${book.identifier}</td>
<td>${book.status}</td>
<td>${book.depiction}</td>
<td>${book.quantity}</td>
<td>${book.kinds}</td>
<td>${book.mon_sell}</td>
<td>${book.new_price}</td>
<td>${book.put_time}</td>
<td>${book.supplier}</td>
<td><a href="DelbookServlet?identifier=${book.identifier}" class="delete" onclick="return decide()">删除</a></td>
<td><a href="updatebook.jsp?identifier=${book.identifier}&depiction=${book.depiction}&supplier=${book.supplier}
&kinds=${book.kinds}&new_price=${book.new_price}&quantity=${book.quantity}&book_pic=${book.book_pic}
&put_time=${book.put_time}" class="update">修改</a></td>
</tr>
</c:forEach>
</table>