网上商店前台功能的设计与实现

长沙学院
课程设计说明书
题目网上商店前台功能的设计与实现系(部) 数学与计算机科学
专业(班级) x
x
学号 B
指导教师肖霞
起止日期2016.12.5～2016.12.16
课程设计任务书
课程名称：Web应用程序课程设计
设计题目：网上商店前台功能的设计与实现
已知技术参数和设计要求：
问题描述（功能要求）：
分析设计一个网上商店的前台功能部分。

完成本系统的如下功能：
展示特定的某类商品：展示的方式有多种，可以按类别、按销售排行榜、按上架时间等，有层次的展示商品，提高用户的购买兴趣。

对于某种商品，除显示商品信息以外，还可以附加评论、推荐相关类型商品。

商品查询：根据多种条件来查询，比如商品名称、价格、等特征信息。

能进行模糊匹配，包含关键字的商品都能查到。

购物车：只有注册用户才能购买。

为用户提供购物车，购物车同类商品的数量可以修改，也可以删除购物车里已有的商品。

购物车信息保存，便于下次购物时继续选购商品。

2. 运行环境要求：
（1）客户端：
Windows操作系统
IE浏览器
（2）服务器：
windows 操作系统
Tomcat web 服务器
MySQL 数据库服务器
3. 技术要求：
1)需求分析规格说明书与用例规约
2)系统采用MVC架构，类图，时序图
3)系统完整编码
设计工作量：
2周
工作计划：
(1) 2014级信息3班
16课时：理论讲座
20课时：上机、调试。

计算机系机房
4课时：答辩。

计算机系机房。

（具体时间地点老师先申请，机动安排）
指导教师签名：日期：2016.12.2
教研室主任签名：日期：
系主任签名：日期：
学院课程设计鉴定表
摘要
20世纪90年代以来，计算机和网络技术促进了电子商务的产生和广泛应用，对传统商业业态和经营方式提出了挑战，网上商店作为一种新型业态，使大量贸易活动和信息传递在网络上进行。

本文主要介绍了网上图书商城的设计与实现，本课程设计主要JSP+Javabean+Servlet技术，采用了B/S架构模式。

使用当前流行的动态网页技术JSP实现前台的显示逻辑业务，实体类Javabean实现数据封装，Servlet实现后台的控制，应用了MySQL数据库以及JDBC技术访问数据库。

设计模式主要是采用MVC，MVC即Model（模型）-View（视图）-Controller（控制器）。

使用该种模式可以使具有更好的可扩展性和使功能的增强更容易些。

该网上电脑商城具有注册，浏览商品，商品搜索，在线购买商品以及管理员后台管理的功能。

关键词：表单，会话，MVC，电子商务系统，图书系统，javaweb
目录
1 设计容与要求 (1)
2需求分析 (2)
2.1需求描述 (2)
2.2用例规约 (2)
3概要设计 (3)
3.1总体设计 (3)
3.2功能模块设计 (4)
3.3数据库设计 (4)
3.4页面设计 (4)
3.5接口设计（写出类名，类的方法名，方法的参数的定义和返回值含义。

） (5)
3.6运行设计（即系统运行时服务器是用的什么？浏览器用了什么？） (5)
3.7出错处理设计（写出出错的原因和错误的详细信息） (5)
4详细设计 (6)
4.1 方法流程设计 (6)
5编码 (7)
6 结论 (8)
参考文献 (9)
附录 (10)
附录A 本系统的组成 (10)
附录B 程序源代码(经过注释的关键代码) (10)
1 设计容与要求
正文排版格式：宋体五号、单倍行距、首行缩进2字符。

标题排版格式：宋体小四号、单倍行距、段前0.5行，段后0.5行。

正文排版格式：宋体五号、单倍行距、首行缩进字符。

标题排版格式：宋体小四号、单倍行距、段前0.5行，段后0.5行。

正文排版格式：宋体五号、单倍行距、首行缩进字符。

标题排版格式：宋体小四号、单倍行距、段前0.5行，段后0.5行。

2需求分析
2.1需求描述
网上书店系统是电子商务的一类重要应用领域，通过它可以进行在线商品交易。

随着互联网的普及以及电子商务的发展和人们购物理念与购物方式的改变，网上书店系统将有着巨大的市场潜力。

