博客系统开发推送第六季----留言板模块

桃扇骨 2022-06-15 07:46 213阅读 0赞

今天中午趁着精神，写了一个小时的程序，做了留言板模块的功能，加上前面所做的部分，现在已经大体完成了整个系统的功能。

# 本次模块部分核心源码：

writeMessage.jsp

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>编写留言</title>
  8. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  9.     <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
  10.     <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
  11.     <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
  12.     <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
  13.     <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
  15.     <style type="text/css">
  16.         div{
  17.             width:100%;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22. <center>
  23.    <div class="content">
  24.    <h1>发表留言</h1>
  25.    <hr/>
  26.    <form action="${pageContext.request.contextPath}/addMessage" method="post">
  27.                       请输入你的名字：    <input type="text" name="user_name"/><br/><br/>
  28.                       请输入你的留言标题：<input type="text" name="message_title"/><br/>
  29.       <p style="font-size: 18px;">请输入你的留言信息：<p>
  30.       <script id="editor" type="text/plain" style="width:600px;height:300px;"></script><br/>
  31.      <input type="submit" value="提交信息" class="sub" />
  32.    </form>
  33. </div>
  35. <div id="btns">
  36.   <!-- 
  37.     <div>
  38.         <button οnclick="getAllHtml()">获得整个html的内容</button>
  39.         <button οnclick="getContent()">获得内容</button>
  40.         <button οnclick="setContent()">写入内容</button>
  41.         <button οnclick="setContent(true)">追加内容</button>
  42.         <button οnclick="getContentTxt()">获得纯文本</button>
  43.         <button οnclick="getPlainTxt()">获得带格式的纯文本</button>
  44.         <button οnclick="hasContent()">判断是否有内容</button>
  45.         <button οnclick="setFocus()">使编辑器获得焦点</button>
  46.         <button οnmοusedοwn="isFocus(event)">编辑器是否获得焦点</button>
  47.         <button οnmοusedοwn="setblur(event)" >编辑器失去焦点</button>
  48.     </div>
  49.     -->
  50.     <!--  
  51.     <div>
  52.         <button οnclick="getText()">获得当前选中的文本</button>
  53.         <button οnclick="insertHtml()">插入给定的内容</button>
  54.         <button id="enable" οnclick="setEnabled()">可以编辑</button>
  55.         <button οnclick="setDisabled()">不可编辑</button>
  56.         <button οnclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>
  57.         <button οnclick=" UE.getEditor('editor').setShow()">显示编辑器</button>
  58.         <button οnclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>
  59.     </div>
  62.     <div>
  63.         <button οnclick="getLocalData()" >获取草稿箱内容</button>
  64.         <button οnclick="clearLocalData()" >清空草稿箱</button>
  65.     </div>
  66.   -->
  67. </div>
  68. <!--  
  69. <div>
  70.     <button οnclick="createEditor()">
  71.     创建编辑器</button>
  72.     <button οnclick="deleteEditor()">
  73.     删除编辑器</button>
  74. </div>
  75.  -->
  76. <script type="text/javascript">
  78.     //实例化编辑器
  79.     //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
  80.     var ue = UE.getEditor('editor');
  83.     function isFocus(e){
  84.         alert(UE.getEditor('editor').isFocus());
  85.         UE.dom.domUtils.preventDefault(e)
  86.     }
  87.     function setblur(e){
  88.         UE.getEditor('editor').blur();
  89.         UE.dom.domUtils.preventDefault(e)
  90.     }
  91.     function insertHtml() {
  92.         var value = prompt('插入html代码', '');
  93.         UE.getEditor('editor').execCommand('insertHtml', value)
  94.     }
  95.     function createEditor() {
  96.         enableBtn();
  97.         UE.getEditor('editor');
  98.     }
  99.     function getAllHtml() {
  100.         alert(UE.getEditor('editor').getAllHtml())
  101.     }
  102.     function getContent() {
  103.         var arr = [];
  104.         arr.push("使用editor.getContent()方法可以获得编辑器的内容");
  105.         arr.push("内容为：");
  106.         arr.push(UE.getEditor('editor').getContent());
  107.         alert(arr.join("\n"));
  108.     }
  109.     function getPlainTxt() {
  110.         var arr = [];
  111.         arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
  112.         arr.push("内容为：");
  113.         arr.push(UE.getEditor('editor').getPlainTxt());
  114.         alert(arr.join('\n'))
  115.     }
  116.     function setContent(isAppendTo) {
  117.         var arr = [];
  118.         arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
  119.         UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
  120.         alert(arr.join("\n"));
  121.     }
  122.     function setDisabled() {
  123.         UE.getEditor('editor').setDisabled('fullscreen');
  124.         disableBtn("enable");
  125.     }
  127.     function setEnabled() {
  128.         UE.getEditor('editor').setEnabled();
  129.         enableBtn();
  130.     }
  132.     function getText() {
  133.         //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
  134.         var range = UE.getEditor('editor').selection.getRange();
  135.         range.select();
  136.         var txt = UE.getEditor('editor').selection.getText();
  137.         alert(txt)
  138.     }
  140.     function getContentTxt() {
  141.         var arr = [];
  142.         arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
  143.         arr.push("编辑器的纯文本内容为：");
  144.         arr.push(UE.getEditor('editor').getContentTxt());
  145.         alert(arr.join("\n"));
  146.     }
  147.     function hasContent() {
  148.         var arr = [];
  149.         arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
  150.         arr.push("判断结果为：");
  151.         arr.push(UE.getEditor('editor').hasContents());
  152.         alert(arr.join("\n"));
  153.     }
  154.     function setFocus() {
  155.         UE.getEditor('editor').focus();
  156.     }
  157.     function deleteEditor() {
  158.         disableBtn();
  159.         UE.getEditor('editor').destroy();
  160.     }
  161.     function disableBtn(str) {
  162.         var div = document.getElementById('btns');
  163.         var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
  164.         for (var i = 0, btn; btn = btns[i++];) {
  165.             if (btn.id == str) {
  166.                 UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
  167.             } else {
  168.                 btn.setAttribute("disabled", "true");
  169.             }
  170.         }
  171.     }
  172.     function enableBtn() {
  173.         var div = document.getElementById('btns');
  174.         var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
  175.         for (var i = 0, btn; btn = btns[i++];) {
  176.             UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
  177.         }
  178.     }
  180.     function getLocalData () {
  181.         alert(UE.getEditor('editor').execCommand( "getlocaldata" ));
  182.     }
  184.     function clearLocalData () {
  185.         UE.getEditor('editor').execCommand( "clearlocaldata" );
  186.         alert("已清空草稿箱")
  187.     }
  188. </script>
  189. </center>
  190. </body>
  191. </html>

MessageDaoImpl.java 

  1. package dao;
  3. import java.sql.ResultSet;
  4. import java.sql.SQLException;
  5. import java.util.ArrayList;
  6. import java.util.List;
  8. import com.mysql.jdbc.Connection;
  9. import com.mysql.jdbc.PreparedStatement;
  11. import DBConnect.DButil;
  12. import bean.Article;
  13. import bean.Message;
  15. public class MessageDaoImpl implements MessageDao {
  17.     @Override
  18.     public List<Message> findAllMessage() {
  19.         // TODO Auto-generated method stub
  20.         String sql="select * from message";
  21.         Connection conn=DButil.open(); 
  22.         List<Message> list = new ArrayList<Message>();
  23.         try {  
  24.             PreparedStatement pstmt=(PreparedStatement) conn.prepareStatement(sql);  
  25.             ResultSet rs=pstmt.executeQuery(sql);//执行查询该表  
  26.             while(rs.next())  
  27.             {  
  28.                 int message_id = rs.getInt(1);
  29.                 String user_name = rs.getString(2);
  30.                 String message_date = rs.getString(3);
  31.                 String message_title = rs.getString(4);
  32.                 String message_content = rs.getString(5);
  33.                 Message message = new Message();
  34.                 message.setMessage_id(message_id);
  35.                 message.setUser_name(user_name);
  36.                 message.setMessage_date(message_date);
  37.                 message.setMessage_title(message_title);
  38.                 message.setMessage_content(message_content);
  39.                 list.add(message);
  40.                 System.out.println("查询数据成功！");
  41.             }  
  42.         } catch (SQLException e) {  
  43.             // TODO Auto-generated catch block  
  44.             e.printStackTrace(); 
  45.             System.out.println("查询数据失败！");
  46.         }  
  47.         finally {  
  48.             DButil.close(conn);  
  49.         }  
  50.         return list;
  51.     }
  53.     @Override
  54.     public void insert(Message message) {
  55.         // TODO Auto-generated method stub
  56.         String sql = "insert into message(user_name,message_date,message_title,message_content) values(?,?,?,?)";
  57.         Connection conn=DButil.open(); 
  58.         try {
  59.               PreparedStatement pstmt=(PreparedStatement) conn.prepareStatement(sql);  
  60.               pstmt.setString(1, message.getUser_name());
  61.               pstmt.setString(2, message.getMessage_date());
  62.               pstmt.setString(3, message.getMessage_title());
  63.               pstmt.setString(4, message.getMessage_content());
  64.               pstmt.executeUpdate();
  65.               System.out.println("添加数据成功！");
  66.         } catch (SQLException e) {
  67.             // TODO: handle exception
  68.             System.out.println("添加数据失败！");
  69.             e.printStackTrace();  
  70.         }
  71.          finally {  
  72.                 DButil.close(conn);  
  73.            }  
  74.     }
  76. }

addMessage.java 

  1. package servlet;
  3. import java.io.IOException;
  5. import javax.servlet.RequestDispatcher;
  6. import javax.servlet.ServletException;
  7. import javax.servlet.annotation.WebServlet;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  12. import bean.Message;
  13. import content.Split;
  14. import dao.MessageDao;
  15. import dao.MessageDaoImpl;
  17. @WebServlet("/addMessage")
  18. public class addMessage extends HttpServlet {
  19.     private static final long serialVersionUID = 1L;
  21.     public addMessage() {
  22.         super();
  23.         // TODO Auto-generated constructor stub
  24.     }
  26.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  27.         // TODO Auto-generated method stub
  28.         doPost(request, response);  
  29.     }
  31.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  32.         // TODO Auto-generated method stub
  33.         //设置编码  
  34.         request.setCharacterEncoding("utf-8");  
  35.         response.setCharacterEncoding("utf-8");  
  36.         response.setHeader("Content-Type","text/html; charset=utf-8");  
  38.         String user_name = request.getParameter("user_name");
  39.         Split split = new Split();
  40.         String message_date = split.time();
  41.         String message_title = request.getParameter("message_title");
  42.         String message_content = request.getParameter("editorValue");
  44.         MessageDao dao = new MessageDaoImpl();
  45.         Message message = new Message();
  46.         message.setUser_name(user_name);
  47.         message.setMessage_date(message_date);
  48.         message.setMessage_title(message_title);
  49.         message.setMessage_content(message_content);
  51.         try {
  52.             dao.insert(message);
  53.             System.out.println("留言成功！");
  54.             response.sendRedirect("/UseTest/ueditor/ShowMessage.jsp");
  55. //            RequestDispatcher view = request.getRequestDispatcher("ShowMessage.jsp");
  56. //            view.forward(request, response);
  57.         } catch (Exception e) {
  58.             // TODO Auto-generated catch block
  59.             System.out.println("留言失败！");
  60.             e.printStackTrace();
  61.         }
  62.     }
  64. }

