JavaWeb项目开发案例精粹-第4章博客网站系统-006View层
1.showAllArticle.jsp
1 <%@ page language="java" contentType="text/html; charset=gb2312" 2 pageEncoding="gb2312"%> 3 <%@taglib uri="/struts-tags" prefix="s"%> 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 5 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 6 <head> 7 <title>博客系统首页</title> 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 9 <link type="text/css" rel="stylesheet" href="css/main.css" media="all" /> 10 <!--[if IE 6]><link type="text/css" rel="stylesheet" href="css/ie6.css" media="all" /><![endif]--> 11 <script type="text/javascript" src="js/mootools.js"></script> 12 <script type="text/javascript" src="js/site.js"></script> 13 </head> 14 <body> 15 <div id="wrapper"> 16 <div id="container"> 17 <div id="scene"> c<img src="images/scene.jpg" alt="" /> 18 <h1>博客网站系统</h1> 19 <div id="scale_area"> 20 <div id="scale_knob">» Font Size «</div> 21 </div> 22 <div id="menu"> 23 <div class="holder"> <a href="showAllArticle.action">博客首页</a> </div> 24 <div class="holder"> <a href="register.jsp">新博客注册</a> </div> 25 <div class="holder"> <a href="login.jsp">博客登录</a> </div> 26 </div> 27 </div> 28 <div id="content"> 29 <div id="col_left"> 30 <div class="post"> 31 <div class="meta"><a class="title" href="">博客系统首页</a> 32 <div class="clear"></div> 33 </div> 34 <!-- 循环输出 --> 35 <s:iterator value="#request.all" id="art" status="sta"> 36 <div class="comments"> 37 <div class="comment"> 38 <div class="meta"> <span><a href="user/showArticle.action?username=<s:property value='#art.username'/>&id=<s:property value='#art.id'/>"><s:property value="#art.title"/></a> <small>:</small></span> 39 <div class="clear"> </div> 40 </div> 41 </div> 42 <div class="comment alt"> 43 <div class="meta"><span class="datetime"> 44 <!-- 发表时间 --> 45 发表于: 46 <s:date name="#art.date"/> 47 <!-- 评论与点击数 --> 48 |评论(<s:property value="#request.critiqueCounts[#sta.index]"/>)|点击(<s:property value="#art.hasread"/>)|作者:<s:property value="#art.username"/> 49 </span> 50 <div class="clear"> </div> 51 </div> 52 </div> 53 </div> 54 </s:iterator> 55 <div class="comment" align="center"> 56 当前第${page.currentPage}页,共${page.totalPage}页,每页显示${page.everyPage}条记录 57 <s:if test="#request.page.hasPrePage"> 58 <a href="showAllArticle.action?currentPage=1">首页</a> 59 <a href="showAllArticle.action?currentPage=${page.currentPage -1 }">上一页</a> 60 </s:if> 61 <s:else> 62 首页 63 上一页 64 </s:else> 65 66 <s:if test="#request.page.hasNextPage"> 67 <a href="showAllArticle.action?currentPage=${page.currentPage + 1 }">下一页</a> 68 <a href="showAllArticle.action?currentPage=${page.totalPage }">尾页</a> 69 </s:if> 70 <s:else> 71 下一页 72 尾页 73 </s:else> 74 </div> 75 </div> 76 </div> 77 <div id="col_right"> 78 <div id="search_box"> 79 <form action="http://www.865171.cn/" method="post"> 80 <div> 81 <input type="text" name="search" /> 82 </div> 83 <div class="button_wrapper"> 84 <input type="submit" value="Search" class="button" /> 85 </div> 86 <div class="clear"> </div> 87 </form> 88 </div> 89 <div id="sidebar"> 90 <h2>页面导航</h2> 91 <ul> 92 <li><a href="showAllArticle.action">博客首页</a></li> 93 <li><a href="register.jsp">新博客注册</a></li> 94 <li><a href="login.jsp">博客登录</a></li> 95 </ul> 96 </div> 97 </div> 98 <div class="clear"> </div> 99 </div> 100 <div id="footer"> 101 <div class="clear"> </div> 102 <hr /> 103 <p class="credit">博客网站系统</p> 104 </div> 105 </div> 106 </div> 107 </body> 108 </html>
2.login.jsp
1 <%@ page language="java" contentType="text/html; charset=gb2312" 2 pageEncoding="gb2312"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 5 <head> 6 <title>博客系统登录</title> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <link type="text/css" rel="stylesheet" href="css/main.css" media="all" /> 9 <!--[if IE 6]><link type="text/css" rel="stylesheet" href="css/ie6.css" media="all" /><![endif]--> 10 <script type="text/javascript" src="js/mootools.js"></script> 11 <script type="text/javascript" src="js/site.js"></script> 12 </head> 13 <body> 14 <div id="wrapper"> 15 <div id="container"> 16 <div id="scene"> <img src="images/scene.jpg" alt="" /> 17 <h1>博客网站系统</h1> 18 <div id="scale_area"> 19 <div id="scale_knob">» Font Size «</div> 20 </div> 21 <div id="menu"> 22 <div class="holder"> <a href="showAllArticle.action">博客首页</a> </div> 23 <div class="holder"> <a href="register.jsp">新博客注册</a> </div> 24 <div class="holder"> <a href="login.jsp">博客登录</a> </div> 25 </div> 26 </div> 27 <div id="content"> 28 <div id="col_left"> 29 <div class="post"> 30 <div class="meta"></div> 31 <div class="comments"><div class="comment"></div> 32 <h2>博客登录</h2> 33 <form class="h" action="login.action" method="post"> 34 <div> 35 <label>用户名:</label> 36 <input type="text" name="username" /> 37 </div> 38 <div> 39 <label>密码:</label> 40 <input type="password" name="password" /> 41 </div> 42 <div> 43 <label></label> 44 <div class="clear"> </div> 45 </div> 46 <div class="button_wrapper"> 47 <input name="提交" type="submit" class="button" value="登录" /> 48 </div> 49 </form> 50 </div> 51 </div> 52 </div> 53 <div id="col_right"> 54 <div id="search_box"> 55 <form action="" method="post"> 56 <div> 57 <input type="text" name="search" /> 58 </div> 59 <div class="button_wrapper"> 60 <input type="submit" value="Search" class="button" /> 61 </div> 62 <div class="clear"> </div> 63 </form> 64 </div> 65 <div id="sidebar"> 66 <h2>页面导航</h2> 67 <ul> 68 <li><a href="showAllArticle.action">博客首页</a></li> 69 <li><a href="register.jsp">新博客注册</a></li> 70 <li><a href="login.jsp">博客登录</a></li> 71 </ul> 72 </div> 73 </div> 74 <div class="clear"> </div> 75 </div> 76 <div id="footer"> 77 <div class="clear"> </div> 78 <hr /> 79 <p class="credit">博客网站系统</p> 80 </div> 81 </div> 82 </div> 83 </body> 84 </html>
3.user/showAllUserArticle.jsp
1 <%@ page language="java" contentType="text/html; charset=gb2312" 2 pageEncoding="gb2312"%> 3 <%@taglib uri="/struts-tags" prefix="s"%> 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 5 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 6 <head> 7 <title>我的全部文章</title> 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 9 <link type="text/css" rel="stylesheet" href="../css/main.css" media="all" /> 10 <!--[if IE 6]><link type="text/css" rel="stylesheet" href="css/ie6.css" media="all" /><![endif]--> 11 <script type="text/javascript" src="../js/mootools.js"></script> 12 <script type="text/javascript" src="../js/site.js"></script> 13 </head> 14 <body> 15 <div id="wrapper"> 16 <div id="container"> 17 <div id="scene"> c<img src="../images/scene.jpg" alt="" /> 18 <h1>${empty sessionScope.blogtitle ? "博客网站系统":sessionScope.blogtitle} <br/> 19 <font size="8">${empty sessionScope.idiograph ? "我的签名":sessionScope.idiograph}</font> 20 </h1> 21 <div id="scale_area"> 22 <div id="scale_knob">» Font Size «</div> 23 </div> 24 <div id="menu"> 25 <div class="holder"> <a href="../showAllArticle.action">博客首页</a> </div> 26 <div class="holder"> <a href="showUserAllArticle.action">用户首页</a> </div> 27 <div class="holder"> <a href="editbloginfo.jsp">个性化设置</a> </div> 28 <div class="holder"> <a href="addArticle.jsp">写日志</a> </div> 29 <div class="holder"> <a href="showPhoto.action">相册</a> </div> 30 </div> 31 </div> 32 <div id="content"> 33 <div id="col_left"> 34 <div class="post"> 35 <div class="meta"><a class="title" href="">我的全部文章</a> 36 <div class="clear"></div> 37 </div> 38 <!-- 循环输出 --> 39 <s:iterator value="#request.all" id="art" status="sta"> 40 <div class="comments"> 41 <div class="comment"> 42 <div class="meta"> <span><a href="showArticle.action?username=<s:property value='#art.username'/>&id=<s:property value='#art.id'/>"><s:property value="#art.title"/></a> <small>:</small></span> 43 <div class="clear"> </div> 44 </div> 45 </div> 46 <div class="comment alt"> 47 <div class="meta"><span class="datetime"> 48 <!-- 发表时间 --> 49 发表于: 50 <s:date name="#art.date"/> 51 <!-- 评论与点击数 --> 52 |评论(<s:property value="#request.critiqueCounts[#sta.index]"/>)|点击(<s:property value="#art.hasread"/>) 53 </span> 54 <div class="clear"> </div> 55 </div> 56 </div> 57 </div> 58 </s:iterator> 59 <div class="comment" align="center"> 60 当前第${page.currentPage}页,共${page.totalPage}页,每页显示${page.everyPage}条记录 61 <s:if test="#request.page.hasPrePage"> 62 <a href="showUserAllArticle.action?currentPage=1">首页</a> 63 <a href="showUserAllArticle.action?currentPage=${page.currentPage -1 }">上一页</a> 64 </s:if> 65 <s:else> 66 首页 67 上一页 68 </s:else> 69 70 <s:if test="#request.page.hasNextPage"> 71 <a href="showUserAllArticle.action?currentPage=${page.currentPage + 1 }">下一页</a> 72 <a href="showUserAllArticle.action?currentPage=${page.totalPage }">尾页</a> 73 </s:if> 74 <s:else> 75 下一页 76 尾页 77 </s:else> 78 </div> 79 </div> 80 </div> 81 <div id="col_right"> 82 <div id="search_box"> 83 <form action="" method="post"> 84 <div> 85 <input type="text" name="search" /> 86 </div> 87 <div class="button_wrapper"> 88 <input type="submit" value="Search" class="button" /> 89 </div> 90 <div class="clear"> </div> 91 </form> 92 </div> 93 <div id="sidebar"> 94 <h2>页面导航</h2> 95 <ul> 96 <li><a href="../showAllArticle.action">博客首页</a></li> 97 <li><a href="showUserAllArticle.action">用户首页</a></li> 98 <li><a href="editbloginfo.jsp">个性化设置</a></li> 99 <li><a href="addArticle.jsp">写日志</a></li> 100 <li><a href="showPhoto.action">相册</a></li> 101 </ul> 102 </div> 103 </div> 104 <div class="clear"> </div> 105 </div> 106 <div id="footer"> 107 <div class="clear"> </div> 108 <hr /> 109 <p class="credit">博客网站系统</p> 110 </div> 111 </div> 112 </div> 113 </body> 114 </html>
4.site.js
1 var s = { 2 3 start: function() { 4 s.ieDetect(); 5 s.resizeCols(); 6 s.setFont(); 7 s.textScaler(); 8 }, 9 10 ieDetect: function() { 11 s.IEVersion = false; 12 var rv = -1; 13 if ( navigator.appName == 'Microsoft Internet Explorer' ) { 14 var ua = navigator.userAgent; 15 var re = new RegExp( "MSIE ([0-9]{1,}[\.0-9]{0,})" ); 16 if ( re.exec( ua ) != null ) 17 s.IEVersion = parseFloat( RegExp.$1 ); 18 } 19 }, 20 21 resizeCols: function() { 22 if( s.IEVersion != 6 ) { 23 var col_left = $( 'col_left' ).getStyle( 'height' ).toInt(); 24 var col_right = $( 'col_right' ).getStyle( 'height' ).toInt(); 25 if( col_left > col_right ) { 26 $( 'col_right' ).setStyle( 'height', ( ( col_left + 40 ) / 10 ) + 'em' ); 27 } 28 if( col_right > col_left ) 29 $( 'col_left' ).setStyle( 'height', ( col_right / 10 ) + 'em' ); 30 } 31 }, 32 33 setFont: function() { 34 if( Cookie.read( 'semfont' ) ) { 35 var size = Cookie.read( 'semfont' ); 36 $( 'wrapper' ).setStyle( 'font-size', size + 'px' ); 37 s.fontSize = size.toFloat(); 38 } 39 else 40 s.fontSize = 10; 41 }, 42 43 textScaler: function() { 44 var begin = ( s.fontSize == 10 ) ? 0 : ( s.fontSize - 10 ) * 10; 45 new Slider( $( 'scale_area' ), $( 'scale_knob' ), { 46 steps: 100, 47 onChange: function( pos ) { 48 var size = ( ( pos.toInt() / 10 ) + 10 ); 49 $( 'wrapper' ).setStyle( 'font-size', size + 'px' ); 50 }, 51 onComplete: function( pos ) { 52 var size = ( ( pos.toInt() / 10 ) + 10 ); 53 if( Cookie.read( 'semfont' ) ) 54 Cookie.dispose( 'semfont' ); 55 Cookie.write( 'semfont', size, { path: '/', duration: 28 } ); 56 s.fontSize = size; 57 } 58 } ).set( begin ); 59 } 60 } 61 62 window.addEvent( 'domready', s.start );
5.user/showPhotos.jsp
1 <%@ page language="java" contentType="text/html; charset=gb2312" 2 pageEncoding="gb2312"%> 3 <%@taglib uri="/struts-tags" prefix="s"%> 4 <%@ taglib uri="http://java.fckeditor.net" prefix="FCK"%> 5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 6 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 7 <head> 8 <title>相册</title> 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 10 <link type="text/css" rel="stylesheet" href="../css/main.css" media="all" /> 11 <!--[if IE 6]><link type="text/css" rel="stylesheet" href="css/ie6.css" media="all" /><![endif]--> 12 <script type="text/javascript" src="../js/mootools.js"></script> 13 <script type="text/javascript" src="../js/site.js"></script> 14 <script type="text/javascript"> 15 var GB_ROOT_DIR = "./greybox/"; 16 </script> 17 <script type="text/javascript" src="greybox/AJS.js"></script> 18 <script type="text/javascript" src="greybox/AJS_fx.js"></script> 19 <script type="text/javascript" src="greybox/gb_scripts.js"></script> 20 <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" /> 21 </head> 22 <body> 23 <div id="wrapper"> 24 <div id="container"> 25 <div id="scene"> <img src="../images/scene.jpg" alt="" /> 26 <h1>${empty sessionScope.blogtitle ? "博客网站系统":sessionScope.blogtitle} <br/> 27 <font size="8">${empty sessionScope.idiograph ? "我的签名":sessionScope.idiograph}</font> 28 </h1> 29 <div id="scale_area"> 30 <div id="scale_knob">» Font Size «</div> 31 </div> 32 <div id="menu"> 33 <div class="holder"> <a href="../showAllArticle.action">博客首页</a> </div> 34 <div class="holder"> <a href="showUserAllArticle.action">用户首页</a> </div> 35 <div class="holder"> <a href="editbloginfo.jsp">个性化设置</a> </div> 36 <div class="holder"> <a href="addArticle.jsp">写日志</a> </div> 37 <div class="holder"> <a href="showPhoto.action">相册</a> </div> 38 </div> 39 </div> 40 <div id="content"> 41 <div id="col_left"> 42 <div class="post"> 43 <div class="meta"></div> 44 <div class="comments"> 45 <h2>上传图片</h2> 46 <form action="photoUpload.action" method="post" enctype="multipart/form-data"> 47 <div> 48 <label>选择要上传的图片:</label> 49 <input type="file" name="myFile"/> 50 </div> 51 <div> 52 <label></label> 53 <div class="clear"> </div> 54 </div> 55 <div class="button_wrapper"> 56 <input name="提交" type="submit" class="button" value="上传" /> 57 </div> 58 </form> 59 </div> 60 61 <div class="comments"> 62 <h2>显示相册图片</h2> 63 <table cellspacing="5" align="center" border="1"> 64 <tr> 65 <s:iterator value="#request.photoList" id="photo" status="stu"> 66 <td> 67 <a href='photo/${sessionScope.username}/<s:property value="photo"/>' title="我的相册" rel="gb_imageset[photos]"> 68 <img src='photo/${sessionScope.username}/<s:property value="photo"/>' width="100" height="120"> 69 </a> 70 </td> 71 <s:if test="(#stu.index + 1) % 3 == 0"> 72 </tr> 73 <tr> 74 </s:if> 75 </s:iterator> 76 </table> 77 </div> 78 </div> 79 </div> 80 <div id="col_right"> 81 <div id="search_box"> 82 <form action="" method="post"> 83 <div> 84 <input type="text" name="search" /> 85 </div> 86 <div class="button_wrapper"> 87 <input type="submit" value="Search" class="button" /> 88 </div> 89 <div class="clear"> </div> 90 </form> 91 </div> 92 <div id="sidebar"> 93 <h2>页面导航</h2> 94 <ul> 95 <li><a href="../showAllArticle.action">博客首页</a></li> 96 <li><a href="showUserAllArticle.action">用户首页</a></li> 97 <li><a href="editbloginfo.jsp">个性化设置</a></li> 98 <li><a href="addArticle.jsp">写日志</a></li> 99 <li><a href="showPhoto.action">相册</a></li> 100 </ul> 101 </div> 102 </div> 103 <div class="clear"> </div> 104 </div> 105 <div id="footer"> 106 <div class="clear"> </div> 107 <hr /> 108 <p class="credit">博客网站系统</p> 109 </div> 110 </div> 111 </div> 112 </body> 113 </html>
6.mainHeader.jsp
1 <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>无标题文档</title> 6 <script language="javascript"> 7 <!-- 8 function mhEnter() 9 { 10 window.event.srcElement.className="lt1"; 11 } 12 function mhLeave() 13 { 14 window.event.srcElement.className="lt0"; 15 } 16 //--> 17 </script> 18 <link rel="stylesheet" href="../image/style.css"> 19 </head> 20 21 <body> 22 <table width="100%" border="0" cellpadding="0" cellspacing="0"> 23 <tr height="31"> 24 <td background="image/line.jpg"> 25 <table width="1000" border="0" cellpadding="0" cellspacing="0"> 26 <tr height="20" align="center"> 27 <td width="278"> </td> 28 <td class="lt0" onmouseenter="mhEnter()" onmouseleave="mhLeave()"><a href="showAllArticle.action">博客首页</a></td> 29 <td class="ltsep">|</td> 30 <td class="lt0" onmouseenter="mhEnter()" onmouseleave="mhLeave()"><a href="register.jsp">新博客注册</a></td> 31 <td class="ltsep">|</td> 32 <td class="lt0" onmouseenter="mhEnter()" onmouseleave="mhLeave()"><a href="login.jsp">博客登陆</a></td> 33 </tr> 34 </table> 35 </td> 36 </tr> 37 </table> 38 </body> 39 </html>
You can do anything you set your mind to, man!