A046_CMS_后台搭建_界面修改_分页_GirdManager

1. 内容介绍

CMS认识（了解）
Maven结构（掌握）
引入主界面（掌握）
数据列表展示（掌握）

2. CMS认识

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

3. Maven结构的搭建

3.1 什么是Maven结构

它就是一种结构，以前学过Java工程结构、Web工程结构，现在学习Maven结构，现在外面很多公司在使用。有了结构之后，我们的源文件，资源文件必须放在指定的目录中，项目才能运行。

3.2 Maven概述

1.Maven中使用约定，约定java源代码代码必须放在哪个目录下，编译好的java代码又必须放到哪个目录下，这些目录都有明确的约定。

2.Maven的每一个动作都拥有一个生命周期，例如执行 mvn install 就可以自动执行编译，测试，打包等构建过程

3.使用Maven可以进行项目高度自动化构建，依赖管理(这是使用Maven最大的好处)，仓库管理。

咱们现在只是搭建Maven的结果，用不了Maven的功能。

咱们今天仅仅是熟悉这种结构，让大家后面看到这种结构的时候就习以为常了。

3.3 Maven结构的样式

注意：一定要配置classes（千万不要忘了）

4. 集成ssm

4.1 Jar包导入

4.2 jdbc.properties

jdbc.username=root
jdbc.password=admin
jdbc.driverClassName=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql:///cms

4.3 applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
   xmlns:context="http://www.springframework.org/schema/context"
   xmlns:tx="http://www.springframework.org/schema/tx"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
   http://www.springframework.org/schema/context
	http://www.springframework.org/schema/context/spring-context.xsd
	http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd">
	<context:property-placeholde
	location="classpath:jdbc.properties"/>
	<context:component-scan base-package="cn.itsource.cms.service"/>
	<bean id="dataSource"
	class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
	        <property name="username" value="${jdbc.username}"/>
	        <property name="password" value="${jdbc.password}"/>
	        <property name="url" value="${jdbc.url}"/>
	        <property name="driverClassName"
	value="${jdbc.driverClassName}"/>
	</bean>
	<bean id="sessionFactory"
	class="org.mybatis.spring.SqlSessionFactoryBean">
	        <property name="dataSource" ref="dataSource"/>
			<!--扫描该包下面所有的mapper.xml文件-->
	        <property name="mapperLocations" value="classpath:cn/itsource/cms/mapper/*.xml"/>
	        <!--设置别名对应的公共包-->
	<property name="typeAliasesPackage" value="cn.itsource.cms.domain,cn.itsource.cms.query"/>
	</bean>
	<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
	      <!--它扫描该包下面所有的接口,底层会自动创建对应的 实现类-->
	      <property name="basePackage"
			value="cn.itsource.cms.mapper"/>
	 </bean>
</beans>

4.4 log4j.properties

##日志框架等级  trace<debug <info <warn<Error
log4j.rootLogger = ERROR,stdout
##打印指定的位置,日志等级为trace  只会打印大于等于trace等级的日志信息
log4j.logger.cn.itsource=trace
### 输出信息到控制抬 ###
log4j.appender.stdout = org.apache.log4j.ConsoleAppender
##输出目标,底层是用System.out来打印的
log4j.appender.stdout.Target = System.out
##我打印日志信息,是有一定格式的
log4j.appender.stdout.layout = org.apache.log4j.PatternLayout
##日志信息具体格式的申明 trace
log4j.appender.stdout.layout.ConversionPattern = %d %p [%c] - %m%n

4.5 applicationContext-mvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
   xmlns:context="http://www.springframework.org/schema/context"
   xmlns:mvc="http://www.springframework.org/schema/mvc"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
   http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
   http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <context:component-scan base-package="cn.itsource.cms.web"/>

    <mvc:annotation-driven/>
    <mvc:default-servlet-handler/>
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="suffix" value=".jsp"/>
        <property name="prefix" value="/WEB-INF/views/"/>
    </bean>
</beans>

4.6 web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
	http://java.sun.com/xml/ns/javaee/web-app_4_0.xsd version="4.0">
	<!-- 在指定位置加载spring的核心配置文件 -->
    <context-param>
        <param-name>contextConfigLocation</param-name>
		<param-value>classpath:applicationContext.xml</param-value>
    </context-param>
    <!-- 启动spring容器的监听器 -->
   <listener>
	<listener-class>org.springframework.web.context.Context LoaderListener</listener-class>
	</listener>
	<!-- springMvc核心控制器的配置 -->
    <servlet>
        <servlet-name>springMvc</servlet-name>
		<servlet-class>org.springframework.web.servlet.Dispatcher Servlet</servlet-class>
            <init-param>
            <param-name>contextConfigLocation</param-name>
 			<param-value>classpath:applicationContext-mvc.xml</param-value>
            </init-param>
            <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springMvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

	<!-- 解决post提交乱码问题 -->
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>   <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <init-param>
            <param-name>forceEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

4.7 domain的创建

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;
//创建时间
private Date createDate = new Date();
//默认启用状态
private Boolean enable;

