基于JSP实现的个人网站

Tempted

发布日期: 2019-04-12 14:24:51 浏览量: 640
评分:
star star star star star star star star star_border star_border
*转载请注明来自write-bug.com

摘 要

本报告是JSP程序设计的期末设计的课程设计报告。本网站基本满足了所有需要的内容和功能需求,包含了个人的简介,家乡的介绍,包括个人的信息,留言板等内容。

也包含了数据库的增(用户注册,留言板的留言等),删(个人留言支持删除),改(个人信息的修改等),查(留言板的查看,个人信息的查看等)四个功能。数据库的3张表,包括用户登录信息表,用户个人信息表,留言板内容表。

主题:JSP、增删改查、数据库、个人服务器

1、系统设计背景意义

1.1 开发背景

随着WWW(World Wide Web)的普及,动态网页技术也急速发展。从原来的CGI(Common Gateway In-terface)到ASP(Active Server Page),都从某种程度上满足了网页开发人员对动态网页开发技术的需求。但是不管是CGI还是ASP都存在一定的局限性,如CGI对服务器资源的耗费,ASP只能同Microsoft IIS一起使用等,这些都限制了这些技术的使用范围,极大地阻碍了它们的推广。

广大的页面开发人员都热切地盼望一种统一的页面开发技术,该技术应该具有的特点:

  • 与操作平台无关,能够在任何Web或应用程序服务器上运行

  • 将应用程序逻辑和页面显示分离

  • 提供代码重用,简化开发基于Web的交互式应用程序的过程

JSP(Java Server Page)技术就是被设计用来满足这样的要求的。JSP是由Sun MicroSystem公司于1999年6月推出的新的网页开发技术,它是基于Java Serv-let以及整个Java体系的Web开发技术,是Servlet2.1API的扩展。利用这一技术,可以建立先进、安全和跨平台的动态网站。

1.2 研究现状

JSPJava语言以不依赖于平台、面向对象、安全等优良特性成为网络程序设计语言中的佼佼者。目前,许多与Java有关的技术得到了广泛的应用与认可,JSP(JavaServerPages)就是其中之一。JSP是基于Java语言的一种Web应用开发技术,可以建立安全、跨平台的先进动态网站。

许多Web网站都使用了JSP技术。利用JSP技术创建的Web应用程序可以实现动态页面与静态页面分离,便于Web应用程序的扩展和维护。由于JSP是基于Java语言的Web技术,相对其他Web技术,JSP具有脱离硬件平台束缚、编译后运行等优点,已成为Internet上的主流Web技术之一。

2 、需求分析

2.1 系统需求分析

设计一个个人网站,网站内容必须包括个人的基本信息(含个人照片),比如个人爱好,家乡特产、特色旅游等静态网页内容;必须调用数据库,且具备数据库的增删改查的功能,这是动态网页部分内容。

2.2 数据需求

需要一个数据库,包括三张数据表,分别记录用户的登录信息,记录用户每个人的用户信息,记录用户的留言内容。

3 、系统设计

3.1 系统原理

3.2 数据库设计

3.2.1 数据库概念结构设计

数据库概念结构设计是在需求分析的基础上,设计出能够满足用户需求的各种实体,以及它们之间的关系,为后面的逻辑结构设计打下基础。用E-R图是描述数据实体关系的一种直观描述工具,所以本系统采用了E-R图的方法进行数据库概念结构设计。

用户登陆E-R图

用户实体E-R图

留言板E-R图

实体之间关系E-R图

3.3.2 数据库逻辑结构设计

概念结构是独立于实际数据模型的信息结构,必须将其转化为逻辑结构后才能进行数据库应用的设计。也就是要将概念上的结构转化为BP数据库系统所支持的实际数据模型。

个人网站数据库中各个表格的设计结果如下面的四个表所示。每个表表示数据库中的一个表。

用户登录表

  • username:记录用户注册时的用户名

  • password:记录用户注册时的密码

且用户名和密码均不能为空值,所以在提交到数据库之前已经在网页中进行检查。

用户留言板表

  • username:记录留言的用户

  • date:记录用户留言的时间,精确到秒。格式为“YYYY-MM-DD HH-MM-SS”

  • message:记录用户留言的内容,格式为TEXT

注:date的记录利用数据库自带的now()函数,方便网页的内容的传输。

用户信息表

  • username:记录个人信息的所有者

  • gender:记录用户的性别

  • age:记录用户的年龄

  • phone_number:记录用户的联系方式

  • school:记录用户的所在学校

  • address:记录用户的地址

3.4 系统模块设计

4、系统实现

4.1 欢迎页(index.jsp)

本页是网站的第一页,可以选择用户登录(login.jsp)或者跳过登录直接进去主页(Home.jsp),如果没有注册,可以点击注册按钮,进入注册页面(register.jsp)。

