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>

标签

配置tools.xml以及相关自定义标签,其实velocity-tools2.0已经不支持这种写法了,详见org.apache.velocity.tools.view包下面的tools.xml。

但是SpringMvc4对于velocity支持的API已经废弃,需要自己重写废弃的API,想想原来的可以继续使用就没有重写。

<?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> 
qrcode_for_gh_bf7a27ade681_258.jpg

作者: 小柒

出处: https://blog.52itstyle.com

分享是快乐的,也见证了个人成长历程,文章大多都是工作经验总结以及平时学习积累,基于自身认知不足之处在所难免,也请大家指正,共同进步。

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出, 如有问题, 可邮件(345849402@qq.com)咨询。