您的位置:首页 > 运维架构 > 网站架构

Jsp 关于普通购物网站实例

2014-01-07 18:47 323 查看
1.展示页

部分代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<script type="text/javascript">
function forward1() {
var pagesize = document.getElementById("pagesize").value;
var recordcount = document.getElementById("recordcount").value;
var name = document.getElementById("name").value;
if(pagesize!="" && parseInt(pagesize)<parseInt(recordcount)) {
location.href = "PageQueryProductServlet?pagesize=" + pagesize + "&name=" + name;
}
}

function forward2() {
var pagesize = document.getElementById("pagesize").value;
var pagenum = document.getElementById("pagenum").value;
var pagecount = document.getElementById("pagecount").value;
var name = document.getElementById("name").value;
if(pagesize!="" && pagenum!="" && parseInt(pagenum)<=parseInt(pagecount)) {
location.href = "PageQueryProductServlet?pagesize=" + pagesize + "&pagenum=" + pagenum + "&name=" + name;
}
}

function search() {
var name = document.getElementById("name").value;
location.href = "PageQueryProductServlet?name=" + name;
}
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ include file="../head.jsp"%>
<input type="hidden" id="pagecount" value="${page.pagecount}"/>
<input type="hidden" id="recordcount" value="${page.recordcount}"/>
<table cellspacing=1 cellpadding=3 align=center class=tableBorder2>
<tr>
<td height=25 valign=middle>
<img src="images/Forum_nav.gif" align="absmiddle">
<a href="PageQueryProductServlet">电子商务门户</a> →
<img border="0" src="images/dog.gif" width="19" height="18">
欢迎光临!<font color="red">${user.username}</font>
</td>
</tr>
</table>
<br/>
<table cellspacing=1 cellpadding=3 align=center class=tableBorder2>
<tr>
<td height=25 valign=middle align=right>
商品名称:<input type="text" id="name" value="${name}"/>     
<input type="button" value="搜索" onclick="search()"/>
</td>
</tr>
</table>
<br/>
<table cellpadding="3" cellspacing="1" class="tableborder1">
<tr>
<td background="images/bg2.gif" align="center">
<font color="white"><b>序号</b></font>
</td>
<td background="images/bg2.gif" align="center">
<font color="white"><b>商品名称</b></font>
</td>
<td background="images/bg2.gif" align="center">
<font color="white"><b>价格</b></font>
</td>
<td background="images/bg2.gif" align="center">
<font color="white"><b>操作</b></font>
</td>
</tr>
<c:forEach items="${pList}" var="p" varStatus="vs">
<tr>
<td class="tablebody2" align="center" >${vs.count }</td>
<td class="tablebody1" align="center" >
<a href="ViewProductServlet?productid=${p.productid}">${p.name }</a>
</td>
<td class="tablebody2" align="center" >${p.baseprice }</td>
<td class="tablebody1" align="center" >
<a href="AddCartServlet?productid=${p.productid}"><img src="images/car_new.gif" border="0"/></a>
</td>
</tr>
</c:forEach>
</table>
<br/>
<table cellpadding="3" cellspacing="1" class="tableBorder2" align="center">
<tr>
<td align="center">
共有${page.recordcount }条记录 
共显示${page.pagecount }页 
每页显示<input type="text" size="2" value="${page.pagesize }" id="pagesize" onblur="forward1()"/>条记录 
<c:choose>
<c:when test="${page.pagenum==1}">
首页
上一页
</c:when>
<c:otherwise>
<a href="PageQueryProductServlet?pagenum=1&pagesize=${page.pagesize }&name=${name}">首页</a>
<a href="PageQueryProductServlet?pagenum=${page.pagenum-1 }&pagesize=${page.pagesize}&name=${name}">上一页</a>
</c:otherwise>
</c:choose>
<c:choose>
<c:when test="${page.pageindex==page.pagecount}">
下一页
尾页
</c:when>
<c:otherwise>
<a href="PageQueryProductServlet?pagenum=${page.pagenum+1 }&pagesize=${page.pagesize}&name=${name}">下一页</a>
<a href="PageQueryProductServlet?pagenum=${page.pagecount }&pagesize=${page.pagesize }&name=${name}">尾页</a>
</c:otherwise>
</c:choose>
跳转到第<input type="text" size="2" value="${page.pagenum }" id="pagenum" onblur="forward2()"/>页
</td>
</tr>
</table>
<%@ include file="../foot.jsp"%>