效果示意图:

  1. <%@ page language="java" contentType="text/html; charset=utf-8"%>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <style>
  6. body{
  7. text-align:center;
  8. background: url("./img/bg.jpg") fixed center center no-repeat;
  9. background-size: cover;
  10. width: 100%;
  11. }
  12. #center{
  13. margin:0 auto;
  14. border:1px soild #000;
  15. width:300px;
  16. height:100px
  17. }
  18. *{
  19. padding: 0;
  20. margin: 0;
  21. }
  22. .black_half{
  23. padding: 25px;
  24. background-color: rgba(0,0,0,0.5);
  25. }
  26. .black_half h1{
  27. color: #FFFFFF;
  28. }
  29. .black_half a{
  30. text-decoration:none;
  31. color: #FFFFFF;
  32. }
  33. .black_half a:hover{
  34. text-decoration:underline;
  35. color: #FFFFFF;
  36. }
  37. .white h3{
  38. color: #FFFFFF;
  39. }
  40. </style>
  41. <title>欢迎——…的期末作业</title>
  42. </head>
  43. <body>
  44. <br><br>
  45. <div class="black_half">
  46. <h1>W E L C O M E !</h1>
  47. </div>
  48. <div class="black_half">
  49. <h2>
  50. <a href="login.jsp">用户登陆</a>
  51. &thinsp;
  52. <a href="register.jsp" style="font-size:12px;">
  53. 还没有账号?点此注册</a>
  54. </h2><br>
  55. <h2>
  56. <a href="Home.jsp">我是游客,跳过登录</a>
  57. </h2>
  58. </div>
  59. <br><br>
  60. <div class="white">
  61. </div>
  62. </body>
  63. </html>

4.2 主页(Home.jsp)

本页面是网站的主页,内容比较简单。

最上端的是导航栏,如果前面选择了登陆,则左上角会显示“您好,xxx”,可以选择退出登录,右边导航栏也会多一个“个人信息”按钮,可以进入个人信息页面(details.jsp)。

如果未登录,会显示“您还未登陆,点击登录” ,可以选择登录按钮,进入(login.jsp)。

右边导航栏的其他按钮还包括作者简介(profile.jsp)、家乡介绍(hometown.jsp)、留言板(board.jsp)、关于(about.jsp)、返回欢迎页(index.jsp)。

效果示意图:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>主页</title>
  5. <style>
  6. @import"home_style.css"
  7. </style>
  8. </head>
  9. <body style="
  10. font-size: 16px;
  11. line-height: 1.4em;
  12. letter-spacing: 0.08em;
  13. padding: 0;
  14. margin: 0;
  15. background: url('./img/bg.jpg') fixed center center no-repeat;
  16. background-size: cover;
  17. width: 100%;
  18. ">
  19. <div class="ace-head-inner">
  20. <div class="ace-head-container ace-container">
  21. <div class="ace-head-row">
  22. <div id="ace-head-col1" class="ace-head-col text-left">
  23. <span>
  24. <%
  25. String username = (String)session.getAttribute("username");
  26. if (username != null){
  27. out.println("您好,"+username+"&nbsp;<a href='logout.jsp'>退出登陆</a>&nbsp;&nbsp;");
  28. }
  29. else{
  30. out.println("您还未登陆&nbsp;<a href='login.jsp'>点此登陆</a>&nbsp;&nbsp;");
  31. }
  32. %>
  33. </span>
  34. </div>
  35. <nav id="ace-main-nav">
  36. <ul class="clear-list">
  37. <%
  38. if (username != null){
  39. out.println("<li><a href='details.jsp'>个人信息</a></li>");
  40. }
  41. %>
  42. <li><a href="Home.jsp">主页</a></li>
  43. <li><a href="profile.jsp">作者简介</a></li>
  44. <li><a href="hometown.jsp">家乡介绍</a></li>
  45. <li><a href="board.jsp">留言板</a></li>
  46. <li><a href="about.jsp">关于</a></li>
  47. <li><a href="index.jsp">返回欢迎页</a></li>
  48. </ul>
  49. </nav>
  50. </div>
  51. </div>
  52. </div>
  53. <div class = white_box>
  54. <p style="font-size:200px;">你好。</p>
  55. <p style="font-size:200px;" align="right">欢迎。</p>
  56. </div>
  57. </body>
  58. </html>

4.3 注册(register.jsp/checkregister.jsp)

本页面是网站的注册页面,包含两个jsp文件,register.jsp获取用户输入的表单,包括用户名和两次密码,在通过js函数判断(判断用户名、密码是否为空,两次密码是口相同)之后通过onsubmit的方法决定是否将表单传送给checkregister.jsp。

如果通过判断,checkregister.jsp连接数据库并先用select查询是否存在用户名相同的用户,如果不存在用insert的sql语句把用户信息输入数据库,并返回注册成功或者失败的提示框,如果成功跳转到主页,如果失败跳转回注册页面。

