要做的3个模块，1.轮播图，2.文章展示，浏览次数，3，登录模块

文档，xmind，视频，代码工程，

cms

内容管理系统（Content Management System，CMS），是一种位于WEB前端（Web 服务器）和后端办公系统或流程（内容创作、编辑）之间的软件系统。内容的创作人员、编辑人员、发布人员使用内容管理系统来提交、修改、审批、发布内容。这里指的“内容”可能包括文件、表格、图片、数据库中的数据甚至视频等一切你想要发布到Internet、Intranet以及Extranet网站的信息。

项目介绍

见xmind和视频

Maven

介绍与联系

跳转到后台首页

视图解析器

	<!-- 4.视图解析器：统一处理【webmvc】 --><beanclass="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="prefix" value="/WEB-INF/views/"></property><!-- 前缀 --><property name="suffix" value=".jsp"></property><!-- 后缀 --></bean>

页面和静态资源准备

/cms01/src/main/WebContent/WEB-INF/views/index.jsp
/cms01/src/main/WebContent/static/system

资源分布

controller控制器

可经过视图解析器跳转到jsp等页面

/*** @Description:后台可跳转的首页*/
@Controller
@RequestMapping("/system")
public class SystemController {/*** @Description:不加@responsebody，要走视图解析器跳转到后台首页*/@RequestMapping("/index")public String index(){return "index";}
}

跳转到文章展示页面

index.JSP

      		<ul class="app-menu"><li><a class="app-menu__item active" href="/system/article/index"><i class="app-menu__icon fa fa-dashboard"></i><span class="app-menu__label">文章管理</span></a></li></ul>

ArticleController

@Controller
@RequestMapping("/system/article")
public class ArticleController {@Autowiredprivate IArticleService service;/*** @Description:跳转到后台文章展示页*/@RequestMapping("/index")public String index(){return "article/article";}

article.jsp

/cms01/src/main/WebContent/WEB-INF/views/article/article.jsp

gridManager初体验和显示文章数据

对表格友好的小UI框架

应用：1.工程里引入支持文件，2.复制html和js代码到自己工程里，3.按要求的格式响应数据

<table id='table-demo-ajaxPageCode'></table>

			document.querySelector('#table-demo-ajaxPageCode').GM({gridManagerName: 'demo-ajaxPageCode',	//名字随意ajaxData: '/system/article/findAll',	//改成findAllajaxType: 'POST',supportAjaxPage: true,		//是否支持分页sizeData: [5,10,15,20],pageSize: 5,currentPageKey: "localPage",pageSizeKey: "pageSize",supportAdjust: false,supportDrag: false,columnData: [{key: 'title',align: "center",text: '文章标题'},{key: 'type',align: "center",text: '文章类型',template: function(cell, row, index, key){// 模板return cell.name;}},{key: 'url',align: "center",text: 'url'},{key: 'clickCount',align: "center",text: '点击量'},{key: 'createDate',align: "center",text: '日期'},{key: 'enable',align: "center",text: '是否启用',template: function(cell, row, index, key){// 模板//console.debug(cell) // enable属性对应的值//console.debug(row) // 一行数据的信息  是一个对象//console.debug(index) // 索引//console.debug(key) // key对应的字段return cell?"启用":"禁用";}},{key: 'id',align: "center",text: '操作 &nbsp;&nbsp;<a style="color:green" href="javascript:;">添加</a>',template: function(cell, row, index, key){// 模板return '<a style="color:red" href="javascript:;">删除</a>&nbsp;&nbsp;'+'<a style="color:blue" href="javascript:;">修改</a>';}}]});

ArticleController

		// 需要totals:15   data: listList<Article> list = service.findAll();Map<String, Object> map = new HashMap<>();// 总条数map.put("totals", list.size());// 数据map.put("data", list);return map;

时间和是否启用显示

Article

@Data
public class Article {//主键idprivate Long id;//文章标题private String title;//文章url地址private String url;//文章类型IDprivate Long typeId;//文章类型private ArticleType type;//点击次数private Integer clickCount = 0;//文章内容private String content;//创建时间@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone="GMT+8")private Date createDate = new Date();//默认启用状态private Boolean enable;
}

article.jsp

					{key: 'enable',align: "center",text: '是否启用',template: function(cell, row, index, key){// 模板//console.debug(cell) // enable属性对应的值//console.debug(row) // 一行数据的信息  是一个对象//console.debug(index) // 索引//console.debug(key) // key对应的字段return cell?"启用":"禁用";}},

展示文章类型

ArticleServiceImpl

		List<Article> list = mapper.findAll();for (Article article : list) {// 先获取typeIdLong typeId = article.getTypeId();// 根据typeId查询文章类型表ArticleType at = typeMapper.findArticleTypeByTypeId(typeId);// 把文章类型对象set到article中article.setType(at);}

article.jsp

					{key: 'type',align: "center",text: '文章类型',template: function(cell, row, index, key){// 模板   return cell.name;}},

按钮展示

					{key: 'id',align: "center",text: '操作 &nbsp;&nbsp;<a style="color:green" href="javascript:;">添加</a>',template: function(cell, row, index, key){// 模板return '<a style="color:red" href="javascript:;">删除</a>&nbsp;&nbsp;'+'<a style="color:blue" href="javascript:;">修改</a>';}}

分页

前端补充参数localPage和pageSize

			document.querySelector('#table-demo-ajaxPageCode').GM({gridManagerName: 'demo-ajaxPageCode',	//名字随意ajaxData: '/system/article/findAll',	//改成findAllajaxType: 'POST',supportAjaxPage: true,		//是否支持分页sizeData: [5,10,15,20],pageSize: 5,currentPageKey: "localPage",pageSizeKey: "pageSize",supportAdjust: false,supportDrag: false,columnData: [

PageQuery和ArticleQuery

@Data
@AllArgsConstructor
@NoArgsConstructor
public class PageQuery {// 当前页private Integer localPage;	// 每页显示条数private Integer pageSize;// 返回的是limit中的第一个参数值public Integer getBegin(){return (this.localPage-1)*this.pageSize;}

/**  * @Description:用来添加高级查询参数*/
public class ArticleQuery extends PageQuery{}

PageBean

@Data
public class PageBean<T> {// 总条数private Integer totals = 0;						//没有初始化可能会报空指针// 数据private List<T> data = new ArrayList<T>();		//没有初始化可能会报空指针

ArticleServiceImpl

	@Overridepublic PageBean<Article> findAll(ArticleQuery aq) {// 查询总条数Integer count = mapper.findCount(aq);if(count==0){return new PageBean<>();}List<Article> list = mapper.findAll(aq); // 分页之后的for (Article article : list) {// 先获取typeIdLong typeId = article.getTypeId();// 根据typeId查询文章类型表ArticleType at = typeMapper.findArticleTypeByTypeId(typeId);// 把文章类型对象set到article中article.setType(at);}return new PageBean<Article>(count,list);}

ArticleMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="cn.itsource.mapper.ArticleMapper"><select id="findAll" resultType="article">select * from t_article limit #{begin}, #{pageSize}</select>	<!-- Integer findCount(ArticleQuery aq); --><select id="findCount" resultType="int">select count(id) from t_article </select></mapper>