基於MySQL的留言回覆功能
使用SSM框架實現留言回覆功能（基於MySQL） 以前一直糾結這個留言回覆功能怎麼寫，在網上也沒有找到一個明確的案例，這裏我簡單介紹一下我寫的基於MySQL的留言回覆功能。javascript
注意：首先使用MySQL數據庫存放留言回覆信息並非首選，聽大佬說過使用RabbitMQ消息組件，可是我沒有學過，暫不清楚。 對於我這次寫的留言回覆功能仍有缺陷，你們能夠留意一下QQ空間中的留言回覆功能，我這裏並無實現那種效果。若是你們有好的方案歡迎聯繫告知我。html
<!--more-->java
本項目源碼：GitHubjquery
首先咱們看一下效果圖 
git
建立表結構
留言表（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;
以上是我實現留言回覆功能所建的兩張表，建立完表結構，讓咱們分析一下怎麼實現留言回覆功能：github
功能實現
設計思路
以下圖所示：ajax
上圖中已展現了大概的思路，後端僅僅簡單的查詢和保存留言回覆的信息。JSP使用<c:foreach>遍歷後端查詢到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提交的表單，如上文中介紹，頁面一共存在兩個表單，一個是每篇文章都會顯示的留言框；第二個是當存在留言時會顯示的一個回覆按鈕， 點擊回覆，就會將隱藏的回覆表單顯示出來（使用JQuery）session
<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層
/**
* 保存留言信息
*/
@RequestMapping(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;
}
}
/**
* 保存回覆信息
*/
@RequestMapping(value="/saveReply")
public String saveReply(Reply reply){
if(reply != null){
articleService.saveReply(reply);
String r_id = reply.getLr_for_article_id();
return "redirect:toArticleView.do?r_id="+r_id;
}else{
return null;
}
}
/**
* 跳轉到查看文章內容頁面
*/
//聲明用於存放留言回覆信息的List集合
private List<Words> lw_list;
private List<Reply> lr_list;
@RequestMapping(value="/toArticleView")
public String toArticleView(@RequestParam int r_id, Model model){
//封裝留言信息
lw_list = articleService.findByWords();
model.addAttribute("lw_list",lw_list);
//封裝回覆信息
lr_list = articleService.findByReply();
model.addAttribute("lr_list",lr_list);
//查詢文章信息
Article article = articleService.findById(r_id);
System.out.println("查詢到當前文章的ID值："+article.getR_id());
if (article != null) {
model.addAttribute("article", article);
return "view/article/articleView";
} else {
return null;
}
}
綜上
主要的代碼如上文所寫，並不複雜，可是沒有實現相似QQ空間的那種回覆效果，緣由就是jsp使用的EL表達式進行遍歷後端儲存在域對象中的List集合對象，而這種遍歷是依次遍歷的，後遍歷出來的回覆信息須要和以前已經遍歷出來的留言信息進行比較判斷，若是此回覆是屬於該留言的才顯示，就是由於順序遍歷，以前遍歷的數據又該怎麼在後面取得呢？若是你們有更好的方案，歡迎聯繫我。
<hr/>
交流
若是你們有興趣，歡迎你們加入個人Java交流羣：671017003 ，一塊兒交流學習Java技術。博主目前一直在自學JAVA中，技術有限，若是能夠，會盡力給你們提供一些幫助，或是一些學習方法，固然羣裏的大佬都會積極給新手答疑的。因此，別猶豫，快來加入咱們吧！
<br/>
聯繫
If you have some questions after you see this article, you can contact me or you can find some info by clicking these links.
- [Blog@TyCoding's blog](http://www.tycoding.cn)
- [GitHub@TyCoding](https://github.com/TyCoding)
- [ZhiHu@TyCoding](https://www.zhihu.com/people/tomo-83-82/activities)
<br/>
相關文章
- 1. 基於MySQL的留言回覆功能
- 2. JSP+SQL實現留言功能（含留言回覆功能），附源碼
- 3. 基於SSM框架的文章管理系統（增加留言回覆功能）
- 4. 基於SSM框架的文章管理系統（增長留言回覆功能）
- 5. 基於mvc的留言板
- 6. 簡易留言板功能
- 7. 簡單的留言功能實現
- 8. 你真的會寫留言功能嗎？
- 9. 微信公衆號的留言功能
- 10. MySQL的複製功能
- 更多相關文章...
- • MySQL 5.7的新特性（新功能） - MySQL教程
- • R 語言基礎 - R 語言教程
- • ☆基於Java Instrument的Agent實現
- • 漫談MySQL的鎖機制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 基於MySQL的留言回覆功能
- 2. JSP+SQL實現留言功能（含留言回覆功能），附源碼
- 3. 基於SSM框架的文章管理系統（增加留言回覆功能）
- 4. 基於SSM框架的文章管理系統（增長留言回覆功能）
- 5. 基於mvc的留言板
- 6. 簡易留言板功能
- 7. 簡單的留言功能實現
- 8. 你真的會寫留言功能嗎？
- 9. 微信公衆號的留言功能
- 10. MySQL的複製功能