效果示意图:

register.jsp

  1. <%@ page language="java" contentType="text/html; charset=utf-8"%>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>用户注册</title>
  6. </head>
  7. <style>
  8. @import"style.css"
  9. </style>
  10. <script>
  11. function addCheck() {
  12. var username = document.regfrm.username.value;
  13. var password = document.regfrm.password.value;
  14. var double_times = document.regfrm.double_times.value;
  15. if (username == "") {
  16. alert("用户名不能为空!");
  17. return false;
  18. }
  19. if (password == "") {
  20. alert("密码不能为空!");
  21. return false;
  22. }
  23. if (password != double_times) {
  24. alert("两次输入密码不相同!");
  25. return false;
  26. }
  27. }
  28. function validate() {
  29. var flag = addCheck();
  30. if (flag == false)
  31. return false;
  32. return true;
  33. }
  34. </script>
  35. <body>
  36. <div id = center>
  37. <form action="checkregister.jsp" method="post"
  38. name = "regfrm" onsubmit="return validate();">
  39. <table class="hovertable">
  40. <tr>
  41. <td colspan="5" align="center" style="font-size:30px;
  42. height:80px;width:300px;">
  43. <strong>注册</strong></td>
  44. </tr>
  45. <tr >
  46. <th>用户名:</th>
  47. <td><input type="text" name="username"
  48. value="输入16个字符以内" maxlength="16"
  49. onfocus="if(this.value == '输入16个字符以内') this.value =''">
  50. </td>
  51. </tr>
  52. <tr>
  53. <th>输入密码:</th>
  54. <td><input type="text" name="password"
  55. value="输入20个字符以内"
  56. maxlength="20" style="width:200px;"
  57. onfocus="if(this.value == '输入20个字符以内')
  58. {this.value =''; this.type='password'}"></td>
  59. </tr>
  60. <tr>
  61. <th>确认密码:</th>
  62. <td><input type="text" name="double_times"
  63. value="请再次输入密码" maxlength="20" style="width:200px;"
  64. onfocus="if(this.value == '请再次输入密码')
  65. {this.value =''; this.type='password'}">
  66. </td>
  67. </tr>
  68. <tr>
  69. <td colspan="2" align="center">
  70. <input type="submit" value=" 注 册 ">
  71. <input type ="button" value=" 返回登陆 "
  72. onclick="location='login.jsp'">
  73. </td>
  74. </tr>
  75. <tr>
  76. <td colspan="5" align="center"><a href="index.jsp">
  77. 返 回 主 页 </a></td>
  78. </tr>
  79. </table>
  80. </form>
  81. </div>
  82. </body>
  83. </html>

checkregister.jsp

  1. <%@ page language="java" contentType="text/html; charset=utf-8"%>
  2. <%@ page import = "java.sql.*" %>
  3. <!DOCTYPE html>
  4. <html>
  5. <body>
  6. <%
  7. String user = new String(request.getParameter("username").getBytes("ISO8859_1"),"utf-8");
  8. String pwd = new String(request.getParameter("password").getBytes("ISO8859_1"),"utf-8");
  9. Class.forName("com.mysql.jdbc.Driver");
  10. String url = "jdbc:mysql://127.0.0.1:3306/user_data";
  11. String um = "root";
  12. String psw= "8876";
  13. Connection conn = DriverManager.getConnection(url, um, psw);
  14. PreparedStatement pStmt = conn.prepareStatement("select * from user_data.user_info where username = '" + user + "'");
  15. ResultSet rs = pStmt.executeQuery();
  16. if(rs.next()){
  17. out.println("<script language='javascript'>alert('该用户已存在,请直接登陆!');window.location.href='register.jsp';</script>");
  18. }
  19. else{
  20. PreparedStatement tmt = conn.prepareStatement("Insert into user_data.user_info values('" + user + "','" + pwd + "')");
  21. int rst = tmt.executeUpdate();
  22. if (rst != 0){
  23. PreparedStatement tmt2 = conn.prepareStatement("Insert into user_data.details values('" + user + "',1,0,' ',' ',' ')");
  24. tmt2.executeUpdate();
  25. out.println("<script language='javascript'>alert('用户注册成功!');window.location.href='login.jsp';</script>");
  26. }
  27. else{
  28. out.println("<script language='javascript'>alert('用户注册失败!');window.location.href='register.jsp';</script>");
  29. }
  30. }
  31. %>
  32. </body>
  33. </html>

4.4 登陆(login.jsp/checklogin.jsp)

本页面是网站的登陆页面,包含两个jsp文件,login.jsp获取用户输入的表单,包括用户名和两次密码,在通过js函数判断(判断用户名、密码是否为空)之后通过onsubmit的方法决定是否将表单传送给checklogin.jsp。