更简易的详细页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ include file="../head.jsp"%>
<table cellspacing=1 cellpadding=3 align=center class=tableBorder2>
<tr>
<td height=25 valign=middle>
<img src="images/Forum_nav.gif" align="absmiddle">
<a href="PageQueryProductServlet">电子商务门户</a> →
商品明细
</td>
</tr>
</table>
<br/>
<form action="loginAction.do" method=post name="login">
<table cellpadding=3 cellspacing=1 align=center class=tableborder1>
<tr>
<td valign=middle align=center height=25 background="images/bg2.gif" colspan="2"><p><font color="white"><b>${p.name }</b></font></td>
</tr>
<tr>
<td class=tablebody1 valign=middle align=center width="20%">【作  者 】</td>
<td class=tablebody1 valign=middle width="80%">${p.writer }</td>
</tr>
<tr>
<td class=tablebody1 valign=middle align=center width="20%">【价  格 】</td>
<td class=tablebody1 valign=middle width="80%">${p.baseprice }</td>
</tr>
<tr>
<td class=tablebody1 valign=middle align=center width="">【出 版 社】</td>
<td class=tablebody1 valign=middle width="">${p.publish }</td>
</tr>
<tr>
<td class=tablebody1 valign=middle align=center width="">【 页  数】</td>
<td class=tablebody1 valign=middle width="">${p.pages }</td>
</tr>
<tr>
<td class=tablebody1 align=center width="" valign="middle">【 简  介】</td>
<td class=tablebody1 valign=middle width="">${p.description }</td>
</tr>
<tr>
<td class=tablebody1 valign=middle align=center width="">【 封  面】</td>
<td class=tablebody1 valign=middle width=""><img border="0" src="${p.images }" width="127" height="180"></td>
</tr>
<tr>
<td class=tablebody2 valign=middle align=center colspan="2">
<a href="#">
<img border="0" src="images/buycar.gif" width="92" height="21">
</a>
</td>
</tr>
</table>
</form>
<%@ include file="../foot.jsp"%>


注册页面的建议实例:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ include file="head.jsp"%>
<table cellspacing=1 cellpadding=3 align=center class=tableBorder2>
<tr>
<td height=25 valign=middle>
<img src="images/Forum_nav.gif" align="absmiddle">
<a href="PageQueryProductServlet">电子商务门户</a> →
用户注册
</td>
</tr>
</table>
<br/>
<form method="post"  action="RegisterUpdateUserServlet">
<table cellpadding="3" cellspacing="1" align="center" class="tableborder1" id="table1">
<tr>
<td valign="middle" colspan="2" align="center" height="25" background="images/bg2.gif">
<font color="white"><b>新用户注册</b></font></td>
</tr>
<tr>
<td width="40%" class="tablebody1"><b>用户名</b>:<br>
注册用户名长度限制为0-16字节</td>
<td width="60%" class="tablebody1">
<input maxLength="8" size="32" name="username" style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
<font color="#FF0000">*</font></td>
</tr>
<tr>
<td width="40%" class="tablebody1"><b>密码(至少6位,至多8位)</b>:<br>
请输入密码,区分大小写。<br>
请不要使用任何类似 \'*\'、\' \' 或 HTML 字符'
</td>
<td width="60%" class="tablebody1">
<input type="password" maxLength="8" size="32" name="password" style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
<font color="#FF0000">*</font></td>
</tr>
<tr>
<td width="40%" class="tablebody1"><b>密码(至少
c851
6位,至多8位)</b>:<br>
请再输一遍确认</td>
<td class="tablebody1">
<input type="password" maxLength="8" size="32" name="password2" style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
<font color="#FF0000">*</font></td>
</tr>
<tr>
<td class="tablebody1"><b>真实姓名</b>:</td>
<td class="tablebody1">
<input type="text" size="64" maxlength="32" name="truename" style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
</td>
</tr>
<tr>
<td class="tablebody1"><b>所在地区</b>:</td>
<td class="tablebody1">
<input type="text" size="64" maxlength="32" name="city" style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
</td>
</tr>
<tr>
<td class="tablebody1"><b>联系地址1</b>:</td>
<td class="tablebody1">
<input type="text" size="64" maxlength="32" name="street1" style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
</td>
</tr>
<tr>
<td class="tablebody1"><b>联系地址2</b>:</td>
<td class="tablebody1">
<input type="text" size="64" maxlength="32" name="street2" style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
</td>
</tr>
<tr>
<td class="tablebody1"><b>邮编</b>:</td>
<td class="tablebody1">
<input type="text" size="32" maxlength="8" name="zip" style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
</td>
</tr>
<tr>
<td class="tablebody1"><b>家庭电话</b>:</td>
<td class="tablebody1">
<input type="text" size="32" maxlength="16" name="homephone" style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
</td>
</tr>
<tr>
<td class="tablebody1"><b>办公室电话</b>:</td>
<td class="tablebody1">
<input type="text" size="32" maxlength="16" name="officephone" style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
</td>
</tr>
<tr>
<td class="tablebody1"><b>手机</b>:</td>
<td class="tablebody1">
<input type="text" size="32" maxlength="16" name="cellphone" style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
</td>
</tr>
<tr>
<td class="tablebody1"><b>Email地址</b>:<br>
请输入有效的邮件地址</td>
<td class="tablebody1">
<input maxLength="50" size="32" maxlength="32" name="email" style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000"></td>
</tr>
<tr>
<td class="tablebody2" valign="middle" colspan="2" align="center">
<input type="submit" value="注 册" >   
<input type="reset" name="reset" value="清 除">
</td>
</tr>
</table>
</form>
<%@ include file="foot.jsp"%>