ArticleType

private Long id;
private String name;
private String code;

5. 持久层

5.1 ArticleMapper

//查询列表
List<Article> selectList();

5.2 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.cms.mapper.ArticleMapper">
 <select id="selectList" resultType="Article">
    select * from t_article
  </select>
</mapper>

5.3 ArticleMapperTest

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("classpath:applicationContext.xml")
public class ArticleMapperTest {
	@Autowired
	private ArticleMapper articleMapper;
	@Test
	public void test() {
		List<Article> selectList = articleMapper.selectList();
		for (Article article : selectList) {
			System.out.println(article);
		}
	}
}

6. 业务层

6.1 IArticleService

public interface IArticleService {
	/**
	* 查询所有的文章
	* @return
	*/
	List<Article> selectAll();
}

6.2 ArticleServiceImpl

@Service
public class ArticleServiceImpl implements IArticleService{
	
	@Autowired
	private ArticleMapper articleMapper;
	@Override
	public List<Article> selectAll() {
		return articleMapper.selectList();
	}

}

6.3 ArticleServiceTest

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("classpath:applicationContext.xml")
public class ArticleServiceTest {
	@Autowired
	private IArticleService articleService;
		
	@Test
	public void test(){
		List<Article> list = articleService.selectAll();
		for (Article article : list) {
			System.out.println(article);
		}
	}
}

7. 控制层

7.1 SystemController

/**
* 后台主界面相关controller
* @author 老孙
*
*/
@Controller
@RequestMapping("/system")
public class SystemController {
	@Autowired
	private IArticleService articleService;
	/**
	  * 跳转到后台主界面
	  * @return
	  */
	@RequestMapping("/index")
	 public String index(Model model){
	      model.addAttribute("articles", articleService.selectAll());
	      return "index";
	 }
}

7.2 页面结构

7.3 运行程序测试集成效果

注意：如果看到以上效果，就证明框架集成完毕

8. 界面修改

8.1 引入后台主界面

引入进来后效果：

8.2 修改页面中样式

主要是在css与js与image前加上 /static/
点“ctrl+f”–>一个一个进行替换

8.3 删除页面中无用内容和修改标题

把网页上面的网络路径改为本地路径：
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
把它改成本地路径后我们发现这个路径会报404

原因：本地根本就没有这个文件，这时候我们发现该文件名字叫做fontawesome-webfont.woff2
所以我们在本地的font-awesome.min.css去寻找它的路径

所以我们就要在网上把这个路径下载下来
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0
然后把下载的文件放到本地，最终文件存放的层级

8.4 抽取公共的界面

由于我们多个界面风格是差不多的，出现很多重复代码

<%@include file="/WEB-INF/views/common/header.jsp" %>
<%@include  file="/WEB-INF/views/common/aside.jsp"%>
<%@include file="/WEB-INF/views/common/bottom.jsp" %>

9. 后台分页准备工作

9.1 BaseQuery

/**
 * 最基本的公共查询
 */
public class BaseQuery {
	private Integer currentPage = 1;
	private Integer pageSize = 10;

	/**
	 * 查询开始条数
	 * @return
	 */
	public Integer getBegin(){
		return (this.currentPage-1)*this.pageSize;
	}
	public Integer getCurrentPage() {
		return currentPage;
	}
	public void setCurrentPage(Integer currentPage) {
		this.currentPage = currentPage;
	}
	public Integer getPageSize() {
		return pageSize;
	}
	public void setPageSize(Integer pageSize) {
		this.pageSize = pageSize;
	}
	
}

9.2 ArticleQuery

public class ArticleQuery extends  BaseQuery {
   //写上需要查询的条件
}

9.3 PageList

/**
 * 为什么要封装PageList对象呢?
 * 方便前台取值
 * @author Administrator
 * @param <T>
 */
public class PageList<T> {
    //总条数
    private Long total = 0L;
    //查询出来的列表
    private List<T> result = new ArrayList<T>();

    public PageList() {
    }
    public PageList( Long total, List<T> result) {
    	this.total = total;
    	this.result = result;
    }
    public Long getTotal() {
        return total;
    }

    public void setTotal(Long total) {
        this.total = total;
    }

    public List<T> getResult() {
        return result;
    }
    public void setResult(List<T> result) {
        this.result = result;
    }

}

9.4 分页IArticleService关键代码

 /**
   * 查询分页列表根据查询条件
   * @param query
   * @return
   */
  PageList<Article> selectPageByQuery(ArticleQuery query);

9.5 分页ArticleServiceImpl

@Override
public PageList<Article> selectPageByQuery(ArticleQuery query) {
	List<Article> result = articleMapper.selectListByQuery(query);
	for (Article article : result){
	article.setType(articleTypeMapper.selectById(article.getTypeId()));
	}
	Long count = articleMapper.selectCountByQuery(query);
	return new PageList<Article>(count,result);
}

10. GirdManager的介绍

10.1 介绍：来自百度百科的介绍(也是官方介绍)