如果通过判断,checklogin.jsp连接数据库并通过select的sql语句查询数据库中用户信息,如果成功显示登陆成功的消息框并跳转到主页,如果失败显示登陆失败的消息框跳转回登陆页面。

效果示意图:

login.jsp

  1. <%@ page language="java" contentType="text/html; charset=utf-8"%>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>用户登陆</title>
  6. </head>
  7. <style>
  8. @import"style.css"
  9. </style>
  10. <script>
  11. function validateLogin() {
  12. var userName = document.frmLogin.username.value;
  13. var password = document.frmLogin.password.value;
  14. if ((userName == "") || (userName == "输入您的用户名")) {
  15. alert("请输入用户名!");
  16. return false;
  17. }
  18. if ((password == "") || (password == "输入您的密码")) {
  19. alert("请输入密码!");
  20. return false;
  21. }
  22. }
  23. </script>
  24. <body>
  25. <div id = "center">
  26. <form action="checklogin.jsp" method="post" name="frmLogin">
  27. <table class="hovertable" >
  28. <tr>
  29. <td colspan="5" align="center" style="font-size:30px;height: 80px;width:300px;"><strong>登陆</strong></td>
  30. </tr>
  31. <tr>
  32. <th style="font-size:15px;">用户名:</th>
  33. <td style="font-size:15px;"><input type="text" name="username" value="输入您的用户名"
  34. maxlength="16" style="width:200px;"
  35. onfocus="if(this.value == '输入您的用户名') this.value =''"></td>
  36. </tr>
  37. <tr>
  38. <th style="font-size:15px;">密 码:</th>
  39. <td style="font-size:15px;"><input type="text" name="password" value="输入您的密码"
  40. maxlength="20" style="width:200px;"
  41. onfocus="if(this.value == '输入您的密码'){this.value =''; this.type='password'}"></td>
  42. </tr>
  43. <tr>
  44. <td colspan="5" align="center" style="font-size:15px;">
  45. <input type="submit" value=" 登 录 " onclick="return validateLogin()">
  46. <input type ="button" value=" 新用户注册 " onclick="location='register.jsp'">
  47. </td>
  48. </tr>
  49. <tr>
  50. <td colspan="5" align="center"><a href="index.jsp">
  51. 返 回 主 页 </a></td>
  52. </tr>
  53. </table>
  54. </form>
  55. </div>
  56. </body>
  57. </html>

checklogin.jsp

  1. <%@ page language="java" contentType="text/html; charset=utf-8"%>
  2. <%@ page import = "java.sql.*" %>
  3. <!DOCTYPE html>
  4. <html>
  5. <body>
  6. <%
  7. String username = new String(request.getParameter("username").getBytes("ISO8859_1"),"utf-8");
  8. String password = new String(request.getParameter("password").getBytes("ISO8859_1"),"utf-8");
  9. Class.forName("com.mysql.jdbc.Driver");
  10. String url = "jdbc:mysql://127.0.0.1:3306/user_data";
  11. String um = "root";
  12. String psw= "8876";
  13. Connection conn = DriverManager.getConnection(url, um, psw);
  14. if(conn != null){
  15. String sql = "select * from user_data.user_info where username='"+username+"' and password='"+ password + "'";
  16. Statement stmt = conn.createStatement();
  17. ResultSet rs = stmt.executeQuery(sql);
  18. if(rs.next()){
  19. session.setAttribute("username",username);
  20. out.println("<script language='javascript'>alert('登录成功!');window.location.href='Home.jsp';</script>");
  21. }
  22. else{
  23. out.println("<script language='javascript'>alert('登录失败!');window.location.href='login.jsp';</script>");
  24. }
  25. }
  26. %>
  27. </body>
  28. </html>

4.5 个人信息(details.jsp/setdetails.jsp/getdetails.tag)

本页面是网站的个人信息页面,每次打开页面getdetails.tag都会从数据库中查询个人信息(每个新注册的用户默认都是空数据的),并显示在details.jsp中。并且可以修改表中的数据,点击修改按钮,表中的数据会以表单的形式以post的方式传递给setdetails.jsp,该setdetails可以连接数据库并通过update方式修改数据库。

效果示意图:

