kindeditor学习笔记之实现简单留言板

刺骨的言语ヽ痛彻心扉 2022-06-16 03:24 160阅读 0赞

# kindeditor实现简单留言板 #

没事干，研究点新玩意，今天就用kindeditor试试手，第一次接触。  
官网：[kindeditor官方网站][kindeditor]，把插件下载到本地。当然谷歌的网站国内访问很是费劲，你也可以到这里下载[我的kindeditor资源下载链接][kindeditor 1]。

# 步骤：       #

## 第一步：建立web工程`messageApp` ##

## 第二步：建立数据库       ##

#### 一张表message，简单点就四个字段mid（编号）,author（作者）、posttime（发布时间）、message（内容）      ![这里写图片描述][SouthEast]       ####

## 第三步：连接数据库    ##

##### **连接数据库的方法有很多种，这里重新温习一下原生jdbc**       #####

##### 写个工具类（BaseDao.java）对jdbc进行简单的封装 #####

package com.hl.message.dao;
    
    import java.sql.Connection;
    import java.sql.DriverManager;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    
    /** * 操作数据库的底层类 * * @author 浪丶荡 * */
    public class BaseDao { 
    
        /** * 连接数据库的核心 */
        // 1、驱动信息
        private static final String DRIVER = "com.mysql.jdbc.Driver";
        // 2、URL
        private static final String URL = "jdbc:mysql://localhost:3306/message?userUnicode=ture&characterEncoding=utf8";
        // 3、用户名
        private static final String USERNAME = "root";
        // 4、密码
        private static final String PASSWORD = "123456";
    
        private static Connection connection = null;
        //操作sql的对象
        private static PreparedStatement preparedStatement = null;
        //结果集
        public static ResultSet resultSet = null;
        /** * 获取连接 * @return * @throws SQLException * @throws ClassNotFoundException */
        public static Connection getConnection() throws SQLException, ClassNotFoundException{
            Class.forName(DRIVER);
            return DriverManager.getConnection(URL, USERNAME, PASSWORD);
        }
        /** * 公共查询方法 * @param sql * @param params * @return * @throws SQLException * @throws ClassNotFoundException */
        public static ResultSet getQuery(String sql,String[] params) throws SQLException, ClassNotFoundException{
            connection = getConnection();
            preparedStatement = connection.prepareStatement(sql);
            if(params!=null&&params.length>0){
                for (int i = 0; i < params.length; i++) {
                    preparedStatement.setString(i+1,params[i]);
                }
            }
            //执行查询
            resultSet = preparedStatement.executeQuery();
            return resultSet;
        }
        /** * 底层变化方法（增删改） * @param sql * @param params * @return * @throws Exception */
        public static int update(String sql,String[] params) throws ClassNotFoundException, Exception{
            int result = 0;
            connection = getConnection();
            preparedStatement = connection.prepareStatement(sql);
            if(params!=null&&params.length>0){
                for (int i = 0; i < params.length; i++) {
                    preparedStatement.setString(i+1,params[i]);
                }
            }
            result = preparedStatement.executeUpdate();
            return result;
    
        }
        /** * 按顺序关闭资源 * @throws Exception */
        public static void closeAll() throws Exception {
            if(resultSet!=null){
                resultSet.close();
            }
            if(preparedStatement!=null){
                preparedStatement.close();
            }
            if(connection!=null){
                connection.close();
            }
        }
    }

## 第四步：编写Java底层业务代码       ##

##### **构建一个Message实体** #####

