后台使用freeMarker和前端使用vue的方法及遇到的问

一、在后台使用freeMarker与前端vue的结合方法

在Java后台开发中，我们经常使用freeMarker作为模板引擎来与前端进行交互。本文将介绍如何通过Model将值传递给前端，并结合vue进行处理。

让我们看一个典型的后台控制器示例，使用freeMarker将值传递给前端页面。

```java

@Controller

public class MobileNewsFreeMarkerController {

@RequestMapping("page/test")

public String Test(Model model, HttpServletRequest request) {

// 获取项目路径

String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";

// 将页面路径通过model传给前台

model.addAttribute("basePath", basePath);

// 通过HttpServletRequest获取url中的值，如code值

String code = request.getParameter("code");

// 将获取的code参数传给前台

model.addAttribute("code", code);

// 页面跳转

return "page/test";

}

}

```

接下来，在前端页面，我们需要获取后台传输的值。这里我们将结合vue进行处理。在js中定义vue的相关参数：

```javascript

var vm = new Vue({

el: 'rrapp',

data: {

basePath: "", // 项目路径

code: "" // code参数

},

// ...（vue其他内容省略）

});

```

然后，在页面中接收后台传输的值。这里我们使用freeMarker的语法与vue结合：

```html