目录
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语句中的聚合函数都写一篇