package com.hl.message.beans;
    
    import java.util.Date;
    
    /** * 留言实体 * @author 浪丶荡 * */
    public class Message { 
        //留言编号
        private Integer mid;
        //留言者
        private String author;
        //留言时间
        private Date postTime;
        //留言内容
        private String message;
    
        public Integer getMid() {
            return mid;
        }
        public void setMid(Integer mid) {
            this.mid = mid;
        }
        public String getAuthor() {
            return author;
        }
        public void setAuthor(String author) {
            this.author = author;
        }
        public Date getPostTime() {
            return postTime;
        }
        public void setPostTime(Date postTime) {
            this.postTime = postTime;
        }
        public String getMessage() {
            return message;
        }
        public void setMessage(String message) {
            this.message = message;
        }
        public Message() {
            super();
            // TODO Auto-generated constructor stub
        }
        public Message(String author, Date postTime, String message) {
            super();
            this.author = author;
            this.postTime = postTime;
            this.message = message;
        }
        @Override
        public String toString() {
            return "Message [mid=" + mid + ", author=" + author + ", postTime="
                    + postTime + ", message=" + message + "]";
        }
    
    
    }

##### **处理Message业务类接口** #####

package com.hl.message.dao;
    
    import java.util.List;
    
    import com.hl.message.beans.Message;
    
    /** * 业务Dao * 定义Message的操作规范 * @author 浪丶荡 * */
    public interface MessageDao { 
    
        /** * 获取所有留言 * @return List */
        public  List<Message> getAllMessages();
        /** * 根据编号查找留言 * @param mid * @return */
        //public Message getMessageByID(String mid);
        /** * 添加留言 * @param message * @return */
        public int addMessage(Message message)throws Exception;
    }

##### **处理Message业务类接口的实现类** #####