showMessage.jsp

  1. <%@page import="bean.Message"%>
  2. <%@page import="java.util.List"%>
  3. <%@page import="dao.MessageDaoImpl"%>
  4. <%@page import="dao.MessageDao"%>
  5. <%@ page language="java" contentType="text/html; charset=UTF-8"
  6.     pageEncoding="UTF-8"%>
  7. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  8. <html>
  9. <head>
  10. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  11. <title>显示所有留言信息</title>
  12. </head>
  13. <body>
  14. <center>
  15.   <h1>所有留言信息</h1>
  16.   <hr/>
  17.   <table border="1" width="700px">
  18.       <tr>
  19.         <td>留言人姓名</td><td>留言时间</td><td>留言标题</td><td>留言内容</td>
  20.       </tr>
  21.       <%
  22.           MessageDao dao = new MessageDaoImpl();
  23.           List<Message> list = dao.findAllMessage();
  24.           for(int i=0; i<list.size();i++){
  25.              Message message = list.get(i);
  26.       %>
  27.         <tr>
  28.            <td><%=message.getUser_name() %></td>
  29.            <td><%=message.getMessage_date()%></td>
  30.            <td><%=message.getMessage_title() %></td>
  31.            <td><%=message.getMessage_content() %></td>
  32.         </tr>
  33.       <%} %>
  34.   </table>
  35.  <br/><br/>
  36.    <a href="writeMessage.jsp">我要留言</a>
  37. </center>
  38. </body>
  39. </html>

部分功能截图：

Center

Center 1

总结：

此系统是本人在学完SSH，SSM等中间件框架后，意识到Java基础的重要性，回过头来用最基础的Servlet+JSP+JavaBean完成的系统，通过本次实验纠正了很多之前在开发过程中出现的错误，也学会了很多开发的细节，不自己动手一遍，也只能是似懂非懂。至于系统的登录注册等业务逻辑，没有太多时间，就不实现了。

发表评论

表情：
评论列表 （有 0 条评论，213人围观）

还没有评论，来说两句吧...

相关阅读

    相关 留言板

    HN-CJ高二 QQ：347605798 网名：xzy、xzyxzy、lalaxu、饕餮传奇，曾在情人节那天改名成`睡觉` 不喜欢二次元，喜欢Taylor Swift

    深碍√TFBOYSˉ_深碍√TFBOYSˉ_/ 0 赞/ 590 阅读