SpringMvc+Velocity的一些配置总结

前言

公司用了许久的struts2+hibernate，前两年时间SpringMvic+Shiro也有做过，大多都是基于JSP实现的界面展示层，最近一段使用使用SpringBoot+JPA采用的是thymeleaf，当然这都是工具，实现功能的一种手段而已。

最近新项目，接触并尝试了一点新的东西Vue+Velocity，有没有混搭的感觉，其实也是为了以后前后端分离项目做铺垫，具体见前两篇文章。

配置

项目进行中，觉得还是有必要记录一下，省的被忘却。

项目其他相关的不再描述，这里只引入velocity

<dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity</artifactId>
            <version>1.7</version>
</dependency>
<dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity-tools</artifactId>
            <version>2.0</version>
</dependency>

spring-mvc.xml部分配置，其实springMvc4貌似已经放弃了支持velocity，相关API已经过时，但是并不影响使用。

<!-- Velocity视图解析器 默认视图 -->
    <bean id="velocityViewResolver"
        class="org.springframework.web.servlet.view.velocity.VelocityViewResolver">
        <property name="contentType" value="text/html;charset=UTF-8" />
        <!-- 这里说明一下 系统会自动匹配路径下的html页面 不需要经过controller 前台使用 vue渲染数据 -->
        <property name="viewNames" value="*.html" />
        <property name="toolboxConfigLocation" value="/WEB-INF/tools.xml" />
        <property name="dateToolAttribute" value="date" /><!--日期函数名称-->  
        <property name="numberToolAttribute" value="number" /><!--数字函数名称-->  
        <property name="requestContextAttribute" value="rc" /><!-- 获取系统路径 -->
    </bean>

    <bean id="velocityConfigurer"
        class="org.springframework.web.servlet.view.velocity.VelocityConfigurer">
        <property name="resourceLoaderPath" value="/WEB-INF/view" />
        <property name="velocityProperties">
            <props>
                <prop key="input.encoding">UTF-8</prop>
                <prop key="output.encoding">UTF-8</prop>
                <prop key="contentType">text/html;charset=UTF-8</prop>
            </props>
        </property>
    </bean>

<?xml version="1.0" encoding="UTF-8" ?>
<toolbox>
    <!-- 自定义标签 -->
    <tool>
        <key>common</key>
        <class>com.itstyle.tag.CommonTag</class>
        <scope>application</scope>
    </tool>
    <!--
         原生标签
         DateTool:  对Date操作：格式化、比较等
         ListTool：透明地处理array和list
         MathTool：数学运算
         NumberTool：对数字格式化和convert
         SortTool：对collections array iterator进行排序
     -->
    <tool>
        <key>date</key>
        <scope>application</scope>
        <class>org.apache.velocity.tools.generic.DateTool</class>
    </tool>
    
    <tool>
        <key>math</key>
        <scope>application</scope>
        <class>org.apache.velocity.tools.generic.MathTool</class>
    </tool>
    
    <tool>
        <key>number</key>
        <scope>application</scope>
        <class>org.apache.velocity.tools.generic.NumberTool</class>
    </tool>
    
    <tool>
        <key>sort</key>
        <scope>application</scope>
        <class>org.apache.velocity.tools.generic.SortTool</class>
    </tool>
    
</toolbox>

自定义标签：

/**
 * 标签(Velocity版)
 * 创建者 小柒2012
 * 创建时间    2017年11月20日
 */
public class CommonTag {

    /**
     * 是否拥有该权限
     * @param permission  权限标识
     * @return   true：是     false：否
     */
    public boolean hasPermission(String permission) {
        Subject subject = SecurityUtils.getSubject();
        return subject != null && subject.isPermitted(permission);
    }
   /**
     * 获取科目
     * @return  List<CommonEntity>
     * @Date    2017年12月12日
     */
    public static List<CommonEntity> getSubjectList() {
        return PropertiesListUtil.getSubjectList();
    }
    /**
     * 获取科目JSON数据
     * @return  Object
     * @Date    2017年12月13日
     */
    public static Object getSubjectJson() {
        return JSON.toJSON(PropertiesListUtil.getSubjectList());
    }
}

标签使用方法：

<!-- Velocity 自定义标签使用-->
$common.hasPermission('sys:user:list')
<!-- Velocity for循环  -->
#foreach( $elem in $common.getSubjectList())
     $elem.getEntityCode()</br>
#end

<!-- Vue中使用 -->
<li v-for="item in subjectList">
{{ item.entityName }}
</li>

var vm = new Vue({
        el: '#app',
        data: {
            //需要转为JSON格式
            subjectList: JSON.parse('$common.getSubjectJson()'),
        },
）}；

VUE相关

在使用过程中，Vue相关页面使用了v-show以及{{}}相关标签，v-show设置的隐藏元素出现导致页面闪烁问题，{{}}也会出现这种问题。

方法一: v-cloak

官方的解释就一句话：这个指令保持在元素上直到关联实例结束编译。

和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

也就是说v-cloak指令可以像CSS选择器一样绑定一套CSS样式然后这套CSS会一直生效到实例编译结束。
示例代码：

<!-- <div> 不会显示，直到编译结束 -->
<style type="text/css">
[v-cloak] {
          display: none;
        }
</style>
<div v-cloak>
  {{ message }}
</div>

方法二: v-text

vue中我们会将数据包在两个大括号中，然后放到HTML里，但是在vue内部，所有的双括号会被编译成textNode的一个v-text指令。
而使用v-text的好处就是永远更好的性能，更重要的是可以避免FOUC (Flash of Uncompiled Content) ，也就是上面与遇到的问题。

示例代码：

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

vue使用iviewui的i-input监听不了回车事件，原因应该是iviewui自身封装了一层input标签之后，把原来的事件隐藏了，所以如下代码运行是无响应的：

解决方法需要在事件后面加上.native

<i-input maxlength="5"  type="text" @keyup.enter.native="login"  v-model="captcha" size="large" placeholder="验证码"></i-input>