SpringMVC集成FreeMark/PageHelper分页插件/Bootstrap前端框架 的入门用法

FreeMarker

一种基于模板和数据，用来生成输出文本(HTML网页，电子邮件，配置文件，源代码等)的通用工具，对比 JSP 而言，FreeMarker 性能更好，渲染速度更快。它也可以用于非Web应用环境中。

SpringMVC集成Freemarker

添加依赖

 <!-- freemarker -->
<dependency>
    <groupId>org.freemarker</groupId>
    <artifactId>freemarker</artifactId>
    <version>2.3.23</version>
</dependency>

<!-- 将freemarker等第三方库整合进Spring应用上下文的依赖-->
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-context-support</artifactId>
    <version>${spring.version}</version>
</dependency>

在 mvc.xml 配置视图解析器

<!-- 注册 FreeMarker 配置类 -->
<bean class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer"> 
    <!-- 配置 FreeMarker 的文件编码 -->
    <property name="defaultEncoding" value="UTF-8" />
    <!-- 配置 FreeMarker 寻找模板的路径 -->
    <property name="templateLoaderPath" value="/WEB-INF/views/" />
</bean>

<!-- 注册 FreeMarker 视图解析器 -->
<bean class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">  
    <!-- 是否在 model 自动把 session 中的 attribute 导入进去 -->   
    <property name="exposeSessionAttributes" value="true" /> 
    <!-- 配置逻辑视图自动添加的后缀名 --> 
    <property name="suffix" value=".ftl" />   
    <!-- 配置响应头中 Content-Type 的指 -->  
    <property name="contentType" value="text/html;charset=UTF-8" />
</bean>

更改页面

• 把原来jsp页面改成ftl页面，手动更改后缀
• 使用到的指令，其实就是指 ftl 的标签，这些标签一般以符号#开头

用到的指令

使用到的指令

指令：其实就是指 ftl 的标签，这些标签一般以符号#开头

include指令

在当前模板文件中引入另一个模板文件

<!--freemarker引入模板文件 使用相对路径来引入-->
<#include "../common/link.ftl" >

assign指令

使用该指令可以在当前模板中创建一个新的变量， 或者替换一个已经存在的变量

创建变量 currentMenu并赋值：

<#assign currentMenu="department"/>

可使用${}获取该变量

${currentMenu}

list指令

用于循环遍历序列

<#list pageInfo.list as department>
    <tr>
        <td>${department_index+1}</td>
        <td>${department.name!}</td>
    </tr>
<#/list>               

注释：FreeMarker的注释和 HTML 的注释相似，但是它用<#–和–>来分隔的。任何介于这两个分隔符（包含分隔符本身）之间内容会被 FreeMarker 忽略，不会显示到页面，一般用来注释有freemarker指令相关的代码。

<#--  <td>${department.name!}</td> -->

PageHelper分页插件

PageHelper 是一个 MyBatis 的分页插件, 负责将已经写好的 SQL 语句, 进行分页加工。

优点：无需你自己去封装以及关心 SQL 分页等问题，使用很方便。

官网：https://pagehelper.github.io/

添加依赖

<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper</artifactId>
    <version>5.1.2</version>
</dependency>

注册分页拦截器 mybatis-config.xml

<plugins>
    <!-- com.github.pagehelper 为 PageHelper 类所在包名 -->
    <plugin interceptor="com.github.pagehelper.PageInterceptor">
        <!-- 当 pageNum（当前页） <= 0 时，将 pageNum 设置为 1 -->
        <!-- 当 pageNum > pages(总页数) 时，将 pageNum 设置为 pages -->
        <property name="reasonable" value="true"/>
    </plugin>
</plugins>

修改 Service 中分页查询

删除Mapper.xml文件中查询数量的代码

删除Mapper.xml文件的分页查询的 SQL 中的 Limit，QueryObject中也不需要提供start方法了

使用分页插件提供的PageInfo类进行封装，不需要我们自己再定义RageResult类啦

public PageInfo<Department> query(QueryObject qo) {
    //使用分页插件,传入当前页,每页显示数量
    PageHelper.startPage(qo.getCurrentPage(), qo.getPageSize());
    List<Department> departments = departmentMapper.selectForList(qo);
    return new PageInfo(departments);
}

