kindeditor实现简单留言板

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

步骤：

第一步：建立web工程messageApp

第二步：建立数据库

一张表message，简单点就四个字段mid（编号）,author（作者）、posttime（发布时间）、message（内容）

第三步：连接数据库

连接数据库的方法有很多种，这里重新温习一下原生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&¶ms.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&¶ms.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> <% } %>

第六步：引用编辑器插件

把下载的插件解压后拷贝到项目中

引入对应js和css

<link rel="stylesheet" href="kindeditor/themes/default/default.css" /> <link rel="stylesheet" href="kindeditor/plugins/code/prettify.css" /> <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>

引入对应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"); } %>

第七步：测试

第八步：搞定