package com.hl.message.dao.impl;
    
    import java.text.SimpleDateFormat;
    import java.util.ArrayList;
    import java.util.List;
    
    import com.hl.message.beans.Message;
    import com.hl.message.dao.BaseDao;
    import com.hl.message.dao.MessageDao;
    
    /** * 实现类 * * @author 浪丶荡 * */
    public class MessageDaoImpl extends BaseDao implements MessageDao { 
    
        @Override
        public List<Message> getAllMessages() {
            List<Message> list = new ArrayList<Message>();
            String sql = "select * from message";
            try {
                resultSet = this.getQuery(sql, null);
                while (resultSet.next()) {
                    Message message = new Message();
                    message.setMid(resultSet.getInt("mid"));
                    message.setAuthor(resultSet.getString("author"));
                    message.setPostTime(resultSet.getDate("postTime"));
                    message.setMessage(resultSet.getString("message"));
                    list.add(message);
                }
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                try {
                    closeAll();
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
            return list;
        }
    
        @Override
        public int addMessage(Message message) throws Exception {
            String slq = "insert into message (author,postTime,message) values(?,?,?)";
            //转换日期格式
            SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            String date = simpleDateFormat.format(message.getPostTime());
            System.out.println(message.getPostTime());
    
            return this.update(slq, new String[]{message.getAuthor(),date,message.getMessage()});
        }
    
    }

## 第五部：连接前后台处理数据       ##

##### **为了简单起见，数据处理都放在jsp中**       #####

##### index.jsp中获取数据库数据代码片段 #####

<h2 align="center">留言板</h2>
        <% MessageDao messageDao = new MessageDaoImpl(); List<Message> list = messageDao.getAllMessages(); for(Message m : list){ %>
        <table align="center" border="1" bordercolor="#CCCCFF" width="1150">
            <tr bgcolor="#CCCC99">
                <td><font color="white">作者：<%=m.getAuthor() %>   发表时间：<%=m.getPostTime() %></font></td>
            </tr>
            <tr bgcolor="#FFFFCC">
                <td>内容：<%=m.getMessage() %></td>
            </tr>
        </table>
        <p></p>
        <% } %>

## 第六步：引用编辑器插件       ##

##### **把下载的插件解压后拷贝到项目中**      ![这里写图片描述][SouthEast 1]       #####

##### **引入对应js和css** #####

##### **引入对应js和css时路径一定要保证正确**       #####

##### 完整index.jsp代码 #####

<%@ page language="java" import="java.util.*" import="com.hl.message.dao.impl.*" import="com.hl.message.dao.*" import="com.hl.message.beans.*" pageEncoding="UTF-8"%>
    <% String path = request.getContextPath(); String htmlData = request.getParameter("message")!=null ? request.getParameter("message") : ""; String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
        <title>留言板</title>
        <link rel="stylesheet" href="kindeditor/themes/default/default.css" />
        <link rel="stylesheet" href="kindeditor/plugins/code/prettify.css" />
        <style type="text/css"> table{ border-collapse: collapse; border-spacing: 0; padd:expression(this.cellpadding=0); } </style>
        <script charset="utf-8" src="kindeditor/kindeditor.js"></script>
        <script charset="utf-8" src="kindeditor/lang/zh_CN.js"></script>
        <script charset="utf-8" src="kindeditor/plugins/code/prettify.js"></script>
        <script> KindEditor.ready(function(K) { var editor1 = K.create('textarea[name="message"]', { cssPath : 'kindeditor/plugins/code/prettify.css', uploadJson : 'kindeditor/jsp/upload_json.jsp', fileManagerJson : 'kindeditor/jsp/file_manager_json.jsp', allowFileManager : true, afterCreate : function() { var self = this; K.ctrl(document, 13, function() { self.sync(); document.forms['example'].submit(); }); K.ctrl(self.edit.doc, 13, function() { self.sync(); document.forms['example'].submit(); }); } }); prettyPrint(); }); </script>
    </head>
    <body>
        
        <h2 align="center">留言板</h2>
        <% MessageDao messageDao = new MessageDaoImpl(); List<Message> list = messageDao.getAllMessages(); for(Message m : list){ %>
        <table align="center" border="1" bordercolor="#CCCCFF" width="1150">
            <tr bgcolor="#CCCC99">
                <td><font color="white">作者：<%=m.getAuthor() %>   发表时间：<%=m.getPostTime() %></font></td>
            </tr>
            <tr bgcolor="#FFFFCC">
                <td>内容：<%=m.getMessage() %></td>
            </tr>
        </table>
        <p></p>
        <% } %>
    
        <%=htmlData%>
        
        <form action="<%=path %>/add.jsp" method="post">
            <table align="center" width="100%">
                <tr>
                    <td>作者：</td>
                    <td><input type="text" name="author"/></td>
                </tr>
                <tr>
                    <td>留言：</td>
                    <td>
                        <textarea id="test" name="message" rows="8" cols="100" style="width: 700px;height: 200px;visibility: hidden;"><%=htmlspecialchars(htmlData)%></textarea>
                    </td>
                </tr>
                <tr>
                    <td><input type="submit" value="提交"/></td>
                    <td><input type="reset" value="重置"/></td>
                </tr>
            </table>
        </form>
    </body>
    </html>
    
    <%! private String htmlspecialchars(String str) { str = str.replaceAll("&", "&"); str = str.replaceAll("<", "<"); str = str.replaceAll(">", ">"); str = str.replaceAll("\"", """); return str; } %>

#####    处理数据的add.jsp完整代码 #####

<%@ page language="java" import="java.util.*" import="com.hl.message.beans.*" import="com.hl.message.dao.*" import="com.hl.message.dao.impl.*" pageEncoding="utf-8"%>
    <% String author = new String(request.getParameter("author").getBytes("iso-8859-1"),"utf-8"); String message = new String(request.getParameter("message").getBytes("iso-8859-1"),"utf-8"); Message m = new Message(); m.setAuthor(author); m.setMessage(message); m.setPostTime(new Date()); MessageDao messageDao = new MessageDaoImpl(); int result = messageDao.addMessage(m); if(result>0){ response.sendRedirect("index.jsp"); }else{ response.sendRedirect("error.jsp"); } %>

## 第七步：测试   ![这里写图片描述][SouthEast 2]       ##

## 第八步：搞定 ##

[kindeditor]: http://kindeditor.net/demo.php
[kindeditor 1]: http://download.csdn.net/detail/leisure_life/9832937
[SouthEast]: /images/20220616/2d967f94eca8499abe67b80b509021ff.png
[SouthEast 1]: /images/20220616/8ed9e766a20c4a8face3010e2ef7846a.png
[SouthEast 2]: /images/20220616/09c96b0d9c954c8f801dae36e9608c13.png