CMS内容管理系统

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天的华为云，地址就不贴了（写的垃圾）。

代码

如有需完整的代码请私信我。