修改页面获取分页信息的取值

因为现在我们使用 com.github.pagehelper.PageInfo 类来封装分页数据，里面提供的属性名跟之前我们自己写的不一样。

$(function(){
    $("#pagination").twbsPagination({
        totalPages: ${pageInfo.pages} || 1,
        startPage: ${pageInfo.pageNum} || 1,
        visiblePages: 5,
        first: "首页",
        prev: "上页",
        next: "下页",
        last: "尾页",
        initiateStartPageClick: false,
        onPageClick: function(event,page){
            $("#currentPage").val(page);
            $("#searchForm").submit();
        }
    });
});

Bootstrap前端框架

概述

Bootstrap 是美国 Twitter 公司的设计师 Mark Otto 和 Jacob Thornton 合作基于 HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 Bootstrap 提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。（重点是响应式，能适应各种各种设备）

学习方法

参考官方文档，拷贝案例，修改调整

HelloWorld

1. 项目中添加 Bootstrap文件目录

2. html页面引入相关的样式和 JS

   <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css">
   <script src="/js/jquery/jquery.min.js"></script>
   <script src="/js/bootstrap/js/bootstrap.js"></script>
   

3. 添加文档案例查看效果

常用组件

面板，栅格系统，列表，表格，按钮，表单，字体图标，模态框

jquery-bootstrap 消息提示插件

用户的操作现在是没有什么提示，即使有提示默认提示框也是很丑的，风格搭配与 Bootstrap 不一致。另外一个问题是点击删除就可以直接删除数据，可能会出现误操作的情况。

jQuery Bootstrap 里面提供对原有的 Bootstrap 提供基于 jQuery 一些插件，比如提示框与确定框等等

• 引入插件

  <script src="/js/plugins/messager/jquery.bootstrap.min.js"></script>
  

• 使用插件

  //普通提示 除此，还有很多到bootstrap官方文档里复制到自己的带码里就可以
  $.messager.alert('This is message!')
  

Bootstrap模态框

参考 Bootstrap 官方文档拷贝过来改成自己需要的样子，放在页面 body 元素中 。给按钮绑定点击事件，点击之后弹出模态框。

$('.btn-input').click(function () {
     $('#editModal').modal('show');
});

jquery-form 表单异步提交插件

jQuery Form 能够让你简洁的将以 HTML 形式提交的表单升级成采用 AJAX 技术提交的表单。

插件里面主要的方法 ajaxForm 和 ajaxSubmit, 能够从 form 组件里采集信息确定如何处理表单的提交过程。

两个方法都支持众多的可选参数，能够让你对表单里数据的提交做到完全的控制。

这让采用 AJAX 方式提交一个表单的过程简单化很多了！

• 引入插件

<script src="/js/plugins/jquery-form/jquery.form.js"></script>

• 使用插件

  使用时最好根据按钮的类型来选择使用的方式

方式一：使用ajaxSubmit方法

一般用于按钮是button类型的时候比较方便

<button type="button" class="btn btn-primary btn-submit">保存</button>

页面加载完毕后，为按钮绑定点击事件，在事件处理函数中使用ajaxSubmit直接可以提交异步表单

$(function(){
    $('.btn-submit').click(function () {
        //ajaxSubmit方法可以把表单转为异步的表单，并且马上执行提交
        $('#editForm').ajaxSubmit(function (data) { //回调函数
            console.log(data);
        })
    })  
})

方式二：使用ajaxForm方法

一般用于按钮是submit类型的时候比较方便，但是注意该按钮必须位于form表单内部

<button type="submit" class="btn btn-primary btn-submit">保存</button>

无须绑定按钮事件，只需要在页面加载完毕后，利用ajaxForm方法把表单转为异步的表单，当点击按钮时就可以提交一个异步的表单了，因为按钮是submit类型的，所以是点击后才提交的

$(function(){
    //ajaxForm方法可以把表单转为异步的表单，但不会马上提交
    $('#editForm').ajaxForm(function (data) { //回调函数
        console.log(data);
    })
})