Methods and problems of using FreeMarker in the background and Vue in the front end

Time:2019-11-24

I. use of FreeMarker

1: FreeMarker is used in the Java background to pass the value to the front end through the model:

Such as:

@Controller
public class MobileNewsFreeMarkerController {
  @RequestMapping("page/test")
  public String Test(Model model,HttpServletRequest request){
    //Get project path  
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+""+request.getContextPath()+"/";
    //Pass the page path to the foreground through the model
    model.addAttribute("basePath", basePath);
    //Get the value in the URL through HttpServletRequest, such as code value
    String code = request.getParameter("code");
    //Pass the obtained code parameters to the foreground
    model.addAttribute("code ", code );
    //Page Jump
    return "page/test";
  }
}

2: the front-end page gets the value transmitted in the background (the value transmitted by FreeMarker can only be obtained in the HTML page)

Note: here is the combination Vue

Step 1: define the relevant parameters of Vue in JS:

var vm = new Vue({
  el: '#rrapp',
  data: {
    Basepath: '', // Project path
    Code: "", // code parameter
  },
...... (omitted after Vue)

Step 2: receive the background transmission value on the page


<head>
  <script type="text/javascript"> 
    $(document).ready(function() {
      <#if basePath??>
        vm.basePath="${basePath}";
      </#if>
      <#if userId??>
        vm.code ="${code }";
      </#if> 
    });
  </script>
</head>

II. Main problems in use

1: Vue has the calling sequence. Although the HTML page pays the value transferred in the background to the parameter in Vue’s data, the value in the data when the Vue cannot be used in mounted or when the Vue is created will not be used

Such as:

var vm = new Vue({
  el: '#rrapp',
  data: {
    basePath: "",
    code :"",
  },
mounted: function () {
var _this = this;
console.log(_this.basePath);
//The output is still: '', and the value assigned by HTML will not be output, all of which cannot be used here
}

2: however, the methods in methods in Vue can be used directly. To initialize the parameters transferred in HTML, you can use the following methods:

$(function () {
  vm.getData(vm.basePath,vm.code);
});
var vm = new Vue({
  el: '#rrapp',
  data: {
    basePath: "",
    code :"",
  },
methods: {
  getData: function (baseUrlFlag,codeFlag) {
    var _this=this;
    _this.basePath= baseUrlFlag;
    _this.code =codeFlag;
    //Initialize business operation!
  },
}

summary

The above are the methods and problems that Xiaobian introduced to you about using FreeMarker in the background and Vue in the front end. I hope they can help you. If you have any questions, please leave me a message, and Xiaobian will reply to you in time!