一、Freemarker

• FreeMarker 是一款免费的模板引擎
• 对比 JSP 而言，FreeMarker 性能更好，渲染速度更快
• .ftl 后缀
• 中文手册: http://freemarker.foofun.cn/

添加依赖

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

空值处理

• FreeMarker 的变量必须赋值，否则就会抛出异常

• 不要求默认值的类型和变量类型相同

${name!} 只处理空值问题
${(employee.name)!} 多个属性时用圆括号
${name!"abc"} 处理空值问题同时也指定了默认值

freemarker指令

指 ftl 的标签，这些标签一般以符号#开头
注释: <#-- xxxxx -->

• include指令：

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

• assign指令
  创建一个新的变量， 或者替换一个已经存在的变量

<#assign currentMenu="department"/>
${}获取该变量 ${currentMenu}

• list指令
  循环遍历序列

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

• 三元运算
  ?? 判断是否有值 有

${ (!employee??) ? string('新增','编辑') }

二、 PageHelper分页插件

• 官网 https://pagehelper.github.io/
• 使用分页插件提供的PageInfo类进行封装（可查看手册来使用插件提供的属性名）

依赖

<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>

三、jquery-bootstrap 消息提示插件

引入插件

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

使用插件

// 普通提示
$.messager.alert('This is message!')
// 带标题的提示
$.messager.alert('Title', 'This is message!')
// 确认框
$.messager.confirm('title', 'This is message!', function() { //点击确定后的回调函数
    console.log('you closed it');
})
// 修改确认框的文本
$.messager.model = {
    ok: {text: '关闭'},
    cancel: {text: '取消'}
}
//更简洁的弹出框，并自动消失
$.messager.popup("This is message!")

四、Bootstrap模态框

• 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

官网模板

https://v3.bootcss.com/javascript/#modals

模态框激活

$('#editModal').modal('show');
.modal('toggle')
.modal('hide')

五、 jquery-form 表单异步提交插件

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

引入插件

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

使用插件

• 方式一：使用ajaxSubmit方法
  一般用于按钮是button类型，需要在事件中

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

• 方式二：使用ajaxForm方法

一般用于按钮是submit类型的时候比较方便，但是注意该按钮必须位于form表单内部
无须绑定按钮事件，只需要在页面加载完毕后，利用ajaxForm方法把表单转为异步的表单，当点击按钮时就可以提交一个异步的表单了，因为按钮是submit类型的，所以是点击后才提交的

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