CMS內容管理系統

1. 簡介：

內容管理系統（content management system，CMS）是一種位于WEB 前端（Web 服務器）和后端辦公系統或流程（內容創作、編輯）之間的軟件系統。內容的創作人員、編輯人員、發布人員使用內容管理系統來提交、修改、審批、發布內容。這里指的“內容”可能包括文件、表格、圖片、數據庫中的數據甚至視頻等一切你想要發布到Internet、Intranet以及Extranet網站的信息。

2. 需求分析

(1) 官網中的內容或信息的顯示和不顯示來自于后臺管理系統
(2) 開發一個后臺管理系統來管理官網的信息

3. 項目架構

(1) B/S架構的項目

瀏覽器和服務器架構模式

(2) 前臺：官網信息維護

① 文章顯示
② 輪播圖顯示
③ 開班信息
④ 問題反饋

***文章管理-->前臺代碼：*****1、分頁信息展示**(1). 使用GridManager表格插件。document.querySelector('#table-demo-ajaxPageCode').GM({gridManagerName: 'demo-ajaxPageCode', //表中的名稱ajaxData: '/system/article/findAll', //請求路徑ajaxType: 'POST', //請求方式sizeData: [5,10,15,20], //每頁展示的數據量pageSize: 5, //每頁展示多少數據currentPageKey: 'localPage', //重命名頁數（原名：cPage ）pageSizeKey: 'pageSize', //重命名每頁數據個數（原名： pSize）height: '100%', //高度，數據個數展示完supportAjaxPage: true, //是否分頁 //supportAdjust: false,supportDrag: false, //列是否可移動，false不可移動columnData: [{key: 'title', align: 'center', //文本居中text: '文章標題'},{key: 'type',align: 'center',text: '文章類型',template: function(cell, row, index, key){//cell ：當前key對應的值（key是什么類型，cell就是什么類型）//row ：一行的信息//index ：下標//key ：key后面跟的Stringreturn cell.name;}},{key: 'url',align: 'center',text: 'url'},{key: 'clickCount',align: 'center',text: '點擊量'},{key: 'content',align: 'center',text: '文章內容'},{key: 'createDate',align: 'center',text: '創建時間'},{key: 'enable',align: 'center',text: '是否啟用',template: function(cell, row, index, key){return cell?"啟用":"禁用";}},{key: 'id',align: 'center',text: '操作&ensp;<a id="addById" href="javascript:;">添加</a>',template: function(cell, row, index, key){//row對象轉換成json字符串格式var rows = *JSON.stringify*(row);return '<a data-id='+cell+' style="color:red" href="javascript:;">刪除</a>&ensp;'+"<a data-obj='"+rows+"' style='color:blue' href='javascript:;'>修改</a>";}}]});**2、高級查詢**(1). 使用jquery、GridManager插件//綁定查詢事件$("#queryButton").on("click", function(){//將表單中的信息轉換成json串var datas = $('#queryForm').serializeObject();//將表單中的信息與localPage、pagesize分頁信息一起發送至后臺GridManager.setQuery('demo-ajaxPageCode', datas);})**3、添加文章**//添加,事件委托添加點擊事件$("body").on("click", "#addId", function(){//清空隱藏域$("#hid").val("");//清空表單緩存$("#saveForm")[0].reset();// 清空富文本編輯器（百度查）var ue = UE.getEditor('container');$(document).ready(function () {ue.ready(function () {ue.setContent(''); //賦值給UEditor});});//彈出模態框$("#saveModel").modal("show")})**4、修改文章信息**//修改更能，事件委托添加點擊事件$("body").on("click", "a[data-obj]", function(){//alert("123")//清空緩存$("#saveForm")[0].reset();//清空隱藏域$("#hid").val("");//得到當前行數據var objs = $(this).data("obj");//數據回顯模態框$("#saveModel").setForm(objs);// 清空富文本編輯器（百度查）var ue = UE.getEditor('container');$(document).ready(function () {ue.ready(function () {ue.setContent(''); //賦值給UEditor});});//彈出模態框$("#saveModel").modal("show")})**5、修改、刪除保存數據**//保存數據。添加點擊事件$("#saveButton").on("click", function(){//發送請求$.ajax({type: "post",url: "/system/article/save",//發送表單信息serialize()，有文件上傳則不能用data: $("#saveForm").serialize(),//dataType: "json",success: function(msg){if (msg.result) {//關閉模態框$("#saveModel").modal("hide")//刷新頁面，true刷新后跳到第一頁GridManager.refreshGrid("demo-ajaxPageCode", true);} else {alert(msg.error)}}})})**6、刪除**//刪除功能,事件委托$("body").on("click", "a[data-id]", function(){//獲取idvar id = $(this).data("id");//彈出確認刪除模態框$("#delModal").modal("show")//確認前，解綁點擊事件$("#delModelButton").off("")//綁定確認事件$("#delModelButton").on("click", function(){//alert(id)//發送請求$.ajax({type: "post",url: "/system/article/del",data: {"id":id},//dataType: "json",success: function(msg){if (msg.result) {//關閉模態框$("#delModal").modal("hide")//刷新頁面GridManager.refreshGrid("demo-ajaxPageCode", true);} else {alert(msg.error)}}}) })})

(3) 后臺：管理系統

擁有模塊：
1、文章管理
2、輪播圖管理
3、開班信息
4、問題反饋
5、用戶登錄登出

模塊功能：

***文章管理-->后臺：*****1、信息展示**(1). 創建類BaseQuery，封裝分頁數據Beanpublic class BaseQuery {private Integer localPage;private Integer pageSize;//sql中limit分頁查詢中的第一個數public Integer getBean(){return (this.localPage - 1) * this.pageSize;}...}**2、高級查詢**(1). 新建類ArticleQuery，添加高級查詢字段信息，繼承BaseQuery**3、封裝后臺返回數據Bean**(1). 新建類PageBean<T>，將totals（數據總條數）與data（所有的數據）封裝起來public class BaseQuery<T> {//數據總條數private Integer totals = 0;//分頁數據private List<T> data = new ArrayList<T>();...}**4、封裝頁面數據操作結果**(1). 新建類AjaxResultpublic class AjaxResult {//布爾類型，默認為trueprivate Boolean result = true;private String error;...}**5、頁面靜態化技術(FreeMarker)**public class FreeMarkerUtil {/*** @Description:(封裝FreeMarker)* @param:@param path 默認加載路徑，生成的文件存放的位置（xxx.ftl模板文件也存放在這里）* @param:@param name 模板文件名* @param:@param data 準備的數據（map/實體對象）* @param:@param suffix 需要生成文件的后綴* @param:@return * @return:String * @author:ly* @date:xx* @version:V1.0*/public static String createFreemarker(String path, String name, Object data, String suffix){FileWriter out = null;String url = null;try {// 1.導入freemarker.jar// 2.獲取模板(Template)對象// 獲取Configuration對象 -- 為了獲取模板對象Configuration configuration = new Configuration(Configuration.VERSION_2_3_28);// 設置默認加載路徑File file = new File(path);configuration.setDirectoryForTemplateLoading(file);// 設置默認編碼configuration.setDefaultEncoding("UTF-8");// 獲取模板Template template = configuration.getTemplate(name);// 3.準備數據(data)// map// java實體對象// 4.template.process()生成靜態資源// 按照時間軸，生成文件名+后綴的url = System.currentTimeMillis() + suffix;// 準備文件路徑與文件名File file2 = new File(file, url);// 文件寫出流out = new FileWriter(file2);// 生成靜態文件template.process(data, out);// 返回文件名urlreturn url;// 5.創建xxx.ftl模板// 模板中使用el表達式獲取數據. el表達式： ${obj}} catch (Exception e) {e.printStackTrace();} finally {if (out != null) {try {out.close();} catch (IOException e) {e.printStackTrace();}}}return url;}}

調用FreeMarkerUtil

功能模塊：輪播圖管理、開班信息、問題反饋

與文章管理模塊相比，輪播圖管理、開班信息多加了文件上傳功能文件上傳文件上傳三要素：1、form表單的提交方式必須是post請求2、form表單上必須要設置一個enctype="multipart/form-data"3、input表單中必須有復雜表單項 -> type="file"代碼：@Overridepublic void save(MultipartFile photo, Slide slide, HttpServletRequest req) throws Exception {//3.1獲取路徑,String realPath = req.getServletContext().getRealPath("/static/upload/");//判斷是否有文件if (photo != null) {//2、輸入流InputStream input = photo.getInputStream();//3.1.1創建路徑File file = new File(realPath);if (!file.exists()) {//文件路徑不存在//創建路徑file.mkdirs();}//3.2拿到文件后綴String filename = photo.getOriginalFilename();String suffix = filename.substring(filename.lastIndexOf("."));//3.3時間軸生成文件名String name = System.currentTimeMillis() + suffix;//3.4文件寫入的路徑File file2 = new File(realPath, name);//3、輸出流FileOutputStream output = new FileOutputStream(file2);//1、核心代碼IOUtils.copy(input, output);//4、關流output.close();input.close();//5、寫入slide對象//路徑寫入slideslide.setPath("/static/upload/" + name);//文件名寫入slideslide.setName(name);}//判斷添加還是修改if (slide.getId() == null) {//添加if (photo != null) {mapper.add(slide);}} else {//修改操作Slide slideOne = mapper.findOne(slide.getId());if (photo != null) {//刪除文件夾中原來的文件//得到名字String name = slideOne.getName();File file = new File(realPath + name);if (file.exists()) {file.delete();}//執行修改mapper.update(slide);} else {//只修改權限//執行修改mapper.update(slide);}}}添加功能對應的sql語句<!-- void add(Slide slide); 添加--><insert id="add">insert into t_slide(name, path, createDate, enable) values(#{name}, #{path}, #{createDate}, #{enable})</insert>修改功能對應得到sql語句<!-- void update(Slide slide); 修改--><update id="update">update t_slide set <if test="name != null">name=#{name},</if><if test="path != null">path=#{path},</if>createDate=#{createDate}, enable=#{enable} where id=#{id}</update>

功能模塊：問題反饋

與文件上傳功能相比，問題反饋由前臺上傳，后臺可添加恢復記錄與刪除，其余功能與實用技術相同

功能模塊：用戶登錄登出

1、使用攔截器 2、保存登錄信息使用cookie 3、登錄后，刷新頁面用戶信息依然存在：使用session攔截器java代碼：@Overridepublic boolean preHandle(HttpServletRequest req, HttpServletResponse resp, Object arg2) throws Exception {//獲取sessionHttpSession session = req.getSession();//獲取session中的userObject user = session.getAttribute("USER_IN_SESSION");//判斷是否有user，沒有user就表示，走的其它路徑，則重定向到登錄路徑if (user == null) {//重定向到登錄路徑resp.sendRedirect("/system/login");//攔截return false;}//有user，則是登錄路徑return true;}Spring-MVC.xml配置：<!--配置攔截器組 --><mvc:interceptors><!-- 攔截器 --><mvc:interceptor><!-- 要攔截的配置，該配置必須寫在不攔截的上面，/*攔截一級請求，/**攔截多級請求 --><mvc:mapping path="/system/**" /><!-- 只攔截后臺路徑 --><!-- 設置不攔截的配置 --><mvc:exclude-mapping path="/system/login"/><!-- 放行登錄路徑 --><mvc:exclude-mapping path="/system/feedback/save"/><!-- 問題反饋路徑 --><!-- 配置攔截器 （攔截自己寫的攔截器類：Interceptor.Xxx）--><bean class="cn.itsource.interceptor.LoginInterceptor" /> </mvc:interceptor></mvc:interceptors>Cookie與Session使用，進行登錄判斷與保存user登錄信息 1、Controller層@RequestMapping(value="/login", method=RequestMethod.POST)@ResponseBodypublic AjaxResult login(String remember, String username, String password, HttpServletRequest req,HttpServletResponse resp, HttpSession session){try {User user = service.findLogin(username, password);//將user寫入session中session.setAttribute("USER_IN_SESSION", user);//判斷remember是否為null，為null則表示沒有選中“記住我”if (remember != null) {//選中"記住我"//創建cookieCookie c1 = new Cookie("username", username);Cookie c2 = new Cookie("password", password);//設置生命周期c1.setMaxAge(7*27*3600);c2.setMaxAge(7*27*3600);//設置路徑為根路徑，c1.setPath("/");c2.setPath("/");//傳入瀏覽器resp.addCookie(c1);resp.addCookie(c2);} else {//沒有remember，表示沒有選中"記住我"，則需要獲取Cookie，再清除里面的數據//獲取Cookie，因為別人有可能使用Cookie傳輸了數據Cookie[] cookies = req.getCookies();//遍歷for (Cookie cookie : cookies) {//如果getName的值為username，或者password，則清除if ("username".equals(cookie.getName()) || "password".equals(cookie.getName())) {//清除Cookiecookie.setMaxAge(0);//設置路徑為根路徑,清除根路徑下所有的cookiecookie.setPath("/");//傳入瀏覽器resp.addCookie(cookie);}}}return new AjaxResult();} catch (Exception e) {e.printStackTrace();//e.getMessage()打印返回的錯誤信息return new AjaxResult(false, e.getMessage());}}2、Service層@Overridepublic User findLogin(String username, String password) throws Exception {//查到一條userUser user = mapper.findByName(username);//判斷是否查到if (user == null) {//自定義異常信息throw new Exception("用戶不存在");} else{//判斷密碼是否相等if (password.equals(user.getPassword())) {return user;} else {//自定義異常信息throw new Exception("密碼錯誤");}}}

4. 技術選型

(1) 開發工具：idea (2) 數據庫：Mysql (3) 后端框架：SSM (4) 前端框架：jQuery(使用$)、Bootstrap（模態框）、GridManager表格插件①. jstl（頁面取值<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>） + el（后臺傳值Map<String, Object> map， 頁面取值${ }）【同步】②. jquery拼接【異步】（ajax）③. gridManager【異步】

總結

以上是生活随笔為你收集整理的CMS：内容管理系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。