建立css,创建main.css文件
/* 样式 */
body {
margin: 0px;
text-align: center;
background: url("…/images/frontBack.jpg") no-repeat;
background-size: 100%
}
table {
margin: 0 auto;
font-size: 14px;
color: #333333;
border-width: 1px;
border-color: khaki;
border-collapse: collapse;
}
table th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: gainsboro;
background-color: honeydew;
}
table td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: gainsboro;
background-color: #ffffff;
}
/登录页面样式/
.login {
width: 400px;
height: 340px;
background-color: honeydew;
border: solid 2px darkgrey;
left: 50%;
top: 50%;
position: absolute;
margin: -170px 0 0 -200px;
}
.login .websiteTitle, .title {
border: solid 1px floralwhite;
}
/注册页面样式/
.register {
width: 400px;
height: 350px;
background-color: honeydew;
border: solid 2px darkgrey;
left: 50%;
top: 50%;
position: absolute;
margin: -175px 0 0 -200px;
}
/显示类别页面样式/
.showCategory {
width: 400px;
height: 350px;
background-color: honeydew;
border: solid 2px darkgrey;
left: 50%;
top: 50%;
position: absolute;
margin: -150px 0 0 -200px;
}
/生成订单页面样式/
.makeOrder {
width: 400px;
height: 400px;
background-color: honeydew;
border: solid 2px darkgrey;
left: 50%;
top: 50%;
position: absolute;
margin: -200px 0 0 -200px;
}
/显示订单页面样式/
.showOrder {
width: 400px;
height: 400px;
background-color: honeydew;
border: solid 2px darkgrey;
left: 50%;
top: 50%;
position: absolute;
margin: -200px 0 0 -200px;
}
建立图片文件夹
导入jar包
建立scripts文件夹，建立check.js文件
/**
- 检验登录表单
- @returns {Boolean}
*/
function checkLoginForm() {
var username = document.getElementById(“username”);
var password = document.getElementById(“password”);
if (username.value == “”) {
alert(“用户名不能为空！”);
username.focus();
return false;
}
if (password.value == “”) {
alert(“密码不能为空！”);
password.focus();
return false;
}
return true;
}
/**
-
检验注册表单
-
@returns {Boolean}
*/
function checkRegisterForm() {
var username = document.getElementById(“username”);
var password = document.getElementById(“password”);
var telephone = document.getElementById(“telephone”);
if (username.value == “”) {
alert(“用户名不能为空！”);
username.focus();
return false;
}
if (password.value == “”) {
alert(“密码不能为空！”);
password.focus();
return false;
}var pattern = “/^(13[0-9]|14[0-9]|15[0-9]|18[0-9])\d{8}$/”;
if (!pattern.exec(telephone)) {
alert(“非法手机号！”);
telephone.focus();
return false;
}
return true;
}
登录页面login.jsp
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8” %>
<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>
<c:set var=“path” value=" p a g e C o n t e x t . r e q u e s t . c o n t e x t P a t h " / > < c : s e t v a r = " b a s e P a t h " v a l u e = " {pageContext.request.contextPath}"/> <c:set var="basePath" value=" pageContext.request.contextPath"/><c:setvar="basePath"value="{pageContext.request.scheme}😕/ p a g e C o n t e x t . r e q u e s t . s e r v e r N a m e : {pageContext.request.serverName}: pageContext.request.serverName:{pageContext.request.serverPort}${path}/"/>
西蒙购物网
用户登录
| 账号 | |
| 密码 | |
<c:if test="
r
e
g
i
s
t
e
r
M
s
g
!
=
n
u
l
l
"
>
<
s
c
r
i
p
t
t
y
p
e
=
"
t
e
x
t
/
j
a
v
a
s
c
r
i
p
t
"
>
a
l
e
r
t
(
"
{registerMsg!=null}"> <script type="text/javascript">alert("
registerMsg!=null"><scripttype="text/javascript">alert("{registerMsg}")
<c:remove var=“registerMsg”/>
</c:if>
<c:if test="
l
o
g
i
n
M
s
g
!
=
n
u
l
l
"
>
<
s
c
r
i
p
t
t
y
p
e
=
"
t
e
x
t
/
j
a
v
a
s
c
r
i
p
t
"
>
a
l
e
r
t
(
"
{loginMsg!=null}"> <script type="text/javascript">alert("
loginMsg!=null"><scripttype="text/javascript">alert("{loginMsg}")
<c:remove var=“loginMsg”/>
</c:if>
创建注册界面
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8” %>
<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>
<c:set var=“path” value=" p a g e C o n t e x t . r e q u e s t . c o n t e x t P a t h " / > < c : s e t v a r = " b a s e P a t h " v a l u e = " {pageContext.request.contextPath}"/> <c:set var="basePath" value=" pageContext.request.contextPath"/><c:setvar="basePath"value="{pageContext.request.scheme}😕/ p a g e C o n t e x t . r e q u e s t . s e r v e r N a m e : {pageContext.request.serverName}: pageContext.request.serverName:{pageContext.request.serverPort}${path}/"/>
西蒙购物网
用户注册
| 账号 | |
| 密码 | |
| 电话 | |
<c:if test="
r
e
g
i
s
t
e
r
M
s
g
!
=
n
u
l
l
"
>
<
s
c
r
i
p
t
t
y
p
e
=
"
t
e
x
t
/
j
a
v
a
s
c
r
i
p
t
"
>
a
l
e
r
t
(
"
{registerMsg!=null}"> <script type="text/javascript">alert("
registerMsg!=null"><scripttype="text/javascript">alert("{registerMsg}")
<c:set var=“registerMsg” value=""/>
</c:if>
创建showCategory文件
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8” %>
<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>
<c:set var=“path” value=" p a g e C o n t e x t . r e q u e s t . c o n t e x t P a t h " / > < c : s e t v a r = " b a s e P a t h " v a l u e = " {pageContext.request.contextPath}"/> <c:set var="basePath" value=" pageContext.request.contextPath"/><c:setvar="basePath"value="{pageContext.request.scheme}😕/ p a g e C o n t e x t . r e q u e s t . s e r v e r N a m e : {pageContext.request.serverName}: pageContext.request.serverName:{pageContext.request.serverPort}${path}/"/>
测试
创建showCart文件
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8” %>
<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>
<%@ taglib prefix=“fmt” uri=“http://java.sun.com/jsp/jstl/fmt” %>
<c:set var=“path” value=" p a g e C o n t e x t . r e q u e s t . c o n t e x t P a t h " / > < c : s e t v a r = " b a s e P a t h " v a l u e = " {pageContext.request.contextPath}"/> <c:set var="basePath" value=" pageContext.request.contextPath"/><c:setvar="basePath"value="{pageContext.request.scheme}😕/ p a g e C o n t e x t . r e q u e s t . s e r v e r N a m e : {pageContext.request.serverName}: pageContext.request.serverName:{pageContext.request.serverPort}${path}/"/>
${username}的购物车
| 商品编号 | 商品名称 | 销售价格 | 购买数量 | 合计金额 | 用户操作 | |
|---|---|---|---|---|---|---|
| ${shoppingItem.id} | ${shoppingItem.name} | ￥${shoppingItem.price} | ${shoppingItem.amount} | ￥${shoppingItem.sum} | 删除 | |
| 总金额 | ￥0.00 | ￥${totalPrice} |
生成订单 生成订单
测试
创建showProduct文件
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8” %>
<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>
<%@ taglib prefix=“fmt” uri=“http://java.sun.com/jsp/jstl/fmt” %>
<c:set var=“path” value=" p a g e C o n t e x t . r e q u e s t . c o n t e x t P a t h " / > < c : s e t v a r = " b a s e P a t h " v a l u e = " {pageContext.request.contextPath}"/> <c:set var="basePath" value=" pageContext.request.contextPath"/><c:setvar="basePath"value="{pageContext.request.scheme}😕/ p a g e C o n t e x t . r e q u e s t . s e r v e r N a m e : {pageContext.request.serverName}: pageContext.request.serverName:{pageContext.request.serverPort}${path}/"/>
西蒙购物网
登录用户： ${username} 注销
欢迎选购【 ${categoryName}】类商品
|
返回商品类别页面
测试
创建makeOrder文件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<c:set var="basePath"
value="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${path}/"/>
<!DOCTYPE html>
<html>
<head>
<title>生成订单</title>
<base href="${basePath}">
<link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="makeOrder">
<div class="websiteTitle">
<h1>西蒙购物网</h1>
</div>
<div>
登录用户：<span style="color: red;">${username}</span>
<c:forEach var="i" begin="1" end="5">
</c:forEach>
<a href="logout">注销</a>
</div>
<div class="title">
<h3>生成订单</h3>
</div>
<div class="main">
<form action="makeOrder" method="post">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" readonly="readonly"
value="${username}"/></td>
</tr>
<tr>
<td>联系电话</td>
<td><input type="text" name="telephone"/></td>
</tr>
<tr>
<td>总金额</td>
<td><input type="text" name="totalPrice" readonly="readonly"
value="${totalPrice}"/></td>
</tr>
<tr>
<td>送货地址</td>
<td><input type="text" name="deliveryAddress"/></td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="生成订单"/> <input
type="reset" value="重置"/></td>
</tr>
</table>
</form>
</div>
<div class="footer">
<p><a href="showCategory">返回商品类别页面</a></p>
</div>
</div>
</body>
</html>
创建showORDER文件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<c:set var="basePath"
value="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${path}/"/>
<!DOCTYPE html>
<html>
<head>
<title>显示订单</title>
<base href="${basePath}">
<link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="showOrder">
<div class="websiteTitle">
<h1>西蒙购物网</h1>
</div>
<div>
登录用户：<span style="color: red;">${username}</span>
<c:forEach var="i" begin="1" end="5">
</c:forEach>
<a href="logout">注销</a>
</div>
<div class="title">
<h3>生成订单</h3>
</div>
<div class="main">
<table border="1" cellspacing="0">
<tr>
<th>订单编号</th>
<td>${lastOrder.id}</td>
</tr>
<tr>
<th>用户名</th>
<td>${lastOrder.username}</td>
</tr>
<tr>
<th>联系电话</th>
<td>${lastOrder.telephone}</td>
</tr>
<tr>
<th>总金额</th>
<td>${lastOrder.totalPrice}</td>
</tr>
<tr>
<th>送货地址</th>
<td>${lastOrder.deliveryAddress}</td>
</tr>
</table>
</div>
<div class="footer">
<p><a href="pay" οnclick="alert('${lastOrder.username}，支付成功！');">支付</a></p>
</div>
</div>
</body>
</html>
测试
创建management文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<c:set var="basePath"
value="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${path}/"/>
<!DOCTYPE html>
<html>
<head>
<title>西蒙购物网站后台管理</title>
<base href="${basePath}">
</head>
<frameset rows="30%,70%" cols="*">
<frame src="backend/top.jsp" name="top_frame" scrolling="no">
<frameset rows="*" cols="25%,75%">
<frame src="backend/left.jsp" name="left_frame" scrolling="yes">
<frame src="backend/main.jsp" name="main_frame" scrolling="yes">
</frameset>
</frameset>
</html>
创建left文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<c:set var="basePath"
value="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${path}/"/>
<!DOCTYPE html>
<html>
<head>
<title>后台管理左面板</title>
<base href="${basePath}">
<link rel="stylesheet" type="text/css">
<script type="text/javascript">
function show(id) {
var obj = document.getElementById('c_' + id);
if (obj.style.display == 'block') {
obj.style.display = 'none';
} else {
obj.style.display = 'block';
}
}
</script>
</head>
<body>
<table cellSpacing=0 cellPadding=0 width='100%' border=0>
<tbody>
<tr>
<td class=catemenu> <a
style='CURSOR: pointer' οnclick=show(1)><img src="images/folder.png">用户管理</a>
</td>
</tr>
<tbody id=c_1>
<tr>
<td class=bar2 height=20> <img src="images/file.png"> <a href="showUser" target="main_frame">查看用户</a></td>
</tr>
<tr>
<td class=bar2 height=20> <img src="images/file.png"> <a href="backend/todo.jsp" target="main_frame">添加用户</a>
</td>
</tr>
<tr>
<td class=bar2 height=20> <img src="images/file.png"> <a href="backend/todo.jsp" target="main_frame">更新用户</a>
</td>
</tr>
<tr>
<td class=bar2 height=20> <img src="images/file.png"> <a href="backend/todo.jsp" target="main_frame">删除用户</a>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class=catemenu> <a
style='CURSOR: pointer' οnclick=show(2)><img src="images/folder.png">
类别管理</a></td>
</tr>
<tbody id=c_2 style='DISPLAY: none'>
<tr>
<td class=bar2 height=20> <img src="images/file.png"> <a href="backend/todo.jsp" target="main_frame">查看类别</a>
</td>
</tr>
<tr>
<td class=bar2 height=20> <img src="images/file.png"> <a href="backend/todo.jsp" target="main_frame">添加类别</a>
</td>
</tr>
<tr>
<td class=bar2 height=20> <img src="images/file.png"> <a href="backend/todo.jsp" target="main_frame">更新类别</a>
</td>
</tr>
<tr>
<td class=bar2 height=20> <img src="images/file.png"> <a href="backend/todo.jsp" target="main_frame">删除类别</a>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class=catemenu> <a
style='CURSOR: pointer' οnclick=show(3)><img src="images/folder.png">
商品管理</a></td>
</tr>
<tbody id=c_3 style='DISPLAY: none'>
<tr>
<td class=bar2 height=20> <img src="images/file.png"> <a href="backend/todo.jsp" target="main_frame">查看商品</a>
</td>
</tr>
<tr>
<td class=bar2 height=20> <img src="images/file.png"> <a href="backend/todo.jsp" target="main_frame">添加商品</a>
</td>
</tr>
<tr>
<td class=bar2 height=20> <img src="images/file.png"> <a href="backend/todo.jsp" target="main_frame">更新商品</a>
</td>
</tr>
<tr>
<td class=bar2 height=20> <img src="images/file.png"> <a href="backend/todo.jsp" target="main_frame">删除商品</a>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class=catemenu> <a
style='CURSOR: pointer' οnclick=show(4)><img src="images/folder.png">
订单管理</a></td>
</tr>
<tbody id=c_4 style='DISPLAY: none'>
<tr>
<td class=bar2 height=20> <img src="images/file.png"> <a href="backend/todo.jsp" target="main_frame">查看订单</a>
</td>
</tr>
<tr>
<td class=bar2 height=20> <img src="images/file.png"> <a href="backend/todo.jsp" target="main_frame">删除订单</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
创建top文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<c:set var="basePath"
value="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${path}/"/>
<!DOCTYPE html>
<html>
<head>
<title>后台管理顶面板</title>
<base href="${basePath}">
</head>
<body style="margin:0px">
<img src="images/title.png" width="100%" height="100%">
</body>
</html>
创建main文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<c:set var="basePath"
value="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${path}/"/>
<!DOCTYPE html>
<html>
<head>
<title>后台管理主面板</title>
<base href="${basePath}">
</head>
<body>
<img src="images/mainBack.gif" width="100%" height="100%"/>
</body>
</html>
测试
查看用户页面showUser.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<c:set var="basePath"
value="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${path}/"/>
<!DOCTYPE html>
<html>
<head>
<title>显示用户信息</title>
<base href="${basePath}">
<link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<hr>
<table width="90%" border="0px">
<tr>
<td align="left">登录用户：<span style="color: red;">${username}</span></td>
<td align="right"><a href="user/logout" target="_parent">注销</a></td>
</tr>
</table>
<hr>
<h3>用户列表</h3>
<hr>
<table border="1" width="90%" cellspacing="0">
<tr>
<th>编号</th>
<th>用户名</th>
<th>密码</th>
<th>电话</th>
<th>注册时间</th>
<th>权限</th>
</tr>
<c:forEach var="user" items="${users}">
<tr align="center">
<td>${user.id}</td>
<td>${user.username}</td>
<td>${user.password}</td>
<td>${user.telephone}</td>
<td><fmt:formatDate value="${user.registerTime}" pattern="yyyy-MM-dd hh:mm:ss"/></td>
<td>
<c:choose>
<c:when test="${user.popedom==0}">
管理员
</c:when>
<c:otherwise>
普通用户
</c:otherwise>
</c:choose>
</td>
</tr>
</c:forEach>
</table>
<hr>
</body>
</html>
测试
扫一扫
2333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
