vue+freemarker遇到的坑

java后端開發(fā)者做后臺(tái)管理系統(tǒng)，用模版技術(shù)還是挺方便的，但是如果在頁面上對數(shù)據(jù)進(jìn)行修改，怎么辦呢？

可以用jQuery選中各個(gè)dom節(jié)點(diǎn)的值，然后組裝成后臺(tái)接口中需要的Form，再用ajax請求后臺(tái)，這種方式的缺點(diǎn)在于，如果數(shù)據(jù)字段比較多，需要手動(dòng)選擇很多個(gè)dom節(jié)點(diǎn)，再取值，想想都可怕。

由于筆者之前做過AngularJS的項(xiàng)目，知道了數(shù)據(jù)的雙向綁定，現(xiàn)在很火的Vue.js也是跟AngularJS差不多，支持雙向綁定。但是不想用前后端分離，搞兩套部署，主要是對前端部署那些也不熟悉。

那筆者就想在模版頁面中引入Vue.js的雙向綁定功能，這樣就不用再用jQuery去選擇dom節(jié)點(diǎn)了。

大概思路瀏覽器請求Controller，返回一個(gè)視圖，這個(gè)視圖就是freemarker模版，在模版中引入Vue.js，將頁面上需要提交的數(shù)據(jù)綁定到Vue的對象中的數(shù)據(jù)上，然后在創(chuàng)建或更新的時(shí)候直接用ajax請求把這個(gè)Vue對象中的數(shù)據(jù)傳給后端。

在這個(gè)過程中遇到了幾個(gè)坑

1.通過jquery修改vue綁定的model值(v-model)，vue取不到這個(gè)值。

如freemarker模版中有<img :src=“pic_url”/>，在用戶上傳圖片后，通過jquery更改img的src屬性為圖片地址之后，通過vue的對象中的data中的pic_url是取不到這個(gè)值的。

查了網(wǎng)上說，vue一般都只監(jiān)聽用戶在頁面上的操作事件，jquery修改的事件不能夠被vue監(jiān)聽到，可以在jquery修改后dispatch一個(gè)event給vue監(jiān)聽，筆者為了省事，在vue對象中methods中的方法中，把需要用jquery改變的地方，還是用jquery取到之后再賦值給vue對象中的數(shù)據(jù)屬性上。

2.freemarker模版片段中引用了<script></script>，在script中有new Vue的操作，結(jié)果到瀏覽器頁面報(bào)錯(cuò)：

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.

后來上網(wǎng)查了一下，在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明明是有值的，到瀏覽器中頁面上卻不顯示。

原因是因?yàn)檫@個(gè)input被vue的model綁定了，到瀏覽器中vue把數(shù)據(jù)清空了，雖然在開發(fā)者工具中仍可以看到input的value屬性是有值的，但是頁面是不顯示的，vue的對象中data中也沒有值。

正確的做法應(yīng)該是在freemarker中，把值賦給vue的對象，而不是賦值給dom上的input節(jié)點(diǎn)的value：

? ? var modifyVm = new Vue({
? ? ? ? el: '#myModifyModalContent',
? ? ? ? data: {
? ? ? ? ? ? myForm: {
? ? ? ? ? ? //這兒把freemarker模版中的初始值賦值給vue對象的data中屬性
? ? ? ? ? ? //然后freemarker中寫成
?? ??? ??? ?//<input type="text" v-model="myForm.name" placeholder="請輸入城市名稱"/>
?? ??? ??? ?//這樣就可以了。
? ? ? ? ? ? ? ? name: "${oldCityInfo.name!''}",
? ? ? ? ? ? ? ? //標(biāo)簽
? ? ? ? ? ? ? ? labels: '',
? ? ? ? ? ? }
? ? ? ? },
?? ??? ?...
?? ?)

freemarker的一些坑問題

1.對空對象十分敏感

freemarker對空值敏感，當(dāng)我們的值為空時(shí)，會(huì)拋出異常。

解決辦法是：

1.${item!''} 當(dāng)item為null時(shí)渲染為空字符串，不為空則渲染自身值。

2.${item??}結(jié)合freemarker的條件標(biāo)簽。

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

值得注意的是在freemarker自身的標(biāo)簽中，是不需要${}的

2.freemarker中的${}與js中的${}沖突

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

${r"${person.name}"} 輸出js語句 ${person.name}，如果沒有包裹的話，js會(huì)被渲染。

3.渲染數(shù)字時(shí)出現(xiàn)逗號(hào)分隔

渲染數(shù)字時(shí)freemarker 會(huì)自動(dòng)每隔3位進(jìn)行逗號(hào)分隔，使用${id?c}就不會(huì)了。

4.拼接渲染

${}內(nèi)是可以做計(jì)算的，也可以字符串拼接。如：${a+1}，${str1+str2}。需要注意的是，如果內(nèi)部復(fù)合了其他方法，需要加上小括號(hào)。如${str1+(str2!'')}

5.將對象或數(shù)組渲染進(jìn)js

因?yàn)?{}渲染的都是靜態(tài)的字符串，如果想要js獲取到對象或數(shù)組，需要配合js自身的數(shù)組push方法結(jié)合渲染對象最小的單位形成一個(gè)插入方法（最小的單位不能是對象或數(shù)組，最小單位是字符串或數(shù)字等），

例如一個(gè)

?? ??? ?dbLinkData數(shù)組里面是多個(gè)
? ? ? ? ?{
? ? ? ? ? ? groupName: 'XXX',
? ? ? ? ? ? linkInfo: arr2
? ? ? ? ?} 對象
? ? ? ? ?而 arr2 又是一個(gè)數(shù)組內(nèi)部是多個(gè)
? ? ? ? ?{
? ? ? ? ? ? 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 >
? ? ? ? }

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論