details.jsp

  1. <%@ page language="java" contentType="text/html; charset=utf-8"%>
  2. <%@ taglib tagdir = "/WEB-INF/tags" prefix="getdetails" %>
  3. <%@ page import = "java.sql.*" %>
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <title>个人信息</title>
  8. <style>
  9. @import"style.css"
  10. </style>
  11. </head>
  12. <body>
  13. <getdetails:getdetails>
  14. </getdetails:getdetails>
  15. <div id = center>
  16. <form action="setdetails.jsp" method="post" name="set_details">
  17. <table class="hovertable">
  18. <tr>
  19. <td colspan="5" align="center" style="font-size:30px;height: 80px;width:350px;"><strong>个人信息</strong></td>
  20. </tr>
  21. <tr>
  22. <th>性别:</th>
  23. <td>
  24. <label>
  25. <input type="radio" name="gd" id="" class="a-radio" value=1 <%= gender==1?"Checked":"" %> >
  26. <span class="b-radio"></span>
  27. </label>
  28. <label>
  29. <input type="radio" name="gd" id="" class="a-radio" value=0 <%= gender==0?"Checked":"" %> >
  30. <span class="b-radio"></span>
  31. </label>
  32. </td>
  33. </tr>
  34. <tr>
  35. <th>年龄:</th>
  36. <td>
  37. <label>
  38. <input type="text" type="text" name="age" value = <%=age %>
  39. style="width:200px;" maxlength="2">
  40. </label>
  41. </td>
  42. </tr>
  43. <tr>
  44. <th>联系方式:</th>
  45. <td>
  46. <label>
  47. <input type="text" type="text" name="phone_number" style="width:200px;" maxlength="11" value = <%=phone_number %> >
  48. </label>
  49. </td>
  50. </tr>
  51. <tr>
  52. <th>所在学校:</th>
  53. <td>
  54. <label>
  55. <input type="text" type="text" name="school" style="width:200px;" maxlength="40" value = <%=school %> >
  56. </label>
  57. </td>
  58. </tr>
  59. <tr>
  60. <th>详细地址:</th>
  61. <td>
  62. <label>
  63. <input type="text" type="text" name="address" style="width:200px;" maxlength="40" value = <%=address %> >
  64. </label>
  65. </td>
  66. </tr>
  67. <tr>
  68. <td colspan="2">
  69. <input type = "submit" value = " 修 改 ">
  70. <input type = "button" value = " 返 回 " onclick="location='Home.jsp'">
  71. </td>
  72. </tr>
  73. </table>
  74. </form>
  75. </div>
  76. </body>
  77. </html>

setdetails.jsp

  1. <%@ page language="java" contentType="text/html; charset=utf-8"%>
  2. <%@ page import = "java.sql.*" %>
  3. <!DOCTYPE html>
  4. <html>
  5. <body>
  6. <%
  7. String gender = new String(request.getParameter("gd").getBytes("ISO8859_1"),"utf-8");
  8. String age = new String(request.getParameter("age").getBytes("ISO8859_1"),"utf-8");
  9. String phone_number = new String(request.getParameter("phone_number").getBytes("ISO8859_1"),"utf-8");
  10. String school = new String(request.getParameter("school").getBytes("ISO8859_1"),"utf-8");
  11. String address = new String(request.getParameter("address").getBytes("ISO8859_1"),"utf-8");
  12. String username = (String)session.getAttribute("username");
  13. int _gender = Integer.parseInt(gender);
  14. int _age = Integer.parseInt(age);
  15. Class.forName("com.mysql.jdbc.Driver");
  16. String url = "jdbc:mysql://127.0.0.1:3306/user_data";
  17. String um = "root";
  18. String psw= "8876";
  19. Connection conn = DriverManager.getConnection(url, um, psw);
  20. if(conn != null){
  21. PreparedStatement tmt2 = conn.prepareStatement("UPDATE user_data.details set gender="+ _gender +",age="+ _age +",phone_number='"+ phone_number +"',school='"+ school +"',address='"+ address +"' where username='"+username+"'");
  22. int rst = tmt2.executeUpdate();
  23. if(rst != 0){
  24. out.println("<script language='javascript'>alert('修改成功!');window.location.href='details.jsp';</script>");
  25. }
  26. else{
  27. out.println("<script language='javascript'>alert('修改失败!');window.location.href='Home.jsp';</script>");
  28. }
  29. }
  30. %>
  31. </body>
  32. </html>

getdetails.tag

  1. <%@ tag language="java" pageEncoding="utf-8"%>
  2. <%@ tag import="java.sql.*" %>
  3. <%@ variable name-given="gender" variable-class="java.lang.Integer" scope="AT_END"%>
  4. <%@ variable name-given="age" variable-class="java.lang.Integer" scope="AT_END"%>
  5. <%@ variable name-given="phone_number" variable-class="java.lang.String" scope="AT_END"%>
  6. <%@ variable name-given="school" variable-class="java.lang.String" scope="AT_END" %>
  7. <%@ variable name-given="address" variable-class="java.lang.String" scope="AT_END"%>
  8. <%
  9. String username = (String)session.getAttribute("username");
  10. if (username != null){
  11. Class.forName("com.mysql.jdbc.Driver");
  12. String url = "jdbc:mysql://127.0.0.1:3306/user_data";
  13. String um = "root";
  14. String psw= "8876";
  15. Connection conn = DriverManager.getConnection(url, um, psw);
  16. if(conn != null){
  17. String sql = "select * from user_data.details where username='"+username+"'";
  18. Statement stmt = conn.createStatement();
  19. ResultSet rs = stmt.executeQuery(sql);
  20. if(rs.next()){
  21. String ss = rs.getString(1);
  22. int gender = rs.getInt(2);
  23. int age = rs.getInt(3);
  24. String phone_number = rs.getString(4);
  25. String school = rs.getString(5);
  26. String address = rs.getString(6);
  27. jspContext.setAttribute("gender", gender);
  28. jspContext.setAttribute("age", age);
  29. jspContext.setAttribute("phone_number", phone_number);
  30. jspContext.setAttribute("school", school);
  31. jspContext.setAttribute("address", address);
  32. }
  33. }
  34. }
  35. else{
  36. out.println("<script language='javascript'>alert('请先登录!');window.location.href='login.jsp';</script>");
  37. }
  38. %>