起始于15年末的jQuery 插件 ListManager。在2.0版本时更名为GridManager, 并在 v2.1 中脱离对jQuery的依赖；因此无依赖的集成至Angularjs 或 React ,vue.js
GridManager是开源免费的软件（MIT 许可证），同时在github [1] 及 开源中国(oschina) [2] 上开源。在维护现有功能的同时，新功能也在持续开发。
http://gridmanager.lovejavascript.com

10.2 优势

GridManager 可快速、灵活的对table标签进行实例化. 使用简单快捷, 功能强大
纯原生javascript实现，不依赖任何框架使用简单快捷，功能强大与用户进行沟通，采纳来自于使用的需求，并不间段的进行升级维护

10.3 特点

表格的列宽度可进行拖拽式调整
表格的列位置进行拖拽式调整
可通过配置对列进行显示隐藏转换
在表存在可视区域的情况下,表头将一直存在于顶部
表格单项排序或组合排序
表格ajax分页,包含选择每页显示总条数和跳转至指定页功能
记忆用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数
分页、排序、刷新时自动进行数据加载，且提供相应的before、after事件
自动生成序号列
自动生成全选列
当前页数据导出、已选中数据导出
右键菜单快捷操作

Java跨平原理
JDK JRE JVM三者之间的关系
Java程序运行包括哪些阶段
Java源程序中每个部分所代表的意义
注意：使用表格插件的大都是管理平台或系统，通常都是会进行浏览器指定，所以该插件暂不支持ie浏览器，测试时用其他浏览器

10.4 gridManager的使用步骤

10.4.1 首先，我们在页面上加入相应的css与js

<link rel="stylesheet" type="text/css"
href="/js/jquery/plugin/GridManager/css/gm.css"/>
<script type="text/javascript"
src="/js/jquery/plugin/GridManager/js/gm.js"></script>

10.4.2 html页面加上相应的table

<table grid-manager="demo-baseCode"></table>

10.4.3 js中配置查询

var table =  document.querySelector('#table-demo-baseCode').GM({
	gridManagerName: 'demo-baseCode',//gridManager的名字
	ajaxData: '/system/article/datagrid',
	supportAjaxPage: true, //使用ajax请求
	currentPageKey:"currentPage",//指定传递的当前页属性 默认是cPage
	pageSizeKey:"pageSize",//指定传递的每页条数  默认是pSize
	pageSize:10, //初次进行页面的每页条数(不写默认20)
	sizeData:[5,10,20,50,100], //配置每页显示条数的下拉项，数组元素仅允许为正整数。
	height:'100%',
	columnData: [
	   {
	       key: 'title',
	       text: '名称',
	       align: 'center'
	   }, {
	       key: 'clickCount',
	       text: '点击次数',
	       align: 'center'
	   }, {
	       key: 'enable',
	       text: '启用状态',
	       align: 'center',
	       //自定义显示格式
	       template: function(cell, row, index, key){
	          return cell?"<span style='color: green'>启</span>":"<span style='color: red'>禁用</span>"
	        }
	    }, {
	        key: 'createDate',
	        text: '创建时间',
	        align: 'center'
	    },{
	         key:'type',
	         text:'文章类型',
	         align: 'center',
	         template: function(cell, row, index, key){
	              return cell.name;
	         }
	     },{
	         key: 'id',
	         text: '操作',
	         align: 'center',
	         template: function(v, r){
	               return "<a style='color:#337ab7;'
							href='javascript:;' >删除</a>|" +
	                       "<a style='color:#337ab7;' href='javascript:;' >修改</a>";
	               }
	         }
	    ]
});

10.4.4 Controller中返回数据

/**
* 获取文章列表
* @return
*/
@RequestMapping("/datagrid")
@ResponseBody
public Map<String,Object> datagrid(ArticleQuery query){
	 PageList<Article> pageList = articleService.selectPageByQuery(query);
	 Map<String, Object> map = new HashMap<>();
	 map.put("data", pageList.getResult());
	 map.put("totals", pageList.getTotal());
	 return map;
}

注意：在GridManager中，返回的数据基本格式要求如下(来自官网)：

{
    "data":[
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12",
            "info": "野生前端程序",
            "operation": "修改"
        },
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12",
            "info": "野生前端程序",
            "operation": "修改"
        }
    ],
    "totals": 8  // 分页必须存在的属性， 属性名可通过配置项totalsKey进行变更
}

10.4.5 高级查询核心代码

document.querySelector('#table-demo-baseCode').GM("setQuery", param);

11.课程总结

今日是大家第一次做项目，在做项目期间我们会遇到很多问题，但是不要畏惧错误，有错误我们就进行解决，各位勇士勇敢面对吧

12. 重点知识

Maven项目结构，熟悉每个层级作用
SSM框架的搭建
项目首页面展示
抽取重前端复代码
GridManager列表的展示

13.课后练习

现在是项目阶段，把当日代码完整的跟着写完一篇

14.今日面试题

SpringMvc执行流程

15.每日一练

把sql语句中的聚合函数都写一篇