登陆:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ include file="head.jsp"%>
<table cellspacing=1 cellpadding=3 align=center class=tableBorder2>
<tr>
<td height=25 valign=middle>
<img src="images/Forum_nav.gif" align="absmiddle">
<a href="PageQueryProductServlet">电子商务门户</a> →
用户登录
</td>
</tr>
</table>
<br/>
<form action="LoginServlet" method=post name="login">
<table cellpadding=3 cellspacing=1 align=center class=tableborder1>
<tr>
<td valign=middle colspan=2 align=center height=25 background="images/bg2.gif" ><font color="white"><b>输入您的用户名、密码登录</b></font></td>
</tr>
<tr>
<td valign=middle class=tablebody1>请输入您的用户名</td>
<td valign=middle class=tablebody1>
<INPUT name="username" type=text>  
<a href="register.jsp">没有注册?</a>
<font color="red">${message}</font>
</td>
</tr>
<tr>
<td valign=middle class=tablebody1>请输入您的密码</td>
<td valign=middle class=tablebody1><INPUT name=password type=password>   </td>
</tr>
<tr>
<td class=tablebody2 valign=middle colspan=2 align=center>
<input type="submit" value="登 录" onclick="javascript:checkMe()">
</td>
</tr>
</table>
</form>
<%@ include file="foot.jsp"%>


用户管理

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ include file="../head.jsp"%>
<table cellspacing=1 cellpadding=3 align=center class=tableBorder2>
<tr>
<td height=25 valign=middle>
<img src="images/Forum_nav.gif" align="absmiddle">
<a href="PageProductServlet">电子商务门户</a> →
用户管理
</td>
</tr>
</table>
<br/>
<form method="post"  action="ManagerUserServlet">
<table cellpadding="3" cellspacing="1" align="center" class="tableborder1" id="table1">
<tr>
<td valign="middle" colspan="2" align="center" height="25" background="images/bg2.gif">
<font color="white"><b>用户管理</b></font></td>
</tr>
<tr>
<td width="40%" class="tablebody1"><b>用户名</b>:<br>
注册用户名长度限制为0-16字节</td>
<td width="60%" class="tablebody1">
<input maxLength="8" size="32" name="username" value=${user.username} readonly="readonly" style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
<font color="#FF0000">*</font></td>
</tr>
<tr>
<td width="40%" class="tablebody1"><b>密码(至少6位,至多8位)</b>:<br>
请输入密码,区分大小写。<br>
请不要使用任何类似 \'*\'、\' \' 或 HTML 字符'
</td>
<td width="60%" class="tablebody1">
<input type="password" maxLength="8" size="32" name="password" value=${user.password} style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
<font color="#FF0000">*</font></td>
</tr>
<tr>
<td width="40%" class="tablebody1"><b>密码(至少6位,至多8位)</b>:<br>
请再输一遍确认</td>
<td class="tablebody1">
<input type="password" maxLength="8" size="32" name="password2" value=${user.password} style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
<font color="#FF0000">*</font></td>
</tr>
<tr>
<td class="tablebody1"><b>真实姓名</b>:</td>
<td class="tablebody1">
<input type="text" size="64" maxlength="32" name="truename" value=${user.truename} style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
</td>
</tr>
<tr>
<td class="tablebody1"><b>所在地区</b>:</td>
<td class="tablebody1">
<input type="text" size="64" maxlength="32" name="city" value=${user.city} style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
</td>
</tr>
<tr>
<td class="tablebody1"><b>联系地址1</b>:</td>
<td class="tablebody1">
<input type="text" size="64" maxlength="32" name="street1" value=${user.street1} style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
</td>
</tr>
<tr>
<td class="tablebody1"><b>联系地址2</b>:</td>
<td class="tablebody1">
<input type="text" size="64" maxlength="32" name="street2" value=${user.street2} style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
</td>
</tr>
<tr>
<td class="tablebody1"><b>邮编</b>:</td>
<td class="tablebody1">
<input type="text" size="32" maxlength="8" name="zip" value=${user.zip} style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
</td>
</tr>
<tr>
<td class="tablebody1"><b>家庭电话</b>:</td>
<td class="tablebody1">
<input type="text" size="32" maxlength="16" name="homephone" value=${user.homephone} style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
</td>
</tr>
<tr>
<td class="tablebody1"><b>办公室电话</b>:</td>
<td class="tablebody1">
<input type="text" size="32" maxlength="16" name="officephone" value=${user.officephone} style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
</td>
</tr>
<tr>
<td class="tablebody1"><b>手机</b>:</td>
<td class="tablebody1">
<input type="text" size="32" maxlength="16" name="cellphone" value=${user.cellphone} style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000">
</td>
</tr>
<tr>
<td class="tablebody1"><b>Email地址</b>:<br>
请输入有效的邮件地址</td>
<td class="tablebody1">
<input maxLength="50" size="32" maxlength="32" name="email" value=${user.email} style="font-family: Tahoma,Verdana,宋体; font-size: 12px; line-height: 15px; color: #000000"></td>
</tr>
<tr>
<td class="tablebody2" valign="middle" colspan="2" align="center">
<input type="submit" value="修改" >
</td>
</tr>
</table>
</form>