4.6 作者简介(profile.jsp)

本页面是本网站的个人简介页面,除了导航栏之外为静态网页,简单的自我介绍。

效果示意图:

profile.jsp

  1. <%@ page language="java" contentType="text/html; charset=utf-8"%>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>作者简介</title>
  6. <style>
  7. @import"home_style.css"
  8. </style>
  9. </head>
  10. <body>
  11. <div class="ace-head-inner">
  12. <div class="ace-head-container ace-container">
  13. <div class="ace-head-row">
  14. <div id="ace-head-col1" class="ace-head-col text-left">
  15. <span>
  16. <%
  17. String username = (String)session.getAttribute("username");
  18. if (username != null){
  19. out.println("您好,"+username+"&nbsp;<a href='logout.jsp'>退出登陆</a>&nbsp;&nbsp;");
  20. }
  21. else{
  22. out.println("您还未登陆&nbsp;<a href='login.jsp'>点此登陆</a>&nbsp;&nbsp;");
  23. }
  24. %>
  25. </span>
  26. </div>
  27. <nav id="ace-main-nav">
  28. <ul class="clear-list">
  29. <%
  30. if (username != null){
  31. out.println("<li><a href='details.jsp'>个人信息</a></li>");
  32. }
  33. %>
  34. <li><a href="Home.jsp">主页</a></li>
  35. <li><a href="profile.jsp">作者简介</a></li>
  36. <li><a href="hometown.jsp">家乡介绍</a></li>
  37. <li><a href="board.jsp">留言板</a></li>
  38. <li><a href="about.jsp">关于</a></li>
  39. <li><a href="index.jsp">返回欢迎页</a></li>
  40. </ul>
  41. </nav>
  42. </div>
  43. </div>
  44. </div>
  45. <div class = white_box>
  46. <div style="text-align:center;">
  47. <br>
  48. <h1><b>作者简介——我</b><br></h1>
  49. <br>
  50. <img src="./img/myphoto.jpg" style="display:block;max-height:200px;max-width:200px;margin:0 auto;"/><br>
  51. <br>
  52. <h2 style="display:inline;">name:</h2>
  53. <br><br>
  54. <h2 style="display:inline;">pingyin:</h2>
  55. <br><br>
  56. <h2 style="display:inline;">En-name:</h2>Ray8876
  57. <br><br>
  58. <h2 style="display:inline;">birth:</h2>1998-08
  59. <br><br>
  60. <h2 style="display:inline;">phone:</h2>158****2095
  61. <br><br>
  62. <h2 style="display:inline;">e-mail:</h2>
  63. <br><br>
  64. <h2 style="display:inline;">school:</h2>中国计量大学现代科技学院
  65. <br><br>
  66. <h2 style="display:inline;">major:</h2>
  67. <br><br>
  68. <h2 style="display:inline;">class:</h2>
  69. </div>
  70. </div>
  71. </body>
  72. </html>

4.7 家乡介绍(hometown.jsp)

本页面是本网站的家乡介绍页面,除了导航栏之外为静态网页,大部分内容摘自乌镇导游网。本页面源代码较长且为静态网页,这里省略

效果示意图:

4.8 留言板

4.8.1 留言板(board.jsp/getboard.tag)

本页面是网站的留言板网页,每次打开页面都会调用getboard.tag,从数据库中查询所有的留言内容(SELECT * FROM user_data.board order BY date DESC;),并且按照时间倒序排序,排在最上面的为最新留言。

第一个白框是留言的模块,第二个白框是搜索模块(search.jsp)和我的留言的链接(myboard.jsp)。

效果示意图:

