The pitfall encountered by vue+freemarker
It is quite convenient for Java backend developers to do a backend management system, using template technology, but what should I do if I modify the data on the page?
You can use jQuery to select the values of each dom node, then assemble it into the form needed in the background interface, and then use ajax to request the background. The disadvantage of this method is that if there are many data fields, you need to manually select many dom nodes and then get the value, which is terrible to think about.
Since I have done AngularJS project before and learned about the two-way binding of data, the most popular one is similar to AngularJS and supports two-way binding. However, I don’t want to separate the front and back ends, and do two sets of deployments, mainly because I’m not familiar with those on the front end deployments.
Then I want to introduce the two-way binding function in the template page, so that I don’t have to use jQuery to select the dom node anymore.
The general idea is that the browser requests the Controller and returns a view. This view is the freemarker template. It is introduced in the template and binds the data to be submitted on the page to the data in the Vue object. Then, when creating or updating, it directly uses ajax request to pass the data in the Vue object to the backend.
I encountered several pitfalls in this process
1. Modify the model value (v-model) bound by vue through jquery, and vue cannot get this value.
For example, there is <img :src="pic_url"/> in the freemarker template. After the user uploads the picture and changes the src attribute of img to the image address through jquery, this value cannot be obtained through pic_url in data in the vue object.
I checked the Internet that vue generally only listens to user's operation events on the page. Events modified by jquery cannot be heard by vue. You can dispatch an event to vue after jquery is modified. In order to save trouble, in the method in methods in vue objects, the author will use jquery to change the places that need to be changed with jquery, and then assign them to the data attributes in the vue object.
The template fragment references <script></script>, and there is a new Vue operation in script, and the result is an error on the browser page:
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.
Later I checked it online and added type to script:
<script type=“application/javascript”>
Can refer to/questions/38119088/error-templates-should-only-be-responsible-for-mapping-the-state-to-the-ui-avo
The input value in the template has a value, but it does not display it on the page in the browser.
The reason is that this input is bound by the vue model, and vue goes to the browser to clear the data. Although you can still see in the developer tools that the input's value attribute has a value, the page is not displayed, and there is no value in the data in the vue object.
The correct way to do this should be to assign the value to the vue object in freemarker, rather than assigning it to the value of the input node on the dom:
var modifyVm = new Vue({
el: '#myModifyModalContent',
data: {
myForm: {
// Here we assign the initial value in the freemarker template to the properties in the data of the vue object //Then write it in freemarker //<input type="text" v-model="" placeholder="Please enter the city name"/> //That's it. name: "${!''}",
//Label labels: '',
}
},
...
)Some pitfalls of freemarker
1. Very sensitive to empty objects
Freemarker is sensitive to null values and throws an exception when our value is empty.
The solution is:
1.${item!''} renders an empty string when item is null, and renders its own value if it is not empty.
2.${item??} combined with freemarker conditional tags.
<#if item??> true:itemThe value is not empty <#else> false:itemThe value isnull </#if>
It is worth noting that in the freemarker's own tag, ${} is not required.
${} in js conflicts with ${} in js
Pack outside on ${r"..."}
${r"${}"} Output js statement ${}, if there is no package, js will be rendered.
3. Comma separation appears when rendering numbers
When rendering numbers, freemarker will automatically be comma-separated every 3 digits, and it won't be possible to use ${id?c}.
4. Splicing and rendering
The calculation can be done in ${} or string splicing. For example: ${a+1}, ${str1+str2}. It should be noted that if other methods are compounded internally, brackets need to be added. For example ${str1+(str2!'')}
5. Render objects or arrays into js
Because ${} renders static strings, if you want js to obtain an object or array, you need to cooperate with js' own array push method to form an insertion method with the smallest unit of the render object (the smallest unit cannot be an object or array, the smallest unit is a string or number, etc.),
For example, a
dbLinkDataThere are multiple in the array
{
groupName: 'XXX',
linkInfo: arr2
} Object
and arr2 Another array inside is multiple
{
name:'XXX',
url:'XXX'
} ObjectThe solution is as follows:
var listMember = "${dbLinkData?size}";
var arr1 = [];
if (listMember != 0) {
<#list dbLinkData as item >
var arr2=[];
<#list as items >
({
name:'${}',
url:'${}'
})
</#list>
({
groupName: '${}',
linkInfo: arr2
})
</#list >
}The above is personal experience. I hope you can give you a reference and I hope you can support me more.