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> 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大前端_Web

前端路由相关实现

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

11920
来自专栏小樱的经验随笔

【全网最全的博客美化系列教程】08.自定义地址栏Logo

首先你得准备一张png或者jpg/jepg的图片,这个时候你可能会想要你的博客头像作为图片,你只需要这样子:

11120
来自专栏CSDN技术头条

前端知识点总结——Vue

作用:将表达式执行的结果 输出当调用元素的 innerHTML 中;还可以将数据绑定到视图。

14820
来自专栏DannyHoo的专栏

底牌项目中上传牌谱功能之编辑标准模式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/de...

13430
来自专栏小狼的世界

CHROME对CSS的解析

最近完成的一个项目需要做对Chrome的支持,在这个过程中发现了一个Chrome对于Css解析与FF、IE等的区别,在这里总结一下。

11720
来自专栏木头编程 - moTzxx

微信小程序Ⅲ [页面标题设置]

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

1.1K20
来自专栏向治洪

微信小程序实例-摇一摇抽奖

概述 前面我们讲了如何开始微信小程序搭建和一些组件的介绍。微信小组件和微信小程序入门 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目...

3.2K100
来自专栏用户2442861的专栏

chrome调试工具常用功能整理

chrome devtools 中 Elements panel 是审查 dom 元素和 css 的, 可以实时修改 dom/css.

10410
来自专栏macOS 开发学习

Mac OSX 开发基础控件学习之 NSOutlineView

在开发基于osx的Application的过程中,当我们需要显示一组列表结构的数据时,比较容易想到的控件是NSTableView;但如果你显示的数据有层级结构...

26420
来自专栏Kevin-ZhangCG

[ SSH框架 ] Struts2框架学习之四(自定义拦截器)

23760

扫码关注云+社区

领取腾讯云代金券