board.jsp

  1. <%@ page language="java" contentType="text/html; charset=utf-8"%>
  2. <%@ taglib tagdir = "/WEB-INF/tags" prefix="getboard" %>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <title>留言板</title>
  7. <style>
  8. @import"home_style.css"
  9. </style>
  10. </head>
  11. <body style="
  12. font-size: 16px;
  13. line-height: 1.4em;
  14. letter-spacing: 0.08em;
  15. padding: 0;
  16. margin: 0;
  17. background: url('./img/bg4.jpg') fixed center center no-repeat;
  18. background-size: cover;
  19. width: 100%;">
  20. <getboard:getboard>
  21. </getboard:getboard>
  22. <div class="ace-head-inner">
  23. <div class="ace-head-container ace-container">
  24. <div class="ace-head-row">
  25. <div id="ace-head-col1" class="ace-head-col text-left">
  26. <span>
  27. <%
  28. String username = (String)session.getAttribute("username");
  29. if (username != null){
  30. out.println("您好,"+username+"&nbsp;<a href='logout.jsp'>退出登陆</a>&nbsp;&nbsp;");
  31. }
  32. else{
  33. out.println("您还未登陆&nbsp;<a href='login.jsp'>点此登陆</a>&nbsp;&nbsp;");
  34. }
  35. %>
  36. </span>
  37. </div>
  38. <nav id="ace-main-nav">
  39. <ul class="clear-list">
  40. <%
  41. if (username != null){
  42. out.println("<li><a href='details.jsp'>个人信息</a></li>");
  43. }
  44. %>
  45. <li><a href="Home.jsp">主页</a></li>
  46. <li><a href="profile.jsp">作者简介</a></li>
  47. <li><a href="hometown.jsp">家乡介绍</a></li>
  48. <li><a href="board.jsp">留言板</a></li>
  49. <li><a href="about.jsp">关于</a></li>
  50. <li><a href="index.jsp">返回欢迎页</a></li>
  51. </ul>
  52. </nav>
  53. </div>
  54. </div>
  55. </div>
  56. <div class = white_box>
  57. <form action="checkboard.jsp" method="post">
  58. <textarea rows="5" cols="" name="txt"></textarea>
  59. <br><br><br>
  60. <center>
  61. <input type="submit" value=" 留 言 " style="font-size:20px;" >
  62. </center>
  63. </form>
  64. </div>
  65. <div class = white_box>
  66. <form action="search.jsp" method="post">
  67. <center>
  68. <input type="text" value=" 留 言 搜 索 " style="font-size:20px; display: inline;"
  69. onfocus="if(this.value == ' 留 言 搜 索 ') this.value =''" name="src">
  70. <input type="submit" value=" 搜 索 " style="font-size:20px;" >
  71. <input type ="button" value=" 我的留言 " onclick="location='myboard.jsp'" style="font-size:20px;" >
  72. </center>
  73. </form>
  74. </div>
  75. <%=content %>
  76. </body>
  77. </html>

4.8.2 搜索留言(search.jsp/searchboard.tag)

搜索留言与留言栏内容相似,唯一的差别就是tag文件可以接收input框中的搜索的内容并且通过select语句查询包含查询内容的留言内容并返回内容。

效果示意图:

search.jsp

  1. <%@ page language="java" contentType="text/html; charset=utf-8"%>
  2. <%@ taglib tagdir = "/WEB-INF/tags" prefix="searchboard" %>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <title>留言板</title>
  7. <style>
  8. @import"home_style.css"
  9. </style>
  10. </head>
  11. <body style="
  12. font-size: 16px;
  13. line-height: 1.4em;
  14. letter-spacing: 0.08em;
  15. padding: 0;
  16. margin: 0;
  17. background: url('./img/bg4.jpg') fixed center center no-repeat;
  18. background-size: cover;
  19. width: 100%;
  20. ">
  21. <div class="ace-head-inner">
  22. <div class="ace-head-container ace-container">
  23. <div class="ace-head-row">
  24. <div id="ace-head-col1" class="ace-head-col text-left">
  25. <span>
  26. <%
  27. String username = (String)session.getAttribute("username");
  28. if (username != null){
  29. out.println("您好,"+username+"&nbsp;<a href='logout.jsp'>退出登陆</a>&nbsp;&nbsp;");
  30. }
  31. else{
  32. out.println("您还未登陆&nbsp;<a href='login.jsp'>点此登陆</a>&nbsp;&nbsp;");
  33. }
  34. %>
  35. </span>
  36. </div>
  37. <nav id="ace-main-nav">
  38. <ul class="clear-list">
  39. <%
  40. if (username != null){
  41. out.println("<li><a href='details.jsp'>个人信息</a></li>");
  42. }
  43. %>
  44. <li><a href="Home.jsp">主页</a></li>
  45. <li><a href="profile.jsp">作者简介</a></li>
  46. <li><a href="hometown.jsp">家乡介绍</a></li>
  47. <li><a href="board.jsp">留言板</a></li>
  48. <li><a href="about.jsp">关于</a></li>
  49. <li><a href="index.jsp">返回欢迎页</a></li>
  50. </ul>
  51. </nav>
  52. </div>
  53. </div>
  54. </div>
  55. <%
  56. String search_message = new String();
  57. try{
  58. search_message = new String(request.getParameter("src").getBytes("ISO8859_1"),"utf-8");
  59. }
  60. catch(Exception e){}
  61. %>
  62. <div class = white_box>
  63. <form action="search.jsp" method="post">
  64. <center>
  65. <input type="text" value=" 留 言 搜 索 " style="font-size:20px;display:inline;"
  66. onfocus="if(this.value == ' 留 言 搜 索 ') this.value =''" name="src">
  67. <input type="submit" value=" 搜 索 " style="font-size:20px;" >
  68. </center>
  69. </form>
  70. </div>
  71. <searchboard:searchboard src="<%=search_message%>" />
  72. <%=content %>
  73. </body>
  74. </html>