5、购物车Jsp模板页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<script type="text/javascript">
function goOn() {
location.href = "PageQueryProductServlet";
}

function clearCart() {
location.href = "ClearOrRemoveCartServlet";
}

function removeCart(count) {
location.href = "ClearOrRemoveCartServlet?count=" + count;
}

function updateCart(v) {
var count = document.getElementById(v).value;
if(count=="" || count<=0 || isNaN(count)) {
alert("请输入正确的数值");
}else {
location.href = "UpdateCartServlet?count=" + count + "&v=" + v;
}

}

function preOrderSubmit() {
location.href = "PreOrderSubmit";
}
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ include file="../head.jsp"%>
<input type="hidden" id="pagecount" value="${page.pagecount}"/>
<input type="hidden" id="recordcount" value="${page.recordcount}"/>
<table cellspacing=1 cellpadding=3 align=center class=tableBorder2>
<tr>
<td height=25 valign=middle>
<img src="images/Forum_nav.gif" >
<a href="PageQueryProductServlet">电子商务门户</a> →
<img border="0" src="images/dog.gif" width="19" height="18">
购物清单
</td>
</tr>
</table>
<br/>
<form method="post" action="updateAction.do" name="f1">
<table cellpadding=3 cellspacing=1 align=center class=tableborder1>
<tr>
<td valign=middle align=center height=25 background="images/bg2.gif" width=""><font color="white"><b>序号</b></font></td>
<td valign=middle align=center height=25 background="images/bg2.gif" width=""><font color="white"><b>产品名称</b></font></td>
<td valign=middle align=center height=25 background="images/bg2.gif" width=""><font color="white"><b>价格</b></font></td>
<td valign=middle align=center height=25 background="images/bg2.gif" width=""><font color="white"><b>数量</b></font></td>
<td valign=middle align=center height=25 background="images/bg2.gif" width=""><font color="white"><b>合计</b></font></td>
<td valign=middle align=center height=25 background="images/bg2.gif" width=""><font color="white"><b>操作</b></font></td>
</tr>

<c:forEach items="${cartList}" var="c" varStatus="vs">
<tr>
<td class=tablebody2 valign=middle align=center width="">${vs.count}</td>
<td class=tablebody1 valign=middle width="">  <a href="ViewProductServlet?productid=${c.productid}">${c.productname}</a></td>
<td class=tablebody2 valign=middle align=center width="">${c.baseprice}</td>
<td class=tablebody1 valign=middle align=center width="">
<input type="text" name="num" value="${c.count}" size="4" id="${vs.count}"/>
</td>
<td class=tablebody2 valign=middle align=left width="">¥${c.amount}</td>
<td class=tablebody1 valign=middle align=center width="">
<input type="button" value="取消" onclick="removeCart('${vs.count}')">
<input type="button" value="保存修改" onclick="updateCart('${vs.count}')">
</td>
</tr>
</c:forEach>
<c:if test="${!empty sum}">
<tr>
<td class=tablebody1 valign=middle align=center colspan="4"> </td>
<td class=tablebody1 valign=middle align=left width=""><font color="red"><b>¥${sum}</b></font></td>
<td class=tablebody1 valign=middle align=center width=""> </td>
</tr>
<tr>
<td class=tablebody2 valign=middle align=center colspan="6">
<input type="button" value="提交订单" onclick="preOrderSubmit()">
<input type="button" value="继续购物" onclick="goOn()">
<input type="button" value="清空购物车" onclick="clearCart()">
</td>
</tr>
</c:if>

</table>
</form>
<br>
<%@ include file="../foot.jsp"%>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jsp