CMS

CMS是"Content Management System"的縮寫,意為"內容管理系統"，一個管理內容的后臺管理系統，
根據內容的不同分為不同的系統
內容是新聞，就是新聞管理系統，
內容是員工資訊，就是員工管理系統，
內容是博客，博客管理系統，
內容是職位，職位管理系統，
這篇文章寫的主要是用于對網站前臺的資訊管理，如文字、圖片、影音和其他內容的發布、更新、洗掉等操作所撰寫的后臺代碼邏輯，

專案介紹

以下是此專案的簡單介紹：
需求分析：前端顯示的內容 是通過可以后端的管理員來管理是否顯示 和后臺可操作的增刪改查， 官網中的內容或資訊的顯示和不顯示來自于后臺管理系統，所以我們需要開發一個后臺管理系統來管理官網的資訊并且前端也要顯示，

專案架構

BS架構的專案
	前臺：公司官網資訊維護
				文章顯示    輪播圖顯示   個人秀顯示   視頻顯示
				
后臺：后臺管理系統
			文章管理    輪播圖管理    個人秀管理    視頻管理     用戶的登入登出（ 記住我，忘記我） 增刪改查（高級查詢）

開發工具：eclipse

資料庫：mysql

后端框架：ssm

前端框架：jQuery、Bootstrap、GridManager、富文本編輯器、FreeMarker 表格插件

maven專案構建工具 但是沒有使用maven （為后面專案做鋪墊）

查詢

查詢包括分頁查詢+高級查詢+查詢

查詢

前端寫好對應的頁面 提供一個點擊的按鈕， 給按鈕系結一個點擊事件 發送GridManager請求并攜帶資料，
注意后臺傳回前端的型別，由于GridManager只能決議 map和物件 里面必須包含 totals（資料的總條數） data（資料） 給前端回傳的資料 我這里把他封裝成一個物件，
下面展示一些 發送請求的代碼，

// An highlighted block
document
		.querySelector('#table-demo-ajaxPageCode')
		.GM(
				{
					gridManagerName : 'demo-ajaxPageCode', // 取名 方便查找
					ajaxData : '/system/article/list', // 資料來源地址
					ajaxType : 'POST', // 發送方式為post
					supportAjaxPage : true, // 打開分頁功能
					pageSize : 5, // 配置初次進入時每頁的顯示條數
					currentPageKey : "currentPage", // 請求引數中當前頁
					pageSizeKey : "pageSize", // 請求引數中每頁顯示條數
					sizeData : [ 5, 10, 15, 20 ],// 配置每頁顯示條數的下拉項，陣列元素僅允許為正整數，
					height : "100%", // 自適應的高度
					columnData : [
							{
								key : 'title', // key對應后臺的值
								text : '標題', // 前端顯示的值
								align : 'center' // 居中
							},
							{
								key : 'url',
								text : '地址',
								align : 'center'
							},
							{
								key : 'type',
								text : '文本型別',
								align : 'center',
								// cell typeId欄位所對應的值
								// row list里面的每個一物件
								// index 索引
								// key 就是上面的key 這里面對應 typeId
								template : function(cell, row, index, key) {
									return cell.name;
								},
							},
							{
								key : 'clickCount',
								text : '點擊率',
								align : 'center'
							},
							{
								key : 'content',
								text : '文章內容',
								align : 'center'
							},
							{
								key : 'enable',
								text : '是否啟用',
								align : 'center',
								// cell enable欄位所對應的值
								// row list里面的每個一物件
								// index 索引
								// key 就是上面的key 這里面對應 enabel
								template : function(cell, row, index, key) {
									return cell ? "<font color='green' >啟用<font/>"
											: "<font color='red' >禁用<font/>";
								},
							},
							{
								key : 'createDate',
								text : '創建時間',
								align : 'center'
							},
							{
								key : 'id',
								text : '操作&nbsp;&nbsp;'
										+ "<a id='insert' href='javascript:' style='color:green' />添加",
								align : 'center',
								template : function(cell, row, index, key) {
									// row是一行物件 將他轉換成json字串 決議需要
									var rows = JSON.stringify(row);
									return "<a data-id= '"
											+ cell
											+ "' href='javascript:' style='color:red' />洗掉&nbsp;&nbsp;"
											+ "<a data-row='"
											+ rows
											+ "' href='javascript:' style='color:cyan'/>修改";
								},
							}

					]
				});

