基於MySQL的留言回覆功能(SSM框架實現)
阿新 • • 發佈：2019-02-11
使用SSM框架實現留言回覆功能（基於MySQL）
注意：首先使用MySQL資料庫存放留言回覆資訊並不是首選，聽大佬說過使用RabbitMQ訊息元件，但是我沒有學過，暫不清楚。對於我此次寫的留言回覆功能仍有缺陷，大家可以留意一下QQ空間中的留言回覆功能，我這裡並沒有實現那種效果。如果大家有好的方案歡迎聯絡告知我。
<!--more-->
點選我檢視本專案的原始碼：GitHub
首先我們看一下效果圖
建立表結構
留言表（Words）
create table words( #留言id編號lw_id int primary key auto_increment, #留言人的名字 lw_name varchar(100), #留言日期 lw_date varchar(100), #留言內容 lw_content varchar(100), #給誰留言 lw_for_name varchar(100), #在哪篇文章下留言 lw_for_article_id varchar(100) )default charset = utf8;
回覆表（Reply）
create table reply( #回覆id編號 lr_id int primary key auto_increment,#回覆人名字 lr_name varchar(100), #回覆時間 lr_date varchar(100), #回覆內容 lr_content varchar(100), #給誰回覆 lr_for_name varchar(100), #在哪個留言下的回覆 lr_for_words varchar(100), #在哪篇文章下的回覆 lr_for_article_id varchar(100) )default charset = utf8;
以上是我實現留言回覆功能所建的兩張表，建立完表結構，讓我們分析一下怎麼實現留言回覆功能：
功能實現
設計思路
如下圖所示：
上圖中已展示了大概的思路，後端僅僅簡單的查詢和儲存留言回覆的資訊。JSP使用 遍歷後端查詢到List集合資料，使用c:if進行判斷此條資訊是否該放到該篇文章下。詳細程式碼如下：
JSP層
頁面使用的layui進行的美化
<!-- 留言的表單 --> <form class="layui-form" action="<%=basePath%>/article/saveWords.do" method="post" style="width:80%;"> <input name="lw_name" value="${sessionScope.name}" hidden="hidden"/> <input name="lw_date" value="<%=nowDate%>" hidden="hidden"/> <input name="lw_for_article_id" value="${article.r_id}" hidden="hidden"/> <div class="layui-input-block" style="margin-left: 0;"> <textarea id="lw_content" name="lw_content" placeholder="請輸入你的留言" class="layui-textarea" style="height: 150px;"></textarea> </div> <br/> <div class="layui-input-block" style="text-align: left;margin-left: 0;"> <input type="submit" class="layui-btn" value="留言"> </div> </form> <br/> <!-- 留言資訊列表展示 --> <div> <ul> <!-- 先遍歷留言資訊（一條留言資訊，下面的全是回覆資訊） --> <c:forEach items="${requestScope.lw_list}" var="words"> <!-- 如果留言資訊是在本文章下的才顯示 --> <c:if test="${words.lw_for_article_id eq article.r_id}"> <li style="border-top: 1px dotted #01AAED"> <br/> <div style="text-align: left;color:#444"> <div> <span style="color:#01AAED">${words.lw_name}</span> </div> <div>${words.lw_content}</div> </div> <div> <div class="comment-parent" style="text-align:left;margin-top:7px;color:#444"> <span>${words.lw_date}</span> <p> <a href="javascript:;" style="text-decoration: none;" onclick="btnReplyClick(this)">回覆</a> </p> <hr style="margin-top: 7px;"/> </div> <!-- 回覆表單預設隱藏 --> <div class="replycontainer layui-hide" style="margin-left: 61px;"> <form action="<%=basePath%>/article/saveReply.do" method="post" class="layui-form"> <input name="lr_for_article_id" id="lr_for_article_id" value="${article.r_id}" hidden="hidden"/> <input name="lr_name" id="lr_name" value="${sessionScope.name}" hidden="hidden"/> <input name="lr_date" id="lr_date" value="<%=nowDate%>" hidden="hidden"/> <input name="lr_for_name" id="lr_for_name" value="${words.lw_name}" hidden="hidden"/> <input name="lr_for_words" id="lr_for_words" value="${words.lw_id}" hidden="hidden"/> <input name="lr_for_reply" id="lr_for_reply" value="${reply.lr_id}" hidden="hidden"/> <div class="layui-form-item"> <textarea name="lr_content" id="lr_content" lay-verify="replyContent" placeholder="請輸入回覆內容" class="layui-textarea" style="min-height:80px;"></textarea> </div> <div class="layui-form-item"> <button id="replyBtn" class="layui-btn layui-btn-mini" lay-submit="formReply" lay-filter="formReply">提交</button> </div> </form> </div> </div> <!-- 以下是回覆資訊 --> <c:forEach items="${requestScope.lr_list}" var="reply"> <!-- 每次遍歷出來的留言下存在回覆資訊才展示（本條回覆資訊是本條留言下的就顯示在當前留言下） --> <c:if test="${reply.lr_for_article_id eq article.r_id && reply.lr_for_words eq words.lw_id}"> <div style="text-align: left;margin-left:61px;color: #444"> <div> <span style="color:#5FB878">${reply.lr_name} </span> </div> <div>${reply.lr_content}</div> </div> <div> <div class="comment-parent" style="text-align:left;margin-top:7px;margin-left:61px;color:#444"> <span>${reply.lr_date}</span> <p> <a href="javascript:;" style="text-decoration: none;" onclick="btnReplyClick(this)">回覆</a> </p> <hr style="margin-top: 7px;"/> </div> <!-- 回覆表單預設隱藏 --> <div class="replycontainer layui-hide" style="margin-left: 61px;"> <form action="<%=basePath%>/article/saveReply.do" method="post" class="layui-form"> <input name="lr_for_article_id" id="lr_for_article_id" value="${article.r_id}" hidden="hidden"/> <input name="lr_name" id="lr_name" value="${sessionScope.name}" hidden="hidden"/> <input name="lr_date" id="lr_date" value="<%=nowDate%>" hidden="hidden"/> <input name="lr_for_name" id="lr_for_name" value="${words.lw_name}" hidden="hidden"/> <input name="lr_for_words" id="lr_for_words" value="${words.lw_id}" hidden="hidden"/> <input name="lr_for_reply" id="lr_for_reply" value="${reply.lr_id}" hidden="hidden"/> <div class="layui-form-item"> <textarea name="lr_content" id="lr_content" lay-verify="replyContent" placeholder="請輸入回覆內容" class="layui-textarea" style="min-height:80px;"></textarea> </div> <div class="layui-form-item"> <button id="replyBtn" class="layui-btn layui-btn-mini" lay-submit="formReply" lay-filter="formReply">提交</button> </div> </form> </div> </div> </c:if> </c:forEach> </li> </c:if> </c:forEach> </ul> </div>
js程式碼
儲存回覆資訊使用的ajax提交的表單，如上文中介紹，頁面一共存在兩個表單，一個是每篇文章都會顯示的留言框；第二個是當存在留言時會顯示的一個回覆按鈕，點選回覆，就會將隱藏的回覆表單顯示出來（使用Jauery）
</script>
<script type="text/javascript">
function btnReplyClick(elem) {
var $ = layui.jquery;
$(elem).parent('p').parent('.comment-parent').siblings('.replycontainer').toggleClass('layui-hide');
if ($(elem).text() == '回覆') {
$(elem).text('收起')
} else {
$(elem).text('回覆')
}
}
$("#replyBtn").click(function(){
var lr_for_article_id = $("#lr_for_article_id").val();
var lr_name = $("#lr_name").val();
var lr_date = $("#lr_date").val();
var lr_for_name = $("#lr_for_name").val();
var lr_content = $("#lr_content").val();
var lr_for_words = $("#lr_for_words").val();
$.ajax({
url: '<%=basePath%>/article/saveReply.do',
type: 'POST',
data: [{
lr_for_article_id: lr_for_article_id,
lr_name: lr_name,
lr_date: lr_date,
lr_for_name: lr_for_name,
lr_content: lr_content,
lr_for_words: lr_for_words
}],
success: function(data){
layer.open({
title: '提示資訊',
content: '留言成功',
btn: ['確定'],
btn1: function(index){
$("body").html(data);
}
});
},
error: function(){
layer.open({
title: '提示資訊',
content: '出現未知錯誤'
});
}
});
});
</script>Controller層
/** * 儲存留言資訊 */ (value="/saveWords") public String saveWords(Words words){ if(words != null){ String r_id = words.getLw_for_article_id(); articleService.saveWords(words); return "redirect:toArticleView.do?r_id="+r_id; }else{ return null; } } /** * 儲存回覆資訊 */ (value=