0、效果展示
1、概述
首先对现有系统进行分析,现有系统是信息的重要来源。分析已有系统的功能和实现,从而确定新系统的设计目标和模型。由于条件有限,调研主要是在网上进行。即通过在网上已有的网站注册成会员来了解其具备的功能。
1.从用户角度来看:
用户通过在线注册成为网站的用户,可以获得以下功能:商品浏览,购买商品,找回密码,修改密码,修改个人信息,商品简介、购物车、留言板等。
2.从网站的角度看:
(1)网站应该包含商品搜索功能:按商品名(模糊)查询。
(2)订单处理功能,确认订单方式:
(3)管理员管理:
查看用户信息,并根据用户信息和用户订单对商品进行发派。
(4)商品浏览
2、搭建环境
本文以实现一个定制服装网站为目标,从环境搭建到编码实现全过程讲述
我们使用javaweb、J2EE来构建定制服装网站,环境使用最新版jdk和tomcat,配合mysql数据库
开发工具使用idea(也可以使用eclipse),数据库管理工具使用Navicat Premium
开发框架使用JavaBean Servlet MVC结构;
没有使用SSH(Struts+Spring+Hibernate)或SSM(Spring+SpringMVC+MyBatis),这两个框架我们在别的项目中再介绍开发过程
在项目中会引入My97DatePicker作为前端日期时间选择工具,使用fckeditor作为富媒体编辑器(也可以使用百度的ueditor)
使用DWR(Direct Web Remoting)用于改善web页面与Java类交互,实现远程服务器端AJAX读取登录数据。
使用JSTL(Java server pages standarded tag library,即JSP标准标签库),此库是由JCP(Java community Proces)所制定的标准规范,它主要提供给Java Web开发人员一个标准通用的标签库,并由Apache的Jakarta小组来维护。开发人员可以利用这些标签取代JSP页面上的Java代码,从而提高程序的可读性,降低程序的维护难度。
3、数据表结构
表7 types类型表
名称 | 类型 | 长度 | 说明 |
id | int | 4 | 编号 |
name | varchar | 50 | 名称 |
表8 users 用户信息表
名称 | 类型 | 长度 | 说明 |
id | int | 4 | 编号 |
name | varchar | 50 | 名称 |
pwd | varchar | 50 | 密码 |
realname | varchar | 50 | 真实姓名 |
sex | varchar | 50 | 性别 |
age | varchar | 50 | 年龄 |
address | varchar | 100 | 地址 |
phone | varchar | 50 | 电话 |
| varchar | 100 | 邮件 |
code | varchar | 50 | 邮政编码 |
4、后端代码示例
package bean;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.Locale;
import util.DBConn;
public class ReckoningBean {
Connection conn = null;
Statement st = null;
ResultSet rs = null;
Boolean autoCommit = false;
int temp = 0;
public int insert(ArrayList al,String id){
int i = 0;
conn = DBConn.getConn();
try {
autoCommit = conn.getAutoCommit();
conn.setAutoCommit(false);
SimpleDateFormat formatter = new SimpleDateFormat ("yyyy-MM-dd kk:mm",Locale.getDefault());
Date currentDate = new Date();
String lastdate = formatter.format(currentDate);
st = conn.createStatement();
for(i = 0;i < al.size();i++){
ArrayList alRow = (ArrayList)al.get(i);
st.executeUpdate("update Goods set sums1=sums1+"+alRow.get(3)+" where id='"+alRow.get(0)+"'");
st.executeUpdate("insert into orders(userid,Goodsid,Goodsum,times,chima) values('"+id+"','"+alRow.get(0)+"','"+alRow.get(3)+"','"+lastdate+"','"+alRow.get(4)+"')");
}
if(i == al.size()){
conn.commit();
}
} catch (SQLException e) {
// TODO 自动生成 catch 块
try {
conn.rollback();
} catch (SQLException e1) {
// TODO 自动生成 catch 块
e1.printStackTrace();
}
e.printStackTrace();
temp = -1;
} finally{
try {
conn.setAutoCommit(autoCommit);
} catch (SQLException e) {
// TODO 自动生成 catch 块
e.printStackTrace();
}
DBConn.close(conn,st,rs);
}
return temp;
}
}
5、前端代码示例
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<base href="<%=basePath%>">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link href="admin/as/css/bootstrap.min.css" rel="stylesheet">
<link href="admin/as/css/font-awesome.min.css" rel="stylesheet">
<link href="admin/as/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link href="admin/as/css/animate.min.css" rel="stylesheet">
<link href="admin/as/css/style.min.css" rel="stylesheet">
</head>
<style>
.fixed-table-body{height:auto !important;}
.fixed-table-body table td{font-size:12px !important; }
</style>
<jsp:include flush="true" page="/servlet/SessAdminServlet"/>
<jsp:include flush="true" page="/servlet/ListServlet"/>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<!--标题栏开始-->
<div class="ibox-title">
<h5>留言管理</h5>
</div>
<!--标题栏结束-->
<div class="ibox-content">
<!--工具框 开始-->
<!--工具框 结束-->
<!-- 内容列表 -->
<div class="table-responsive">
<%
ArrayList users = (ArrayList)request.getAttribute("users");
ArrayList dlist = (ArrayList)request.getAttribute("leaveword");
int RecordCount=dlist.size();//总记录数
int PageSize = 15; //每页显示的记录条数
String currentPage=request.getParameter("currentPage");//当前页
if(currentPage==null)currentPage="1";
int sumPageCount=RecordCount/PageSize+1; //总页数
int indexPage=1; //首页
int upPage=1;// //上一页
if(Integer.parseInt(currentPage)>1)upPage=Integer.parseInt(currentPage)-1;
int nextPage=1;// 下一页
if(Integer.parseInt(currentPage)<sumPageCount)nextPage=Integer.parseInt(currentPage)+1;
int lastPage=sumPageCount;// 最后页
int start=0;
int end=0;
end=Integer.parseInt(currentPage)*PageSize;
if(end>RecordCount)end=RecordCount;
for(int i = (Integer.parseInt(currentPage)-1)*PageSize;i < end;i++){
ArrayList alRow = (ArrayList)dlist.get(i);
%>
<table class="table">
<tbody>
<tr>
<td>用户名:
<%
for(int j = 0;j < users.size();j++){
ArrayList usersRow = (ArrayList)users.get(j);
if(usersRow.get(0).equals(alRow.get(1))){
%><%=usersRow.get(1) %><%
break;
}
}
%>
留言时间:<%=alRow.get(4).toString() %>
<a href="servlet/DelServlet?leaveword=<%=alRow.get(0) %>">删除</a>
</td>
</tr>
<tr>
<td ><%=alRow.get(2) %></td>
</tr>
<tr>
<td ><%=alRow.get(3) %></td>
</tr>
</tbody>
</table>
<%} %>
<div class="fixed-table-pagination" style="padding :10px; ">
共找到<%=RecordCount%>条记录 每页<%=PageSize%>条记录
第<%=currentPage%>/<%=sumPageCount%>页
<a href="<%=path %>/admin/leave_word.jsp?currentPage=<%=indexPage%><%if(request.getParameter("selectColumnName")!= null){out.println("&selectColumnName="+request.getParameter("selectColumnName")+"");}%><%if(request.getParameter("sKey")!= null){out.println("&sKey="+request.getParameter("sKey")+"");}%>">首页</a>
<a href="<%=path %>/admin/leave_word.jsp?currentPage=<%=upPage%><%if(request.getParameter("selectColumnName")!= null){out.println("&selectColumnName="+request.getParameter("selectColumnName")+"");}%><%if(request.getParameter("sKey")!= null){out.println("&sKey="+request.getParameter("sKey")+"");}%>">上一页</a>
<a href="<%=path %>/admin/leave_word.jsp?currentPage=<%=nextPage%><%if(request.getParameter("selectColumnName")!= null){out.println("&selectColumnName="+request.getParameter("selectColumnName")+"");}%><%if(request.getParameter("sKey")!= null){out.println("&sKey="+request.getParameter("sKey")+"");}%>">下一页</a>
<a href="<%=path %>/admin/leave_word.jsp?currentPage=<%=lastPage%><%if(request.getParameter("selectColumnName")!= null){out.println("&selectColumnName="+request.getParameter("selectColumnName")+"");}%><%if(request.getParameter("sKey")!= null){out.println("&sKey="+request.getParameter("sKey")+"");}%>">尾页</a> </div>
</div>
</div>
<!--表格数据区------------结束-->
</div>
</div>
</div>
</div>
</div>
<script src="admin/as/js/jquery.min.js"></script>
<script src="admin/as/js/bootstrap.min.js"></script>
<script src="admin/as/js/content.min.js"></script>
<!--表格-->
<script src="admin/as/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="admin/as/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="admin/as/js/bootstrap-table.js"></script>
<!--表格-->
<script src="admin/as/js/plugins/layer/layer.min.js"></script>
</body>
</html>