本文在研究电子商务，特别是网上书店系统的基本理论和关键技术的基础上，对网上书店系统的发展背景，各种实现技术，以及各种实现技术的优缺点和网上书店系统的安全策略进行了分析。

2.11 网上书店系统：
1.用户注册：
能够提供新用户注册，并根据用户提供的用户名、用户、密码、手机进行验证。

2. 用户登录：
用户能够输入用户名，密码进行登录。

3. 商品信息：
包括商品的编号、名称、价格、库存等信息。

4. 商品浏览：
可以按类别、按销售排行榜、按上架时间等，有层次的展示商品，提高用户的购买兴趣。

5. 购物车管理：
只有注册用户才能购买。

为用户提供购物车，购物车同类商品的数量可以修改，可以删除购物车已有的商品。

2.12 商品：图书，包括图书名称(Bname varchar(50))、图书价格(Bprice float)、图书数量(Bno int)。

2.13 商品分类：一级分类：按类别分类、按价格分类。

二级分类：按类别分类有文学、小说、程序设计。

2.14 查询的条件：能查看指定名称的图书，能查看指定类别的图书，能查看指定价格的图书。

2.2用例规约
未注册的用户：能浏览图书，点击按类别分类就能浏览文学、小说、程序设计的图书，点击按价格分类就浏览不同价格的图书。

如需加入购物或者购买图书则需要注册并且登陆之后才能进行。

已注册的用户：登陆用户并且通过验证之后，能浏览图书，点击按类别分类就能浏览文学、小说、程序设计的图书，点击按价格分类就浏览不同价格的图书。

能将喜欢的图书加入购物车并下订单购买图书。

3概要设计
3.1总体设计
按照功能划分系统，画出模块设计图(即功能分解图)比如用户管理模块包括用户登录和注册
画出框架设计图（MVC方案，Model-2图）
画出每个功能模块对应的的视图层、控制器层和模型层。

对前述的框架设计图进行具体化的应用。

假设此系统的组成如下：（请完善下图，掉其中的。

）
com.abc.servlet
BookSevlet
com.abc.dao
BookDao
com.abc.bean
Book
com.abc.db
DataAccess
*.jsp
3.2功能模块设计
功能模块说明：对每个模块进行详细的说明。

1.用户模块（功能有：注册，激活，登陆，修改密码，退出）
2.分类模块（功能有：显示所有分类）
3.图书模块（功能有：分页查看指定分类图书，分页查看指定名称的图书，分页查
看指定条件的图书，查看图书详情）
4.购物车模块（功能有：向车中添加商品，查看我的购物车，修改商品数量，删除
商品，批量删除商品）
5.订单模块（功能有：生成订单查看我的订单，查看订单详情，取消订单，确认收
货，支付订单）
3.3数据库设计
er表
2.Book表
根据数据流程分析，网上书城的全局E-R 模型如图所示。

根据设计规划的主要实体有：用户、图书分类、图书、购物车、订单、管理员。

3.31 E-R 图：
图书
图书名称
图书价格 图书数量
用户
用户名 用户姓名 密码 购物车
商品价格 商品数量 图书库存
管理
购买 属于
地址
类别
3.32表结构1. User表
2.B表
3.S表
3.4页面设计1.首页
2.注册页面
3.登录页面
4.浏览全部商品
6.分类查询
8.购物车
3.5接口设计
3.6出错处理设计
1.注册表单校验
●用户名：
➢不能为空；
➢长度必须在2~15之间；
➢不能是已注册过的；
●登录密码：
➢不能为空；
➢长度必须在2~15之间；
●Email：
➢不能为空；
➢必须是正确的Email格式；
➢不能是注册过的Email；
表单校验中，用户名是否被注册过、Email是否被注册过都需要请求服务。

2.登录表单校验
●用户名：
➢不能为空；
➢长度必须在2~15之间；
➢用户名是否已经存在；
●登录密码：
➢不能为空；
➢长度必须在2~15之间；
登录表单校验使用的JQuery完成，其中用户名是否存在需要使用JQuery的ajax()向服务器发送异步请求。

