后台使用freeMarker和前端使用vue的方法
2019-06-13 09:03:00来源：博客园 阅读 ()
一：freeMarker的使用
1：java后台使用freeMarker是通过Model，将值传给前端：
如：
@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";
}
}
2：前端页面获取后台传输的值（freeMarker传输的值只能在html页面获取）
注：这里是结合vue
第一步：在js中定义vue的相关参数：
var vm = new Vue({
el: '#rrapp',
data: {
basePath:"", //项目路径
code : "", // code参数
},
..........（vue后面内容省略）
第二步：再在页面接收后台传输的值
<head>
<script type="text/javascript">
$(document).ready(function() {
<#if basePath??>
vm.basePath="${basePath}";
</#if>
<#if userId??>
vm.code ="${code }";
</#if>
});
</script>
</head>
二：使用中主要遇到的问题
1：Vue存在调用的先后顺序，虽然html页面将后台传输的值付给vue的data中的参数，但是在mounted中是无法使用的时候获取的还是创建的vue的时候data中赋的值，并不会使用html赋的值：
如：
var vm = new Vue({
el: '#rrapp',
data: {
basePath: "",
code :"",
},
mounted: function () {
var _this = this;
console.log(_this.basePath);
//输出的还是：""，并不会输出html赋的值，所有在这里无法使用
}
2：但是在vue中methods内的方法是可以直接使用的；初始化如果需要html中传输的参数，可以使用以下方法：
$(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;
//进行初始化业务操作！
},
}
原文链接:https://www.cnblogs.com/dragonlong-0606/p/11017338.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后 2020-06-10
- 聊聊 OAuth 2.0 的 token expire_in 使用 2020-06-08
- 为什么阿里巴巴Java开发手册中强制要求接口返回值不允许使用 2020-06-06
- 学习笔记之方法引用 2020-06-06
- idea使用小技巧（一） 2020-06-05
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
