生活随笔
收集整理的這篇文章主要介紹了
前端如何实现：在不刷新页面的情况下实时看到自己的评论
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
功能描述
1、類似CSDN論壇 右上角的消息通知 如果有新消息 整個頁面不刷新 右上角的消息數字即時+1
2、類似于論壇評論區 ，發布評論之后，不刷新頁面就可以立刻看到自己的評論
(2020-5-3更新)最終解決方案：使用Vue綁定評論區數據，v-for生成ul li標簽，提交評論后，用axios（ajax）同步數據，就能實現只刷新評論區。
新浪微博的評論區實現方式
觀察了一下新浪微博的評論區實現，從下面的圖可以看出，因為時間固定顯示為10秒前，因此可以推斷：
點擊“評論”之后，評論框的 div 只是在本地 append 的，而不是去刷新整個評論區（除非你去手動刷新整個頁面）。可以參考這個思路
web 頁面的解決方案
網上提供的 n 多種實現方式，可以參考一下思路：
1）通過ajax定時提交刷新，不知道你是全部刷新還是通過ajax的方式提交刷新，理論上如果通和AJAX刷新的話應是可以的。
2）使用html5的websocket功能。
3）思路：在獲取頁面的時候，分配session然后去做定閱通知，編輯完了之后發消息給定閱的頻道，再更新
4）用 jira
5) 這個地方基本上都是采用的輪訓吧，只有一些實時性非常高的才會選擇使用WebSocket 另外還有一種采用消息中間件的方式
6）signalr 應該是可以的
winform 的解決方案
winform就比較好實現了，用委托或者訂閱吧
附：（障眼法）本地追加div的思路及示例
效果：點擊“寫評論”后，下方追加一個富文本編輯框（使用WangEditor）div。
目前點擊保存按鈕后的的刷新方式是使用window.location.reload();刷新整個頁面，此時瀏覽器拖動條還會默認保持在原來的位置，所以用戶體驗還好。
若想要實現在本地追加新評論div，可以參照下方 js 代碼的 CommentNode(...) 函數。
HTML
引入 CSS JS
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/static/js/easyui/themes/icon.css">
<script src="/static/js/jquery-2.1.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/js/echarts-4.2.1.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="/static/css/editorStyle.css"><script type="text/javascript" src="/static/js/jquery.form.min.js"></script>
<script type="text/javascript" src="/static/js/wangEditor.min.js"></script>
<script src="/static/js/paramconvert.js" charset="UTF-8"></script>
<script src="/static/js/editorUtils.js" charset="UTF-8"></script>
Body 核心代碼
<h4 style="display: inline">簡評
</h4>
<button type="button"style="position:absolute;right: 68px"onclick="javascript:appendHtml('others-comment-area',new WangEditorNode('{{p_code}}', 'others','{{ query_date }}'))"class="btn btn-primary btn-sm">寫評論
</button>
<ul id="others-comment-area" class="list-group" style="padding-top: 10px">{% for node in others_list %}
<li class="list-group-item"><div class="username" style="display: inline">用戶：{{ node.user }}
</div><p>{{ node.update_time }}
</p><div class="btn-group btn-group-sm" role="group"><button type="button" onclick="javascript:appendHtml('others-comment-area',new WangEditorModifyNode('{{ p_code }}','others','{{ node.rich_text }}',{{ node.id }}))"class="btn btn-warning">修改
</button><button type="button" onclick="javascript:deleteEditor({{ node.id }})"class="btn btn-danger">刪除
</button></div>{{ node.rich_text |safe }}
</li>{% endfor %}
</ul>
editorUtils.js
手動拼接 HTML，感覺回到了 Servlet 時代
多虧 PyCharm 在粘貼的時候會自動轉義符號，不然自己拼左斜線和雙引號肯定被繞暈…
function appendHtml(div_id
, node
) {delAllEditorNode();$('#' + div_id
).append(node
.getNodeHtml());var E = window
.wangEditor
;var editor
= new E('#div1', '#div2');editor
.customConfig
.uploadImgShowBase64
= true; var $textplace
= $('#textplace');editor
.customConfig
.onchange = function (html
) {$textplace
.val(html
)};editor
.create();$textplace
.val(editor
.txt
.html());$(document
).ready(function () {$('#editor_form').ajaxForm(function (message
) {var messageJson
= JSON.parse(message
);if (messageJson
.status
== '0') {alert("保存成功！");window
.location
.reload();} else {alert("保存失敗，請聯系管理員！" + message
);}});});
}function CommentNode(user
, update_time
, rich_text
, id
) {this.user
= user
;this.update_time
= update_time
;this.rich_text
= rich_text
;this.id
= id
;this.nodeHtml
= "";this.getNodeHtml = function () {this.nodeHtml
+= "<li class=\"list-group-item\">";this.nodeHtml
+= "<div class=\"username\" style=\"display: inline\">用戶：";this.nodeHtml
+= user
;this.nodeHtml
+= "</div>";this.nodeHtml
+= "<p>";this.nodeHtml
+= update_time
;this.nodeHtml
+= "</p>";this.nodeHtml
+= "<div class=\"btn-group btn-group-sm\" role=\"group\">";this.nodeHtml
+= "<button type=\"button\" οnclick=\"javascript:modifyEditor(";this.nodeHtml
+= id
;this.nodeHtml
+= ")\" class=\"btn btn-warning\">修改</button>";this.nodeHtml
+= "<button type=\"button\" οnclick=\"javascript:deleteEditor(";this.nodeHtml
+= ")\" class=\"btn btn-danger\">刪除</button>";this.nodeHtml
+= "</div>";this.nodeHtml
+= rich_text
;this.nodeHtml
+= "</li>";return this.nodeHtml
;}
}function WangEditorNode(p_code
, attribute
, query_date
) {this.nodeHtml
="";this.getNodeHtml = function () {this.nodeHtml
+= "<div class=\"editor-node\">";this.nodeHtml
+= "<div id=\"div1\" class=\"toolbar\"></div>";this.nodeHtml
+= "<div id=\"div2\" class=\"text\"></div>";this.nodeHtml
+= "<form id=\"editor_form\" action=\"/api/editor\" method=\"post\">";this.nodeHtml
+= "<textarea id=\"textplace\" name=\"textplace\" style=\"display: none\"></textarea>";this.nodeHtml
+= "<input type=\"hidden\" name=\"p_code\" value=\"";this.nodeHtml
+= p_code
;this.nodeHtml
+= "\"/>";this.nodeHtml
+= "<input type=\"hidden\" name=\"attribute\" value=\"";this.nodeHtml
+= attribute
;this.nodeHtml
+= "\"/>";this.nodeHtml
+= "<input type=\"hidden\" name=\"query_date\" value=\"";this.nodeHtml
+= query_date
;this.nodeHtml
+= "\"/>";this.nodeHtml
+= "<input type=\"submit\" value=\"保存\">";this.nodeHtml
+= "</form>";this.nodeHtml
+= "</div>";return this.nodeHtml
;}
}function WangEditorModifyNode(p_code
, attribute
, rich_text
, id
) {this.nodeHtml
="";this.getNodeHtml = function () {this.nodeHtml
+= "<div class=\"editor-node\">";this.nodeHtml
+= "<div id=\"div1\" class=\"toolbar\"></div>";this.nodeHtml
+= "<div id=\"div2\" class=\"text\">";this.nodeHtml
+= rich_text
;this.nodeHtml
+= "</div>";this.nodeHtml
+= "<form id=\"editor_form\" action=\"/api/editor/update?id=";this.nodeHtml
+= id
;this.nodeHtml
+= "\" method=\"post\">";this.nodeHtml
+= "<textarea id=\"textplace\" name=\"textplace\" style=\"display: none\"></textarea>";this.nodeHtml
+= "<input type=\"hidden\" name=\"p_code\" value=\"";this.nodeHtml
+= p_code
;this.nodeHtml
+= "\"/>";this.nodeHtml
+= "<input type=\"hidden\" name=\"attribute\" value=\"";this.nodeHtml
+= attribute
;this.nodeHtml
+= "\"/>";this.nodeHtml
+= "<input type=\"submit\" value=\"保存\">";this.nodeHtml
+= "</form>";this.nodeHtml
+= "</div>";return this.nodeHtml
;}
}function delAllEditorNode() {$(".editor-node").remove();
}function deleteEditor(id
) {console
.log("刪除, id = " + id
);$
.ajax({url
: "/api/editor/" + id
,type
: "delete",processData
: false,contentType
: false,success
: function (data
) {alert("刪除成功！如誤刪除，可聯系管理員恢復。");window
.location
.reload();},error
: function (data
) {alert("刪除失敗" + data
);}})
}function modifyEditor(id
) {console
.log("修改, id = " + id
);window
.open('/api/editor/' + id
, '_blank');
}
總結
以上是生活随笔為你收集整理的前端如何实现：在不刷新页面的情况下实时看到自己的评论的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