4详细设计
4.1 方法流程设计
LoginDao类里的login(String username,String pwd)方法处理的流程是
●获取数据库的连接
●编写sql语句
●创建预编译语句对象
●执行预编译语句，返回结果集对象
●判断结果集是否有数据
●如果有，则返回真
●如果无，则返回假。

BookDAO类里的Book(String Bname,int Bprice,String type,String img)方法处理的流程是
●获取数据库的连接
●编写sql语句
●创建预编译语句对象
●执行预编译语句，返回结果集对象
●判断结果集是否有数据
●如果有，则返回真
●如果无，则返回假。

BookSearchDAO类里的Book(String Bname,int Bprice,String type,String img)方法处理的流程是●获取数据库的连接
●编写sql语句
●创建预编译语句对象
●执行预编译语句，返回结果集对象
●判断结果集是否有数据
●如果有，则返回真
●如果无，则返回假。

5编码1.用户登录
2.用户注册
3.用户注销
4.浏览全部商品
5.搜索商品
6 结论
本次设计主要用的思想是MVC设计模式，Jsp充当View的角色，servlet充当Conteoller,JavaBen(Book)充当Model，实现界面与逻辑的分离，通过传递参数进行调用，Jsp页面通过发送一个操作类型变量，从而使得servlet获知应当进行的操作，并通过调用javabean进行实际的执行，这样页面与逻辑就得到了分离，互不干涉和影响实现了购物的一些简单操作，本程序没有用到数据库的知识。

另外用到了我们学过的很多知识，有html,java,jsp,servlet,javaben等知识，这样一来加强我们对现正在学的知识的巩固以及对以前学的html和java的回顾，掌握这些知识的综合运用，对方法，类的进一步加深，同时也让学生通过实验来感受静态网页和动态的网页不同。

不仅如此，还加强我们的动手能力和对出现问题的解决能力以及对我们自身所学知识的一个检验。

