使用JSP技术开发动态web实例.doc

资源描述

[键入文字] 使用JSP技术开发动态web实例设计一个bbs网站首页，需要用户登录和密码验证，具有新用户注册功能。若成功，则跳转至主页。需求分析 1、用jdbc-odbc数据库连接功能，完成用户登录和密码验证功能； 2、同时完成新用户的注册功能； 3、用JSP指令元素和动作元素完成页面的布局和跳转功能； 4、用JSP内置对象request,session等完成对象信息的获取和设置。后台数据库设计和目录结构前台页面设计 Main.jsp Login.jsp 若登陆成功则：若密码错误 Article.jsp Bob.jsp 若无填写评论，直接点击提交则提示：deal.jsp 这是新用户注册页面关键代码 Main.jsp <a href="login.jsp">登录</a>         <a href="login2.jsp">注册</a><br><br><br> <div id="container"> <div id="sidebar1"> <%@ include file="left.html" %> </div> <div id="mainContent" align='center'> <p>欢迎来到我们论坛,以下内容只用注册用户可见</p> <p>如果您已经注册过，那么请直接登录</p> <p>如果您还未注册，那么请选择注册</p> <%@ include file="footer.jsp" %> </div> </div> </body> Login.jsp <script type="text/javascript"> function userCheck() { if (document.form1.username.value == "") { window.alert("请输入用户名"); return false; } if (document.form1.pwd.value == "") { window.alert("请输入用户密码"); return false; } return true; } </script> <body> <form id="form1" name="form1" method="post" action="login_ok.jsp" onSubmit="return userCheck()"> 用户名： <input name="username" type="text" /> <br /> <br /> 密  码： <input name="pwd" type="password" /> <br /> <br /> <input type="submit" name="Submit" value="登录" /> <input type="reset" name="Submit2" value="重置" /> </form> </body> Login_ok.jsp <% String username=request.getParameter("username"); username=new String(username.getBytes("ISO8859_1"), "GBK"); String pwd=request.getParameter("pwd"); //out.print(username+pwd); String spath="\\database\\data.mdb"; //注意由网站根到文件的路径，用到了转义字符 String dbpath = application.getRealPath(spath); //转化成物理路径 String url="jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ="+dbpath; Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); Connection conn=DriverManager.getConnection(url); Statement stmt=conn.createStatement(); String sql="select * from admin where username='"+username+"' and password='"+pwd+"'"; //out.print(sql); ResultSet rs=stmt.executeQuery(sql); if(rs.next()) { session.setAttribute("name",username); out.print("登陆成功！"); %> <jsp:forward page="main1.jsp"/> <% } else { out.print("用户名或密码错误，请重新登陆！"); } rs.close(); stmt.close(); conn.close(); %> Main1.jsp <frameset cols="25%,*"> <frame src="menu.jsp" scrolling="no" name="left"> <frame src="article.jsp" scrolling="auto" name="main"> <noframes> <body> <p>对不起，您的浏览器不支持“框架”！</p> </body> </noframes> </frameset> Menu.jsp <%=session.getAttribute("name")%>欢迎你     <a href="login.jsp">退出</a> <center> <p><Font color="#FF00000">目录</Font></p> <p><a href="article.jsp" target="main1">article</a></p> <p><a href="cosplay.jsp" target="main1">cosplay</a></p> </center> Article.jsp <table width="496" border="1" align="center" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#CCCCCC"> <tr align="center"> <td height="30">标题</td> <td height="30">发帖人</td> <td height="30">回复</td> </tr> <tr align="center" bgcolor="#FFFFCA"> <td><a href="bob.jsp">五月</a></td> <td>bob</td> <td>0</td> </tr> <tr align="center" bgcolor="#FFFFCA"> <td><a href="john.jsp">毕业季</a></td> <td>John</td> <td>3</td> </tr> <tr align="center" bgcolor="#FFFFCA"> <td><a href="mary.jsp">开悟</a></td> <td>Mary</td> <td>2</td> </tr> </table> Cosplay.jsp <h2 align="center">动漫</h2> <h3 align="right">作者：J</h3> <img src="D:\JSP\code\jspBBS\WebContent\image\1.jpg"> <img src="D:\JSP\code\jspBBS\WebContent\image\2.jpg"> <img src="D:\JSP\code\jspBBS\WebContent\image\4.jpg"> <img src="D:\JSP\code\jspBBS\WebContent\image\5.jpg"> <img src="D:\JSP\code\jspBBS\WebContent\image\7.jpg"> <img src="D:\JSP\code\jspBBS\WebContent\image\8.jpg"> <img src="D:\JSP\code\jspBBS\WebContent\image\9.jpg"> <img src="D:\JSP\code\jspBBS\WebContent\image\10.jpg"> Bob.jsp <% if(session.getAttribute("name")==null) { response.sendRedirect("login.jsp"); } else { %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Insert title here</title> </head> <body> <h2 align="center">五月</h2> <h3 align="right">作者：Bob</h3> <img src="D:\JSP\code\ch07access\WebContent\image\motion.jpg"> <pre> 五月的晴空，云散，天净如洗；五月的热风，一路，将枝头的青杏催熟，将原野的麦浪染黄。荼蘼架上的满眼繁芜，为残春画着最后的感叹号，夏却欢声笑语，盛装入驻。抖落惜春的失意，抛开记忆的伤痛，从浮浮沉沉的梦里，醒来，绿叶成荫。 </pre> <h3>"踩踩“更健康</h3> <form id="form1" name="form1" action="deal.jsp" method="post" > 主题：<input type="text" name="title"><br> 内容：<input name="comment" type="text" ><br> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> </form> <a href="article.jsp">返回主页</a> </body> </html> <% } %> John.jsp <% if(session.getAttribute("name")==null) { response.sendRedirect("login.jsp"); } else { %> <html> <head> <title>Insert title here</title> </head> <body> <h2 align="center">毕业季</h2> <h3 align="right">作者：John</h3> <img src="D:\JSP\code\ch07access\WebContent\image\music.jpg"> <p align="center">祝福你我曾经最亲爱的</p> <pre> 就走到这里吧狠狠心挥手告别什么话都不用讲别这样依依不舍刹那间已泪如雨下就此擦肩是最好结果从此你我各天涯何苦还彼此折磨也许再也不见了如果能立地成佛亲爱的你还会记住我吗斩断这红尘是否一样活细雨纷飞交织了泪水模糊了眼每当彩霞满天菊花遍野的时节执手相望没有任何语言我会唱起我们最爱的歌轻抚你即将陌生的脸将离别后的故事诉说曾经这面容是我的天如果可能就来看看我如今却变成了刺向我心头的剑不管怎样照顾好自己好好活着祝福你我曾经最亲爱的祝福你我曾经最亲爱的走在熟悉的街道人来往依旧热闹却再也听不到你的笑如今你在谁怀抱他是否对你更好那臂膀是不是你要的依靠一切都已过去一切还都继续着刻骨铭心后还奢望什么既然命中注定是过客大彻大悟了我又如何天下没有不散的宴席说得没错祝福你我曾经最亲爱的 </pre> <h3>"踩踩“更健康</h3> <form id="form1" name="form1" action="deal.jsp" method="post" > 主题：<input type="text" name="title"><br> 内容：<input name="comment" type="text" ><br> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> </form> <a href="article.jsp">返回主页</a> </body> </html> <% } %> Mary.jsp <% if(session.getAttribute("name")==null) { response.sendRedirect("login.jsp"); } else { %> <html> <head> <title>Insert title here</title> </head> <body> <h2 align="center">开悟</h2> <h3 align="right">作者：Mary</h3> <img src="D:\JSP\code\ch07access\WebContent\image\life.jpg"> <pre> 开悟――到底是什么？有一个乞丐在路边行乞了三十年。有一天一个路人经过。 “赏我几个零钱吧？”乞丐喃喃地说，顺手伸出了他那顶老旧的球帽。 “我没有东西可以给你，”路人回答说。接着就问道：“你屁股坐着的是什么？” “没什么，”乞丐回答。 “只是口旧箱子，从我有记忆以来，就一直坐在上面。” “你打开看过吗？”“没有，”乞丐说。 “何必呢？里边啥也没有。”“打开看一下，”路人坚持着说。乞丐勉为其难地撬开了箱子，这时他喜出望外，满脸狐疑，因为他看到箱子里装满了黄金。 </pre> <h3>"踩踩“更健康</h3> <form id="form1" name="form1" action="deal.jsp" method="post" > 主题：<input type="text" name="title"><br> 内容：<input name="comment" type="text" ><br> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> </form> <a href="article.jsp">返回主页</a> </body> </html> <% } %> Submit.jsp <h1>"踩踩“更健康</h1> <form id="form1" name="form1" action="deal.jsp" method="post" > 主题：<input type="text" name="title"><br> 内容：<input name="comment" type="text" ><br> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> </form> Loogin2.jsp <script type="text/javascript"> function userCheck() { if (document.form1.username.value == "") { window.alert("请输入用户名"); return false; } if (document.form1.pwd.value == "") { window.alert("请输入用户密码"); return false; } return true; } </script> <body> <form id="form1" name="form1" method="post" action="addUsers1.jsp" onSubmit="return userCheck()"> 用户名： <input name="username" type="text" /> <br /> <br /> 密  码： <input name="pwd" type="password" /> <br /> <br /> <input type="submit" name="Submit" value="注册" /> <input type="reset" name="Submit2" value="重置" /> </form> Addusers1.jsp <jsp:useBean id="connection" scope="page" class="access.JDBConnection" /> <% String username=request.getParameter("username"); username=new String(username.getBytes("ISO8859_1"), "GBK"); String pwd=request.getParameter("pwd"); //out.print(username+pwd); String spath="\\database\\data.mdb"; String dbpath = application.getRealPath(spath); connection.setDbpath(dbpath); String sql="select * from admin where username='"+username+"'"; ResultSet rs=connection.executeQuery(sql); if(rs.next()) { out.print("你填写的用户名已经被注册过，请重新填写！"); } else { String sqladd="insert into admin(username,password) values('"+username+"','"+pwd+"')"; int count=connection.executeUpdate(sqladd); out.println("该用户已注册成功!"); session.setAttribute("name",username); %> <jsp:forward page="main1.jsp"/> <% connection.conclose(); } %> Deal.jsp <% String title=request.getParameter("title"); String comment=request.getParameter("comment"); if(null==title || null==comment || title.equals("") || comment.equals("")){ %> <jsp:forward page="error.html"/> <% } else{ %> <jsp:forward page="success.jsp"> <jsp:param value="<%=title %>" name="title"/> <jsp:param value="<%=comment %>" name="comment"/> </jsp:forward> <% } %> Success.jsp <% String title=request.getParameter("title"); title=new String(title.getBytes("ISO8859_1"), "GBK"); String comment=request.getParameter("comment"); comment=new String(comment.getBytes("ISO8859_1"), "GBK"); %> 标题：<%=title %><br> 内容：<%=comment %><br> <a href="article.jsp">确认提交？</a> Error.html <font size="4pt">   请输入标题和内容，谢谢！</font> <p><a href="submit.jsp">返回</a></p> <p><a href="article.jsp">退出评论</a></p> Footer.jsp <div id="footer"> <p align="center">copyright 2012-2020@</p> <p align="center">联系电话：12345678 E-MAIL:12345678@</p> <p align="center">请和我联系</p> <p align="center">BEST VIEW 1024*600</p> </div> Left.html <h3>left</h3> <p><a href="article.jsp">article</a></p> <p><a href="cosplay.jsp">cosplay</a></p>附录资料：web前端面试题 1. W3C标准有哪些？ W3C推行的主要规范有HTML，CSS，XML，XHTML和DOM（Document Object Model）。 2. 谈谈Js的内存泄露问题。 3. 谈谈对Html 5的了解。 4. 谈谈对CSS 3的了解。 5. 用js实现随即选取10--100之间的10个数字，存入一个数组，并排序。 var iArray = []; funtion getRandom(istart, iend){ var iChoice = istart - iend +1; return Math.floor(Math.random() * iChoice + istart; } for(var i=0; i<10; i++){ iArray.push(getRandom(10,100)); } iArray.sort(); 6. 把两个数组合并，并删除第二个元素。 var array1 = ['a','b','c']; var bArray = ['d','e','f']; var cArray = array1.concat(bArray); cArray.splice(1,1); 7. Js面向对象的几种方式。 8. 请谈谈原型方式构造对象的特点。 9. 在Css中那个属性会影响dom读取文档流的顺序。答： float属性。 10. 请介绍几种用div实现两列布局的方案（兼容），另外要考虑文档流的加载。 11. 谈谈css在浏览器中的兼容问题，详细谈谈IE6的一些bug,以及解决方案。 12. 谈谈你对闭包的理解。以及如何实现js方法的重写。 [HTML && CSS] 1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 首先我讲讲如何触发两种模式：加入xml头部声明可以触发IE浏览器的Quirks mode，触发之后，浏览器解析方式就和IE5.5一样，拥有IE5.5一样的bug和其他问题，行为（Javascript）也是如此。 IE6的触发在XHTML的DOCTYPE前加入XML声明 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> IE7的触发在XML声明和XHTML的DOCTYPE之间加入HTML注释 <?xml version="1.0" encoding="utf-8"?>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> IE6和IE7都可以触发的在HTML4.01的DOCTYPE文档头部加入HTML注释  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 其次是这样的意义各个浏览器的混杂模式，基本就是各个浏览器的私有模式，不相互兼容。所以，除非是为了兼容的问题，比如你不想修改很久很久以前做的IE ONLY的网页，否则刻意触发混杂模式没有任何意义。 2：行内元素有哪些？块级元素有哪些？CSS的盒模型？一.行内元素和块级元素有哪些？块级元素 <address> information on author <blockquote> long quotation <button> push button <caption> table caption <dd> definition description <del> deleted text <div> generic language/style container <dl> definition list <dt> definition term <fieldset> form control group <form> interactive form <h1> heading <h2> heading <h3> heading <h4> heading <h5> heading <h6> heading <hr> horizontal rule <iframe> inline subwindow <ins> inserted text <legend> fieldset legend <li> list item <map> client-side image map <noframes> alternate content container for non frame-based rendering <noscript> alternate content container for non script-based rendering <object> generic embedded object <ol> ordered list <p> paragraph <pre> preformatted text <table> table <tbody> table body <td> table data cell <tfoot> table footer <th> table header cell <thead> table header <tr> table row <ul> unordered list 行内元素 <a> anchor <abbr> abbreviated form <acronym> acronym <b> bold text style <bdo> I18N BiDi over-ride <big> large text style <br> forced line break <button> push button <cite> citation <code> computer code fragment <del> deleted text <dfn> instance definition <em> emphasis <i> italic text style <iframe> inline subwindow <img> Embedded image <input> form control <ins> inserted text <kbd> text to be entered by the user <label> form field label text <map> client-side image map <object> generic embedded object <q> short inline quotation <samp> sample program output, scripts, etc. <select> option selector <small> small text style <span> generic language/style container <strong> strong emphasis <sub> subscript <sup> superscript <textarea> multi-line text field <tt> teletype or monospaced text style <var> instance of a variable or program argument 二.行内元素与块级元素有什么不同？ 1.尺寸-块级元素和行内元素之间的一个重要的不同点行内元素和width W3C CSS2 标准规定行内元素、非置换元素不会应用width属性。以下例子中，对行内元素<a>应用了width:200px,你可以看到，根本就没有什么效果。行内元素和height W3C CSS2 标准规定行内元素、非置换元素不会应用height属性，但是盒子高度可以通过line-height来指定。以下例子，对行内元素<a>应用了height:50px,你可以看到什么效果都没。行内元素和padding 你可以给行内元素设置padding，但只有padding-left和padding-right生效。以下例子，行内元素<a>应用了padding:50px。你可以看到对左右的内容有影响，但是对上下没影响。行内元素和marging margin属性也是和padding属性一样，对行内元素左右有效，上下无效。下面的例子,对<a>应用了margin:50px，你可以看到左右边缘是生效了但是内容上下却没有。记住对行内元素设置宽度width 无效。设置高度height 无效，可以通过line-height来设置。设置margin 只有左右margin有效，上下无效。设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的，看图上效果就知道了盒子模型 W3C 组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。对于初学者，经常会搞不清楚 margin，background-color，background- image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。盒模型的实际宽度关于盒模型，还有以下几点需要注意：　　·对于块级

展开阅读全文