vue+freemarker中遇到的坑及解决

vue+freemarker遇到的坑

java后端开发者做后台管理系统，用模版技术还是挺方便的，但是如果在页面上对数据进行修改，怎么办呢？

可以用jQuery选中各个dom节点的值，然后组装成后台接口中需要的Form，再用ajax请求后台，这种方式的缺点在于，如果数据字段比较多，需要手动选择很多个dom节点，再取值，想想都可怕。

由于笔者之前做过AngularJS的项目，知道了数据的双向绑定，现在很火的Vue.js也是跟AngularJS差不多，支持双向绑定。但是不想用前后端分离，搞两套部署，主要是对前端部署那些也不熟悉。

那笔者就想在模版页面中引入Vue.js的双向绑定功能，这样就不用再用jQuery去选择dom节点了。

大概思路浏览器请求Controller，返回一个视图，这个视图就是freemarker模版，在模版中引入Vue.js，将页面上需要提交的数据绑定到Vue的对象中的数据上，然后在创建或更新的时候直接用ajax请求把这个Vue对象中的数据传给后端。

在这个过程中遇到了几个坑

1.通过jquery修改vue绑定的model值(v-model)，vue取不到这个值。

如freemarker模版中有<img :src=“pic_url”/>，在用户上传图片后，通过jquery更改img的src属性为图片地址之后，通过vue的对象中的data中的pic_url是取不到这个值的。

查了网上说，vue一般都只监听用户在页面上的操作事件，jquery修改的事件不能够被vue监听到，可以在jquery修改后dispatch一个event给vue监听，笔者为了省事，在vue对象中methods中的方法中，把需要用jquery改变的地方，还是用jquery取到之后再赋值给vue对象中的数据属性上。

2.freemarker模版片段中引用了<script></script>，在script中有new Vue的操作，结果到浏览器页面报错：

templates should only be responsible for mapping the state to the ui. avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

后来上网查了一下，在script中加上了type就好了：

<script type=“application/javascript”>

可以参考https://stackoverflow.com/questions/38119088/error-templates-should-only-be-responsible-for-mapping-the-state-to-the-ui-avo

3.freemarker模版中的input value明明是有值的，到浏览器中页面上却不显示。

原因是因为这个input被vue的model绑定了，到浏览器中vue把数据清空了，虽然在开发者工具中仍可以看到input的value属性是有值的，但是页面是不显示的，vue的对象中data中也没有值。

正确的做法应该是在freemarker中，把值赋给vue的对象，而不是赋值给dom上的input节点的value：

    var modifyVm = new Vue({
        el: '#myModifyModalContent',
        data: {
            myForm: {
            //这儿把freemarker模版中的初始值赋值给vue对象的data中属性
            //然后freemarker中写成
            //<input type="text" v-model="myForm.name" placeholder="请输入城市名称"/>
            //这样就可以了。
                name: "${oldCityInfo.name!''}",
                //标签
                labels: '',
            }
        },
        ...
    )

freemarker的一些坑问题

1.对空对象十分敏感

freemarker对空值敏感，当我们的值为空时，会抛出异常。

解决办法是：

1.${item!''} 当item为null时渲染为空字符串，不为空则渲染自身值。

2.${item??}结合freemarker的条件标签。

<#if item??>
    true:item值不为空
<#else>
    false:item值为null
</#if>

值得注意的是在freemarker自身的标签中，是不需要${}的

2.freemarker中的${}与js中的${}冲突

在外面包裹上${r"..."}

${r"${person.name}"} 输出js语句 ${person.name}，如果没有包裹的话，js会被渲染。

3.渲染数字时出现逗号分隔

渲染数字时freemarker 会自动每隔3位进行逗号分隔，使用${id?c}就不会了。

4.拼接渲染

${}内是可以做计算的，也可以字符串拼接。如：${a+1}，${str1+str2}。需要注意的是，如果内部复合了其他方法，需要加上小括号。如${str1+(str2!'')}

5.将对象或数组渲染进js

因为${}渲染的都是静态的字符串，如果想要js获取到对象或数组，需要配合js自身的数组push方法结合渲染对象最小的单位形成一个插入方法（最小的单位不能是对象或数组，最小单位是字符串或数字等），

例如一个

        dbLinkData数组里面是多个
         {
            groupName: 'XXX',
            linkInfo: arr2
         } 对象
         而 arr2 又是一个数组内部是多个
         {
            name:'XXX',
            url:'XXX'
          } 对象

解决方法如下：

     var listMember = "${dbLinkData?size}";
        var arr1 = [];
        if (listMember != 0) {
          <#list dbLinkData as item >
            var arr2=[];
            <#list item.linkInfo as items >
            arr2.push({
              name:'${items.name}',
            url:'${items.url}'
          })
          </#list>
          arr1.push({
            groupName: '${item.groupName}',
            linkInfo: arr2
          })
        </#list >
        }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。