Java Web模板，MVC三层开发模式，登录注册，商品管理，内嵌，防止滚动条【诗书画唱】
在网站设计中，纯粹HTML（标准通用标记语言下的一个应用）格式的网页通常被称为“静态网页”，静态网页是标准的HTML文件，它的文件扩展名是.htm、.html，可以包含文本、图像、声音、FLASH动画、客户端脚本和ActiveX控件及JAVA小程序等。静态网页是网站建设的基础，早期的网站一般都是由静态网页制作的。静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。容易误解的是静态页面都是htm这类页面，实际上静态也不是完全静态，他也可以出现各种动态的效果，如GIF格式的动画、FLASH、滚动字幕等。
完成静态页面的设计
1、注销完成以后跳转到登录页面
2、点击修改密码超链接跳转到修改密码界面
3、点击新增跳转到新增商品页面
4、点击修改跳转到修改商品页面
5、点击删除跳转回商品页面
刷新页面的方法：
window.location.href = window.location.href;
下面其实是一个模板，以后做项目可以用这些模板，加些后台的代码：
<%@ page language="java"
contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>登录页面</title>
<style type="text/css">
* {
font-size:50px;
}
</style>
<script type="text/javascript">
//跳转到注册页面的函数
function toReg() {
window.location.href = 'reg.jsp';
}
</script>
</head>
<body>
<center>
<h1>欢迎登录</h1>
<form action="manager.jsp" method="post">
<table border="1">
<tr>
<td>账号：</td>
<td>
<input type="text" name="act" />
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="pwd" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="登录" />
<input type="button" value="注册" onclick="toReg();" />
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
<%@ page language="java" contentType="text/html;
charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "http://www.w3.org/TR/html4
/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>后台管理</title>
<style type="text/css">
* {
font-size:30px;
}
</style>
<script type="text/javascript">
//iframe的高度随内容自动增大，而不产生下拉滚动条。
function autoResize() {
try {
document.all["content"].style.height
= content.document.body.scrollHeight + 100;
}catch(e){}
}
function naviTo (url) {
document.getElementById('content').srcc = url;
}
//系统注销的函数
function doLogout() {
window.location.hreff = 'login.jsp';
}
//修改密码功能
function modifyPwd() {
window.location.hreff = 'modifyPwd.jsp';
}
</script>
</head>
<body>
<div style="width:99%;autoHeight:true;
border:1px solid #96c2f1;background:#eff7ff;">
<table style="width:99%;margin:auto;border:0px;"
cellpadding="10" cellspacing="0">
<tr>
<td colspan="2">
<table style="width:99%;margin:auto;border:0px;"
cellpadding="10" cellspacing="0">
<tr>
<td>
<span>XXX，欢迎您使用本系统</span>
<a hreff="javascript:doLogout();">注销</a>
<a hreff="javascript:modifyPwd();">修改密码</a>
</td>
</tr>
<tr>
<td><img style="width:100%;height:200px;"
srcc="img/index_bg.jpg" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width:20%;">
<ul>
<li>
<a hreff="javascript:naviTo('product.jsp');">商品管理</a>
</li>
<li>
<a hreff="javascript:naviTo('user.jsp');">用户管理</a>
</li>
<li>
<a hreff="javascript:naviTo('order.jsp');">订单管理</a>
</li>
</ul>
</td>
<td>
<iframe id="content" name="content" scrolling="no"
marginWidth="0" marginHeight="0" width="99%"
height="500px" frameborder="no" border="0"
onload="autoResize();">
</iframe>
</td>
</tr>
</table>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html;
charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>修改密码</title>
<style type="text/css">
* {
font-size:30px;
}
</style>
</head>
<body>
<center>
<h1>修改密码</h1>
<form action="manager.jsp" method="post">
<table border="1">
<tr>
<td>原密码：</td>
<td>
<input type="password" name="oldPwd" />
</td>
</tr>
<tr>
<td>新密码：</td>
<td>
<input type="password" name="newPwd" />
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="password" name="cnewPwd" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="修改" />
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
<%@ page language="java" contentType="text/html;
charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>订单管理界面</title>
</head>
<body>
订单管理
</body>
</html>
<%@ page language="java" contentType="text/html;
charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=UTF-8">
<title>商品管理界面</title>
<style type="text/css">
* {
font-size:30px;
}
</style>
<script type="text/javascript">
//跳转到商品新增页面的函数
function toAdd() {
window.location.hreff = 'productAdd.jsp';
}
//跳转到商品修改页面的函数
function toUpdate(pid) {
alert('你选中的商品编号是：' + pid);
window.location.hreff= 'productUpdate.jsp?pid' + pid;
}
//删除商品
function deletePro(pid) {
alert('你要删除编号为' + pid + '的商品');
}
</script>
</head>
<body>
<table border="1">
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品类型</th>
<th>商品描述</th>
<th>操作<a hreff="javascript:toAdd();">新增</a></th>
</tr>
<tr>
<td>1</td>
<td>德芙巧克力</td>
<td>8.0</td>
<td>零食</td>
<td>礼物</td>
<td>
<a hreff="javascript:toUpdate(1);">修改</a>
<a hreff="javascript:deletePro(1);">删除</a>
</td>
</tr>
<tr>
<td>2</td>
<td>德芙巧克力</td>
<td>8.0</td>
<td>零食</td>
<td>礼物</td>
<td>
<a hreff="javascript:toUpdate(2);">修改</a>
<a hreff="javascript:deletePro(2);">删除</a>
</td>
</tr>
<tr>
<td>3</td>
<td>德芙巧克力</td>
<td>8.0</td>
<td>零食</td>
<td>礼物</td>
<td>
<a hreff="javascript:toUpdate(3);">修改</a>
<a hreff="javascript:deletePro(3);">删除</a>
</td>
</tr>
</table>
</body>
</html>
<%@ page language="java" contentType="text/html;
charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional
//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>商品新增页面</title>
<style type="text/css">
* {
font-size:30px;
}
</style>
<script type="text/javascript">
function goBack() {
window.location.hreff = 'product.jsp';
}
</script>
</head>
<body>
<center>
<h1>新增商品</h1>
<form action="product.jsp" method="post">
<table border="1">
<tr>
<td>商品名称：</td>
<td>
<input type="text" name="pname" />
</td>
</tr>
<tr>
<td>商品价格：</td>
<td>
<input type="text" name="pprice" />
</td>
</tr>
<tr>
<td>商品类型：</td>
<td>
<select name="ptype">
<option>请选择</option>
<option>食品</option>
<option>日用品</option>
<option>运动器械</option>
</select>
</td>
</tr>
<tr>
<td>商品描述：</td>
<td>
<textarea name="pdesc" cols="20" rows="5">
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="新增" />
<input type="button" value="返回" onclick="goBack();"/>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
<%@ page language="java" contentType="text/html;
charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "http:
//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>商品修改页面</title>
<style type="text/css">
* {
font-size:30px;
}
</style>
<script type="text/javascript">
function goBack() {
window.location.href = 'product.jsp';
}
</script>
</head>
<body>
<center>
<h1>修改商品</h1>
<form action="product.jsp" method="post">
<!-- 用隐藏表单域来保存商品的编号 -->
<input type="hidden" name="pid" value="1" />
<table border="1">
<tr>
<td>商品名称：</td>
<td>
<input type="text" name="pname" />
</td>
</tr>
<tr>
<td>商品价格：</td>
<td>
<input type="text" name="pprice" />
</td>
</tr>
<tr>
<td>商品类型：</td>
<td>
<select name="ptype">
<option>请选择</option>
<option>食品</option>
<option>日用品</option>
<option>运动器械</option>
</select>
</td>
</tr>
<tr>
<td>商品描述：</td>
<td>
<textarea name="pdesc" cols="20" rows="5">
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="修改" />
<input type="button" value="返回" onclick="goBack();"/>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
<%@ page language="java" contentType=
"text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional
//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content
="text/html; charset=UTF-8">
<title>注册页面</title>
<style type="text/css">
* {
font-size:50px;
}
</style>
<script type="text/javascript" srcc="js/datepicker.js">
</script>
</head>
<body>
<center>
<h1>欢迎注册</h1>
<form action="login.jsp" method="post">
<table border="1">
<tr>
<td>账号：</td>
<td>
<input type="text" name="act" />
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="pwd" />
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="password" name="cpwd" />
</td>
</tr>
<tr>
<td>手机号：</td>
<td>
<input type="text" name="mobile" />
</td>
</tr>
<tr>
<td>生日：</td>
<td>
<input type="text" name="birthday"
readonly onclick="new Calendar().show(this);" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册" />
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
<%@ page language="java" contentType="text/html;
charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional
//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>用户管理界面</title>
</head>
<body>
用户管理
</body>
</html>