4.8.3 我的留言(myboard.jsp/myboard.tag/deleteboard.jsp)

本页面是留言板内容中的我的留言网页,网页通过myborad.tag文件查询用户名为当前登录用户的数据库中的留言内容,并显示在网页上,并且显示删除按钮,点击就可以调取deleteboard.jsp来删除指定的留言内容。

效果示意图:

myboard.jsp

  1. <%@ page language="java" contentType="text/html; charset=utf-8"%>
  2. <%@ taglib tagdir = "/WEB-INF/tags" prefix="myboard" %>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <title>留言板</title>
  7. <style>
  8. @import"home_style.css"
  9. </style>
  10. </head>
  11. <body style="
  12. font-size: 16px;
  13. line-height: 1.4em;
  14. letter-spacing: 0.08em;
  15. padding: 0;
  16. margin: 0;
  17. background: url('./img/bg4.jpg') fixed center center no-repeat;
  18. background-size: cover;
  19. width: 100%;">
  20. <div class="ace-head-inner">
  21. <div class="ace-head-container ace-container">
  22. <div class="ace-head-row">
  23. <div id="ace-head-col1" class="ace-head-col text-left">
  24. <span>
  25. <%
  26. String username = (String)session.getAttribute("username");
  27. if (username != null){
  28. out.println("您好,"+username+"&nbsp;<a href='logout.jsp'>退出登陆</a>&nbsp;&nbsp;");
  29. }
  30. else{
  31. out.println("您还未登陆&nbsp;<a href='login.jsp'>点此登陆</a>&nbsp;&nbsp;");
  32. }
  33. %>
  34. </span>
  35. </div>
  36. <nav id="ace-main-nav">
  37. <ul class="clear-list">
  38. <%
  39. if (username != null){
  40. out.println("<li><a href='details.jsp'>个人信息</a></li>");
  41. }
  42. %>
  43. <li><a href="Home.jsp">主页</a></li>
  44. <li><a href="profile.jsp">作者简介</a></li>
  45. <li><a href="hometown.jsp">家乡介绍</a></li>
  46. <li><a href="board.jsp">留言板</a></li>
  47. <li><a href="about.jsp">关于</a></li>
  48. <li><a href="index.jsp">返回欢迎页</a></li>
  49. </ul>
  50. </nav>
  51. </div>
  52. </div>
  53. </div>
  54. <%
  55. String search_message = new String();
  56. try{
  57. search_message = new String(request.getParameter("src").getBytes("ISO8859_1"),"utf-8");
  58. }
  59. catch(Exception e){}
  60. %>
  61. <myboard:myboard></myboard:myboard>
  62. <%=content%>
  63. </body>
  64. </html>

5、总结

本网站基本满足了所有需要的内容和功能需求。

包含了个人的简介,家乡的介绍,包括个人的信息,留言板等内容。也包含了数据库的增(用户注册,留言板的留言等),删(个人留言支持删除),改(个人信息的修改等),查(留言板的查看,个人信息的查看等)四个功能。数据库的3张表,包括用户登录信息表,用户个人信息表,留言板内容表。

6、参考文献

[1]耿祥义,张跃平.JSP实用教程(第三版),清华大学出版社

[2]刘长生,谢强,丁秋林,Java应用中的乱码问题分析[J] 计算机技术与发展,2006,25(5):77-80.

[3]飞思科技产品研发中心。JSP应用开发详解(第二版)[M].北京:电子工业出版社,2004

[4]萨师煊,王珊。数据库系统概论(第三版)[M].北京:高等教育出版社,2000

[5]张红梅,王磊。在JSP中访问数据库的方法[J].农业图书情报学刊,2006,18(12):142-144

上传的附件 cloud_download 基于JSP实现的个人网站.7z ( 4.74mb, 8次下载 )
error_outline 下载需要12点积分

发送私信

永远别说永远,凡事都有可能

8
文章数
14
评论数
最近文章
eject