前面我們已經(jīng)完成了博客的分頁顯示模糊查詢刪除等功能，現(xiàn)在我們就講一下如何實現(xiàn)寫博客與修改博客的功能。
1跷究、
寫博客 顧名思義肯定要要寫 所以我用了一個富文本編輯器（百度UE） 當然大家有更好的選擇可以使用自己熟悉的富文本編輯器 或者使用markdown編輯器碌廓。 這里我就以百度UE為示例來給大家講解机蔗。
首先給大家看一下寫博客的界面
2、
首先我們來了解一下百度UE怎么使用
1膘格、下載百度UE插件
2峭范、新建一個html頁面 并且寫入以下代碼
3、使用瀏覽器的方式打開該頁面就能看到運行結(jié)果 如圖下
4瘪贱、具體詳細配置使用請參考下面網(wǎng)址
現(xiàn)在我們已經(jīng)初步了解百度UE如何使用 那么就可以正式開始我們的開發(fā)了纱控！
首先我們在admin目錄下面新建一個writeBlog.jsp
然后同樣的導入我們的公共頭文件
<%@include file="./common/head.jspf"%>
這樣我們easyui所用到的一些js或者css就載入進來了
另外我們還需要把百度UE相關(guān)的js引入
<script type="text/javascript" charset="utf-8"
src="${blog}/static/ueditor1_4_3_3/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8"
src="${blog}/static/ueditor1_4_3_3/ueditor.all.min.js">
</script>
<!--建議手動加在語言，避免在ie下有時因為加載語言失敗導致編輯器加載失敗-->
<!--這里加載的語言文件會覆蓋你在配置項目里添加的語言類型菜秦，比如你在配置項目里配置的是英文甜害，這里加載的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8"
src="${blog}/static/ueditor1_4_3_3/lang/zh-cn/zh-cn.js"></script>
然后根據(jù)百度UE的相關(guān)文件寫出以下代碼 等下我解釋相關(guān)代碼的作用
<body style="margin: 10px; font-family: microsoft yahei">
<div id="p" class="easyui-panel" title="編寫博客" style="padding: 10px;">
<table cellspacing="20px">
<tr>
<td width="80px">博客標題：</td>
<td><input type="text" id="title" name="title" style="width:400px" /></td>
</tr>
<tr>
<td>所屬類別：</td>
<td><select id="blogTypeId" class="easyui-combobox"
name="blogType.id" style="width:154px" editable="false"
panelHeight="auto">
<option value="">請選擇博客類別...</option>
<c:forEach items="${blogTypeList }" var="blogType">
<option value="${blogType.id }">${blogType.typeName }</option>
</c:forEach>
</select></td>
<td></td>
</tr>
<tr>
<td valign="top">博客內(nèi)容：</td>
<td><script id="editor" name="content" type="text/plain"
style="width:95%; height:200px;"></script></td>
</tr>
<tr>
<td>關(guān)鍵字：</td>
<td><input type="text" id="keyWord" name="keyWord"
style="width:400px" /> 多個關(guān)鍵字的話請用空格隔開</td>
</tr>
<tr>
<td></td>
<td><a href="javascript:submitData()" class="easyui-linkbutton"
data-options="iconCls:'icon-submit'">發(fā)布博客</a></td>
</tr>
</table>
</div>
<!-- 實例化編輯器 -->
<script type="text/javascript">
var ue = UE.getEditor('editor');
</script>
<script type="text/javascript">
/**
* 發(fā)布博客
*/
function submitData() {
//獲取博客標題
var title = $("#title").val();
//獲取博客類別id
var blogTypeId = $("#blogTypeId").combobox("getValue");
//獲取博客內(nèi)容 帶標記
var content = UE.getEditor('editor').getContent();
//截取博客前155字符 作為博客簡介
var summary = UE.getEditor('editor').getContentTxt().substr(0, 155);
//博客關(guān)鍵詞
var keyWord = $("#keyWord").val();
//獲取博客內(nèi)容 不帶標簽 純文本
var contentNoTag = UE.getEditor('editor').getContentTxt();
//校驗
if (title == null || title == '') {
$.messager.alert("系統(tǒng)提示", "請輸入標題球昨！");
} else if (blogTypeId == null || blogTypeId == '') {
$.messager.alert("系統(tǒng)提示", "請選擇博客類型尔店！");
} else if (content == null || content == '') {
$.messager.alert("系統(tǒng)提示", "請編輯博客內(nèi)容！");
} else {
//ajax請求 請求后臺寫博客接口
$.post("${blog}/admin/blog/save.do",
{
'title' : title,
'blogType.id' : blogTypeId,
'content' : content,
'summary' : summary,
'keyWord' : keyWord,
'contentNoTag' : contentNoTag
}, function(result) {
if (result.success) {
$.messager.alert("系統(tǒng)提示", "博客發(fā)布成功！");
clearValues();
} else {
$.messager.alert("系統(tǒng)提示", "博客發(fā)布失斚荨鲫售！");
}
}, "json");
}
}
//清空功能
function clearValues() {
$("#title").val("");
$("#blogTypeId").combobox("setValue", "");
UE.getEditor("editor").setContent("");
$("#keyWord").val("");
}
</script>
</body>
首先要解釋的是“博客類型” 因為當我寫一篇博客的時候我需要給這篇博客選中一個類別 意味著當我打開這個頁面的時候我就應該把數(shù)據(jù)庫中所存的所有博客類別給查詢出來然后把發(fā)給我們的前端視圖，因為我們的修改博客界面也需要這個一博客類型信息该肴，所以我就用一個監(jiān)聽器來實現(xiàn)查詢博客類型這個功能情竹。
首先我們新建一個listener包 用于存放監(jiān)聽器
然后新建一個自定義監(jiān)聽器
@Component
/**
* @Author xp
* @Description 監(jiān)聽程序初始化
* @Date 2017/4/23 21:48
*/
public class InitBloggerData implements ServletContextListener, ApplicationContextAware {
private static ApplicationContext applicationContext;
public void contextInitialized(ServletContextEvent sce) {
//先獲取servlet上下文
ServletContext application = sce.getServletContext();
//同上，獲取博客類別信息service
BlogTypeService blogTypeService = applicationContext.getBean(BlogTypeService.class);
List<BlogType> blogTypeList = blogTypeService.getBlogTypeData();
application.setAttribute("blogTypeList", blogTypeList);
}
public void contextDestroyed(ServletContextEvent sce) {
// TODO Auto-generated method stub
}
public void setApplicationContext(ApplicationContext applicationContext)
throws BeansException {
InitBloggerData.applicationContext = applicationContext;
}
}
實現(xiàn)一個用于自定義監(jiān)聽器 實現(xiàn)要實現(xiàn)ServletContextListener接口
由于我們要獲取spring容器 所以我們還要實現(xiàn)ApplicationContextAware接口 并且實現(xiàn)對應的方法沙庐。
然后通過spring容器獲取的我們的BlogTypeService對象
獲取到博客類型列表blogTypeList 并且把它存到我們的application中
這樣我們的自定義監(jiān)聽器就配置ok 但是還沒有完成鲤妥。
我們需要在web.xml中配置一下我們的監(jiān)聽器
需要注意的是我們的監(jiān)聽器配置代碼的位置一定要在spring監(jiān)聽器的下面 因為我們的監(jiān)聽器依賴于spring監(jiān)聽器
<listener>
<listener-class>ssm.blog.listener.InitBloggerData</listener-class>
</listener>
當我們獲取到了blogTypeList我們就可以通過jstl的foreach把博客類別遍歷并且放在select中
其他代碼 注解講的都很詳細 我就不在說了。
這樣 我們的寫博客功能就算完成
3拱雏、
測試
ok 今天就到這里