7参考文献
[[1] 贾素玲. JSP应用开发技术[M]. ：清华大学，2007.
[2] 鑫. Java Web开发详解-XML+XSLT+Servlet+JSP深入剖析与实例应用[M]. ：电子工业, 2006.
[3] 连洪武. Eclipse Web开发从入门到精通[M]. ：清华大学，2007.
[4] David Turner, Ph.D. Java Web Programming with Eclipse[EB/OL].
/turner/java_web_programming/
[5] 石志国，薛为民，董洁.JSP应用教程.：清华大学.交通大学，2004
[6] 曙光.JSP开发实例完全剖析.：中国电力，2006
[7] 易.JSP高级程序设计.人民邮电，2006
8附录
程序源代码
LoginDAO
public class LoginDAO {
public User LogIn(String username,String password){
Connection con =Connect.getConnection();
String sql ="select * from TABLE1 where username=? and password=?";
PreparedStatement pst = null;
ResultSet rs = null ;
User u = null ;
try {
pst = con.prepareStatement(sql);
pst.setString(1, username);
pst.setString(2, password);
rs = pst.executeQuery();
if (rs.next()) {
u = new User();
u.setUsername(rs.getString("username"));
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return u;
}
}
LoginServlet
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* see HttpServlet#HttpServlet()
*/
public LoginServlet() {
// TODO Auto-generated constructor stub
}
/**
* see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//使用request读取与客户端请求有关的信息和表单数据
//使用response指定HTTP应答状态代码和应答头
LoginDAO dao = new LoginDAO();
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
String name =request.getParameter("username");//定义叫name的字符型变量，并给他赋值
String pwd =request.getParameter("password");
User user = dao.LogIn(name, pwd);
HttpSession session =request.getSession();//从客户端获得一个session的对象,这个对象包含客户端持有的相关信息用来区别每个客户端
PrintWriter out = response.getWriter();//获得一个输出流,用来响应客户端发出的请求，使用out把应答容发送到浏览器
String msg=null;
if(user!=null){
session.setAttribute("user", user);//把user 的值保存在session中，就是说把一个叫user 的数据打包成“user”存在session中。

msg="a.jsp";}
else {msg="登陆失败！"+"<a href='localhost:8080/TT/login.html'>back</a>";}
RequestDispatcher rd=request.getRequestDispatcher(msg);//转发方式
rd.forward(request,response);//传递请求
}
/**
* see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
Register.jsp
boolean flag;
Request a=new Request();
flag=a.Requset(user);
if(flag){
User p=(User)session.getAttribute("user");
out.println("您已注册成功，可以登陆了哦!");
out.print("用户名："+p.getusername()+"\n"+":"+p.getEMAIL()+"\n"+"<a
href='localhost:8080/TT/login.html'>登陆</a>");
}else {out.println("注册失败！"+"<a href='localhost:8080/TT/NewFile.jsp'>back</a>"); }
Request
public class Request {
public boolean Requset(User usr) //定义一个型参
{
Connection con=Connect.getConnection();
PreparedStatement pst=null;
boolean flag=false;
ResultSet rs=null;
try{
String sql1="select *from TABLE1 where username=? or EMAIL=?";
pst=con.prepareStatement(sql1);
pst.setString(1, usr.getusername());
pst.setString(2, usr.getEMAIL());
rs=pst.executeQuery();
if(rs.next()){
flag=false;
}
else{
String sql2="insert into TABLE1 (PHONE,EMAIL,username,password)values(?,?,?,?)";
pst=con.prepareStatement(sql2);
pst.setString(1,usr.getPHONE());
pst.setString(2,usr.getEMAIL());
pst.setString(3,usr.getusername());
pst.setString(4,usr.getpassword());
pst.executeUpdate();
flag=true;
con.close();
pst.close();
}
}catch(Exception e){
e.printStackTrace();
}
return flag;
}
}
LogoutServlet
public class LogoutServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* see HttpServlet#HttpServlet()
*/
public LogoutServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
HttpSession session=request.getSession(true);
session.invalidate();//invalidate()实现系统的注销功能
response.sendRedirect("login.html");
}
/**
* see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
}
bookServlet
public class BookServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* see HttpServlet#HttpServlet()
*/
public BookServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
/**
* see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
ArrayList<Book>list=new BookDAO().getAllBook();
request.setAttribute("allBook", list);
request.getRequestDispatcher("showBook.jsp").forward(request,response);//请求转发}
}
BookDAO
public class BookDAO {
public ArrayList<Book> getAllBook() {
Connection conn = null;
PreparedStatement stmt = null;
ResultSet rs = null;
ArrayList<Book> list = new ArrayList<Book>();
try {
conn = Connect.getConnection();
String sql = "select * from Table2;";
stmt = conn.prepareStatement(sql);
rs = stmt.executeQuery();
while (rs.next()) {
Book book = new Book();
book.setBid(rs.getInt("Bid"));
book.setBname(rs.getString("Bname"));
book.setBprice(rs.getInt("Bprice"));
book.setType(rs.getString("type"));
book.setImg(rs.getString("img"));
list.add(book);// 向集合列表中添加对象
}
return list;
} catch (Exception ex) {
ex.printStackTrace();
return null;
} finally {
if (rs != null) {
try {
rs.close();
rs = null;
} catch (Exception ex) {
ex.printStackTrace();
}
}
if (stmt != null) {
try {
stmt.close();
stmt = null;
} catch (Exception ex) {
ex.printStackTrace();
}
}
}
}
public Book getBookById(int Bid) {
Connection conn = null;
PreparedStatement stmt = null;
ResultSet rs = null;
try {
conn = Connect.getConnection();
String sql = "select * from Table2 where Bid=?;";
stmt = conn.prepareStatement(sql);
stmt.setInt(1, Bid);
rs = stmt.executeQuery();
if (rs.next()) {
Book book = new Book();
book.setBid(rs.getInt("Bid"));
book.setBname(rs.getString("Bname"));
book.setBprice(rs.getInt("Bprice"));
book.setType(rs.getString("type"));
book.setImg(rs.getString("img"));
return book;
} else {
return null;
}
} catch (Exception ex) {
ex.printStackTrace();
return null;
} finally {
if (rs != null) {
try {
rs.close();
rs = null;
} catch (Exception ex) {
ex.printStackTrace();
}
}
if (stmt != null) {
try {
stmt.close();
stmt = null;
} catch (Exception ex) {
ex.printStackTrace();
}
}
}
}
}
showBook.jsp
<%
BookDAO bookDao = new BookDAO();
ArrayList<Book> list = bookDao.getAllBook();
if(list!=null&&list.size()>0)
{
for(int i=0;i<list.size();i++)
{
Book book = list.get(i);
%>
<div>
<dl>
<dt>
<a href="details.jsp?Bid=<%=book.getBid()%>"><img src="img/<%=book.getImg()%>" width="300"height="317"border="1"/></a>
</dt>
<dd class="dd_name"><font color="black">书名：<%=book.getBname() %></font></dd>
<dd class="dd_city">类别：<%=book.getType() %>&nbsp;&nbsp;<font color="red">价格:￥<%=book.getBprice() %></font></dd>
</dl>
</div>
<!-- 商品循环结束 -->
Detail.jsp
<%
BookDAO bookDao = new BookDAO();
Book book = bookDao.getBookById(Integer.parseInt(request.getParameter("Bid")));
if(book!=null)
{
%>
<td width="80%"valign="top">
<table>
<tr>
<td rowspan="5"><img src="img/<%=book.getImg()%>"width="300"height="317"/></td>
</tr>
<tr>
<td><B><%=book.getBname() %></B></td>
</tr>
<tr>
<td><font color="red">价格：￥<%=book.getBprice() %></font></td>
</tr>
<tr>
<td>类别：<%=book.getType() %></td>
</tr>
<tr>
<td>购买数量：<span id="sub"onclick="sub();">-</span><input type="text"
id="number"name="number"value="1"size="2"/><span id="add"onclick="add();">+</span></td> </tr>
<div id="cart">
<img src="img/buy.png"><a href="javascript:selflog_show(<%=book.getBid()%>)"><img src="img/sell.png"></a>
</div>
</td>
<%
}
%>
bookSeachSevlet
public class bookSearchServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* see HttpServlet#HttpServlet()
*/
public bookSearchServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("UTF-8");
String Bname=request.getParameter("Bname");
System.out.println(Bname);
booksearhDAO booksearhDao=new booksearhDAO();
Book book=booksearhDao.search(Bname);
System.out.println("9");
if(book!=null){
System.out.println("10");
HttpSession session=request.getSession();//创建会话，获取信息
session.setAttribute("book", book);
response.sendRedirect("book_search.jsp");//将客户引导至book_search.jsp页面}else{
request.getRequestDispatcher("/error.jsp").forward(request, response);
}
}
/**
* see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
}
BookSearchDAO
public class booksearhDAO {
public Book search(String Bname){
System.out.println("7");
Connection con=Connect.getConnection();
String sql="select * from Table2 where Bname LIKE ?";
PreparedStatement pst=null;
ResultSet rs=null;
Book u=null;
System.out.println("3");
try{
System.out.println("4");
pst=con.prepareStatement(sql);
pst.setString(1, Bname);
rs=pst.executeQuery();
System.out.println("5");
if(rs.next()){
System.out.println("6");
u=new Book();
u.setBid(rs.getInt("Bid"));
u.setBname(rs.getString("Bname"));
u.setBprice(rs.getInt("Bprice"));
u.setType(rs.getString("type"));
u.setImg(rs.getString("img"));
System.out.println(u.getBname());
System.out.println("2");
}
}catch(SQLException e){
e.printStackTrace();
}finally{
if(rs!=null){
rs.close();
}
if(pst!=null){
pst.close();
}
if(con!=null){
con.close();
}
}catch(Exception e2){
e2.printStackTrace();
}
}
System.out.println("1");
return u;
}
}
BookSearch.jsp
<%
Book book=(Book)session.getAttribute("book");
if(book!=null){
%>
<td width="100%"valign="top">
<table>
<tr>
<td rowspan="5"><img src="img/<%=book.getImg()%>"width="400"height="310"/></td>
</tr>
<tr>
<td><B><%=book.getBname() %></B></td>
</tr>
<tr>
<td><font color="red">价格：￥<%=book.getBprice() %></font></td>
</tr>
<tr>
<td>类别：<%=book.getType() %></td>
</tr>
<tr>
<td>购买数量：<span id="sub"onclick="sub();">-</span><input type="text"
id="number"name="number"value="1"size="2"/><span id="add"onclick="add();">+</span></td>
</table>
<div id="cart">
<img src="img/buy.png"><a href="javascript:selflog_show(<%=book.getBid()%>)"><img src="img/sell.png"></a>
</div>
</table>
</td>
<%
}
%>。