Java Web模板，MVC三層開發(fā)模式，登錄注冊，商品管理，內(nèi)嵌，防止?jié)L動(dòng)條【詩書畫唱】
在網(wǎng)站設(shè)計(jì)中，純粹HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）格式的網(wǎng)頁通常被稱為“靜態(tài)網(wǎng)頁”，靜態(tài)網(wǎng)頁是標(biāo)準(zhǔn)的HTML文件，它的文件擴(kuò)展名是.htm、.html，可以包含文本、圖像、聲音、FLASH動(dòng)畫、客戶端腳本和ActiveX控件及JAVA小程序等。靜態(tài)網(wǎng)頁是網(wǎng)站建設(shè)的基礎(chǔ)，早期的網(wǎng)站一般都是由靜態(tài)網(wǎng)頁制作的。靜態(tài)網(wǎng)頁是相對于動(dòng)態(tài)網(wǎng)頁而言，是指沒有后臺數(shù)據(jù)庫、不含程序和不可交互的網(wǎng)頁。靜態(tài)網(wǎng)頁相對更新起來比較麻煩，適用于一般更新較少的展示型網(wǎng)站。容易誤解的是靜態(tài)頁面都是htm這類頁面，實(shí)際上靜態(tài)也不是完全靜態(tài)，他也可以出現(xiàn)各種動(dòng)態(tài)的效果，如GIF格式的動(dòng)畫、FLASH、滾動(dòng)字幕等。
完成靜態(tài)頁面的設(shè)計(jì)
1、注銷完成以后跳轉(zhuǎn)到登錄頁面
2、點(diǎn)擊修改密碼超鏈接跳轉(zhuǎn)到修改密碼界面
3、點(diǎn)擊新增跳轉(zhuǎn)到新增商品頁面
4、點(diǎn)擊修改跳轉(zhuǎn)到修改商品頁面
5、點(diǎn)擊刪除跳轉(zhuǎn)回商品頁面
刷新頁面的方法：
window.location.href = window.location.href;
下面其實(shí)是一個(gè)模板，以后做項(xiàng)目可以用這些模板，加些后臺的代碼：
<%@ 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">
? ? //跳轉(zhuǎn)到注冊頁面的函數(shù)
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的高度隨內(nèi)容自動(dòng)增大，而不產(chǎn)生下拉滾動(dòng)條。
? ? ? ? function autoResize() {
? ? ? ? try {
document.all["content"].style.height?
= content.document.body.scrollHeight + 100;
? ? ? ? }catch(e){}
? ? ? ? }
? ? ? ??
? ? ? ? function naviTo (url) {
? ? ? ? ? ? document.getElementById('content').srcc = url;
? ? ? ? }
//系統(tǒng)注銷的函數(shù)
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，歡迎您使用本系統(tǒng)</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>確認(rèn)密碼：</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">
? ? //跳轉(zhuǎn)到商品新增頁面的函數(shù)
function toAdd() {
window.location.hreff = 'productAdd.jsp';
}
? ? ? ? ? ? //跳轉(zhuǎn)到商品修改頁面的函數(shù)
function toUpdate(pid) {
alert('你選中的商品編號是：' + pid);
window.location.hreff= 'productUpdate.jsp?pid' + pid;
}
//刪除商品
function deletePro(pid) {
alert('你要?jiǎng)h除編號為' + pid + '的商品');
? ? ? ? ? ? }
</script>
</head>
?<body>
? ? ? ? <table border="1">
? ? <tr>
? ? <th>商品編號</th>
<th>商品名稱</th>
<th>商品價(jià)格</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>商品價(jià)格：</td>
<td>
<input type="text" name="pprice" />
</td>
</tr>
<tr>
? ? <td>商品類型：</td>
<td>
? ? <select name="ptype">
? ? <option>請選擇</option>
<option>食品</option>
<option>日用品</option>
<option>運(yùn)動(dòng)器械</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>商品價(jià)格：</td>
<td>
<input type="text" name="pprice" />
</td>
</tr>
<tr>
? ? <td>商品類型：</td>
<td>
? ? <select name="ptype">
? ? <option>請選擇</option>
<option>食品</option>
<option>日用品</option>
<option>運(yùn)動(dòng)器械</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>確認(rèn)密碼：</td>
<td>
? <input type="password" name="cpwd" />
</td>
</tr>
<tr>
? ? <td>手機(jī)號：</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>
