使用JSP技术开发动态web实例.doc
使用JSP技术开发动态web实例.doc
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 使用 JSP 技术开发 动态 web 实例
- 资源描述：
-
[键入文字] 使用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"?> <!-- ... and keep IE7 in quirks mode --> <!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注释 <!-- quirks mode --> <!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）。 盒模型的实际宽度 关于盒模型，还有以下几点需要注意： ·对于块级展开阅读全文
咨信网温馨提示：1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前可先查看【教您几个在下载文档中可以更好的避免被坑】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时联系平台进行协调解决，联系【微信客服】、【QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”，意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：0574-28810668；投诉电话：18658249818。
实名认证
平台协调中心【客服】
自信AI助手
微信客服
客服QQ
发送邮件
意见反馈
链接地址：https://www.zixin.com.cn/doc/4766084.html