基於ssm框架的個人部落格系統(10)--編寫部落格頁面開發
阿新 • • 發佈:2019-02-03
在前面我們實現了部落格管理的分頁、查詢和刪除,現在我們來設計實現編寫部落格的頁面,要寫部落格,我們就使用富文字編輯器,有很多可以選擇KingEditor、UEditor、CkEditor,我沒用過百度的UEditor,現在試一回,反正是中文的,應該是容易上手的。
自行下載:http://ueditor.baidu.com/website/
現在先展示最總頁面:
程式碼如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>部落格管理</title> <%@include file="../common/head.jspf"%> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath }/js/UEditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath }/js/UEditor/ueditor.all.min.js"></script> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath }/js/UEditor/lang/zh-cn/zh-cn.js"></script> <script type="text/javascript"> </script> </head> <body style="margin: 0px; font-family: microsoft yahei; background: #90b7d4;"> <!--todo --> <div> <img width="1920" height="120" alt="天天部落格,編輯每天" src="${pageContext.request.contextPath }/images/writeTop2.jpg"> </div> <div id="p" class="easyui-panel" title="編寫部落格" style="padding: 20px;"> <table cellspacing="20px"> <tr> <td colspan="2"> <div> <div style="width: 500px; float: left"> 部落格標題: <input type="text" id="title" name="title" style="width: 200px" /> </div> <div> 部落格類別: <select id="blogTypeId" class="easyui-combobox" name="blogType.id" style="width: 160px" editable="false" panelHeight="auto"> <option value="">--請選擇部落格類別--</option> <c:forEach items="${typeList}" var="type"> <option value="${type.id}">${type.typeName }</option> </c:forEach> </select> </div> </div> </td> </tr> <tr> <td>關鍵字:</td> <td><input type="text" id="keyWord" name="keyWord" style="width: 450px" /> 多個關鍵字的話,用空格隔開</td> </tr> <tr> <td valign="top" style="width: 85px;">部落格內容:</td> <td><script id="editor" name="content" type="text/plain" style="width:95%; height:450px;"></script></td> </tr> <tr> <td colspan="2" align="center"><a href="javascript:check()" class="easyui-linkbutton" data-options="iconCls:'icon-submit'">釋出部落格</a></td> </tr> </table> </div> <div style="height: 30px; margin-top: 13px"> <div align="center" style="height: 30px"> <strong>© CopyRight 2017-XXX cherish_lailai 的部落格系統 版權所有</strong> </div> </div> <!-- 例項化編輯器 --> <script type="text/javascript"> var ue = UE.getEditor('editor'); </script> <script type="text/javascript"> function check() { //獲取標題 var title = $("#title").val(); //獲取類別id var blogTypeId = $("#blogTypeId").combobox("getValue"); //獲取關鍵詞 var keyWord = $("#keyWord").val(); //獲取內容 帶標籤 var content = UE.getEditor('editor').getContent(); //擷取正文(無標籤)前200字元 作為部落格簡介 var summary = UE.getEditor('editor').getContentTxt().substr(0, 200); //獲取內容 (無標籤) var contentNoLabel = UE.getEditor('editor').getContentTxt(); //校驗 if (title == null || title == '') { $.messager.alert("系統提示", "請輸入標題!"); } else if (blogTypeId == null || blogTypeId == '') { $.messager.alert("系統提示", "請選擇部落格型別!"); } else if (content == null || content == '') { $.messager.alert("系統提示", "請編輯部落格內容!"); } else { //ajax請求 請求後臺寫部落格介面 $.post("${pageContext.request.contextPath}/admin/writeBlog", { 'title' : title, 'blogType.id' : blogTypeId, 'content' : content, 'summary' : summary, 'keyWord' : keyWord, 'contentNoLabel' : contentNoLabel }, function(result) { if (result.status == 200) { $.messager.alert("系統提示", "部落格釋出成功!"); clearInfo(); } else { $.messager.alert("系統提示", "部落格釋出失敗!"); } }, "json"); } } //清空頁面所有的資訊 function clearInfo() { $("#title").val(""); $("#blogTypeId").combobox("setValue", ""); $("#keyWord").val(""); UE.getEditor("editor").setContent(""); } </script> </body> </html>
一些基本的方法都註釋的很清楚了,不解釋了。百度搜UE,一堆教程。官方文件也行,別人的部落格教程也罷,能搞出界面就夠了。
現在實現了介面,那就讓我們拭目以待後臺的開發吧!文章還在不斷編輯中,希望對讀者有幫助.喜歡的朋友關注我的文章進度。
彩蛋:後臺的開發,以及前後臺數據的互動