B046-cms01-后台搭建 界面修改 分页 GirdManager
目录
-
-
- cms
- 项目介绍
- Maven
- 跳转到后台首页
-
- 视图解析器
- 页面和静态资源准备
- 资源分布
- controller控制器
- 跳转到文章展示页面
-
- index.JSP
- ArticleController
- article.jsp
- gridManager初体验和显示文章数据
- 时间和是否启用显示
-
- Article
- article.jsp
- 展示文章类型
-
- ArticleServiceImpl
- article.jsp
- 按钮展示
- 分页
-
- 前端补充参数localPage和pageSize
- PageQuery和ArticleQuery
- PageBean
- ArticleServiceImpl
- ArticleMapper.xml
-
要做的3个模块，1.轮播图，2.文章展示，浏览次数，3，登录模块
文档，xmind，视频，代码工程，
cms
内容管理系统（Content Management System，CMS），是一种位于WEB前端（Web 服务器）和后端办公系统或流程（内容创作、编辑）之间的软件系统。内容的创作人员、编辑人员、发布人员使用内容管理系统来提交、修改、审批、发布内容。这里指的“内容”可能包括文件、表格、图片、数据库中的数据甚至视频等一切你想要发布到Internet、Intranet以及Extranet网站的信息。
项目介绍
见xmind和视频
Maven
介绍与联系
跳转到后台首页
视图解析器
<bean
class="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 {
@Autowired
private 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', //改成findAll
ajaxType: '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: '操作 添加',
template: function(cell, row, index, key){// 模板
return '删除 '+
'修改';
}
}
]
});
ArticleController
// 需要totals:15 data: list
List<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 {
//主键id
private Long id;
//文章标题
private String title;
//文章url地址
private String url;
//文章类型ID
private 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) {
// 先获取typeId
Long 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: '操作 添加',
template: function(cell, row, index, key){// 模板
return '删除 '+
'修改';
}
}
分页
前端补充参数localPage和pageSize
document.querySelector('#table-demo-ajaxPageCode').GM({
gridManagerName: 'demo-ajaxPageCode', //名字随意
ajaxData: '/system/article/findAll', //改成findAll
ajaxType: '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
@Override
public 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) {
// 先获取typeId
Long typeId = article.getTypeId();
// 根据typeId查询文章类型表
ArticleType at = typeMapper.findArticleTypeByTypeId(typeId);
// 把文章类型对象set到article中
article.setType(at);
}
return new PageBean<Article>(count,list);
}
ArticleMapper.xml
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>
<select id="findCount" resultType="int">
select count(id) from t_article
select>
mapper>