1. 程式人生 > >基於ssm框架的個人部落格系統(10)--編寫部落格頁面開發

基於ssm框架的個人部落格系統(10)--編寫部落格頁面開發

在前面我們實現了部落格管理的分頁、查詢和刪除,現在我們來設計實現編寫部落格的頁面,要寫部落格,我們就使用富文字編輯器,有很多可以選擇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,一堆教程。官方文件也行,別人的部落格教程也罷,能搞出界面就夠了。

           現在實現了介面,那就讓我們拭目以待後臺的開發吧!文章還在不斷編輯中,希望對讀者有幫助.喜歡的朋友關注我的文章進度。

彩蛋:後臺的開發,以及前後臺數據的互動