分頁查詢

分頁查詢需要準備一個物體類 里面需要包含2個欄位 當前頁currentPage 每頁顯示條數pageSize 由于其他的模塊也會用到分頁查詢的欄位說以這個類就只有這2個欄位 其他模塊要用就繼承它，
上面的發送請求到后臺是攜帶了這2個欄位 所有只需要用物件接收一下 并且在 對應mapper層的sql陳述句后面加上
limit （當前頁currentPage-1）*每頁顯示條數pageSize ， 每頁顯示條數pageSize
注意limit 不能進行運算 所有要在分頁查詢物體類里面提供get方法 在里面進行運算 帶時候直接取就行， limit也只能放在sql陳述句最后，

高級查詢

這里面就是加一個物體類并且繼承分頁查詢的物體類 因為高級查詢也需要用分頁查詢 里面欄位對應前端要查詢的欄位就行， 前端發送請求 后臺處理資料 回傳給前端引數，mapper層就使用動態sql撰寫就行，

洗掉

通過傳入后臺 要洗掉的id 去操作， 洗掉主要注意 不僅要洗掉資料庫里面的資料 也要洗掉不同模塊中會有的視頻，靜態頁面，洗掉的時候先去查詢到資料庫里面的地址 然后洗掉資料庫資料和地址對應的檔案，

增加

增加 傳入資料到后臺 封裝成物件 和修改公用方法 通過有沒有id來判斷具體是增加還是修改，有id是修改 沒有id是增加 也是注意生成視頻，靜態頁面，然后放入物件 再添加進資料庫，

修改

修改注意資料的回顯， 前臺頁面注意一定要清除快取， 如果涉及到視頻，靜態頁面 先洗掉以前的 再添加新的 然后跟新資料庫，

各種模塊

所有的模塊都是有增刪改查（思路在上面） 除開增刪改查只寫大概思路，和一些注意事項，

文章模塊

首先文章管理模塊是用的FreeMarker工具（記得導包） 頁面靜態化 好處：用空間換時間，通過寫一個文章模塊對文章進行增加和修改的時候就會生成靜態頁面 前臺顯示標題 給標題系結地址就是生成的靜態頁面，點擊標題就跳轉到靜態頁面， 模板里面使用el運算式取值，
實作了一些功能 顯示發布時間，實作點擊率的增加，

輪播圖模塊

這個模塊主要難點是檔案的上傳和下載 通過MultipartFile這個物件來操作檔案
輸入流 通過MultipartFile點方法獲取
輸出流 自己new一個
再通過IOUntil完成檔案的傳輸，
注意獲取真實路徑 方便用于其他系統和其他用戶，

個人秀模塊

這個模塊參照文章模塊 個人拿來練手的，

視頻模塊

這個模塊參照輪播圖模塊 個人拿來練手的， 前臺加上 video 這個標簽就行

后臺的登錄登出

登錄

通過前臺用戶輸入的賬號去查詢資料庫 如果為空 那就是賬號不存在 然后只需要對比密碼就行 密碼錯誤提示密碼錯誤. 密碼正確跳轉頁面進入后臺 并且把賬號和密碼存入session（存入session主要用于攔截 ）

登出

登出的時候記得清除session 因為里面會存有 賬號和密碼的資料，

攔截

通過查看session里面是否存入賬號和密碼來判斷用戶是否登錄 如果用戶直接訪問后臺其他的東西就會被攔截 并且強制跳轉到登錄頁面，

記住我

勾選了記住我

把賬號和密碼放入cookie里面 并且設定生命周期（自己設定的一周） 如果不設定存活時間 那么他會在關閉瀏覽器的時候死亡， 前臺js代碼再獲取cookie里面的值放入對應的文本框內

如果沒有勾選記住我

獲取前臺的cookie 查詢里面是否存在賬戶或者密碼（在專案中基本是用來判斷用戶上一次時候勾選了記住我） 沒有就正常執行 有的話就把 cookie自殺 然后再把洗掉后的cookie放回 前臺js代碼再獲取cookie里面的值放入對應的文本框內 這樣就實作了清除操作，

發布到網上

通過購買服務器 再服務器上部署專案 然后就可以通過彈性公網地址訪問自己寫的專案，
本人白嫖了一個30天的華為云，地址就不貼了（寫的垃圾），

代碼

如有需完整的代碼請私信我，