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


Posted in Javascript onJune 13, 2019

一: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;


//进行初始化业务操作!

},
}

总结

以上所述是小编给大家介绍的后台使用freeMarker和前端使用vue的方法及遇到的问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js对象的构造和继承实现代码
Dec 05 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
jquery图片放大镜效果
Jun 23 jQuery
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
vue路由插件之vue-route
Jun 13 #Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 #Javascript
详解vuex之store源码简单解析
Jun 13 #Javascript
vue store之状态管理模式的详细介绍
Jun 13 #Javascript
微信小程序页面间跳转传参方式总结
Jun 13 #Javascript
微信小程序位置授权处理方法
Jun 13 #Javascript
json数据格式常见操作示例
Jun 13 #Javascript
You might like
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
最佳JS代码编写的14条技巧
2011/01/09 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
Vue响应式原理详解
2017/04/18 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
使用python实现扫描端口示例
2014/03/29 Python
python实现发送邮件及附件功能
2021/03/02 Python
Python实现购物车购物小程序
2018/04/18 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
Django实现内容缓存实例方法
2020/06/30 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
新闻记者实习自我鉴定
2013/09/19 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
SQL SERVER触发器详解
2022/02/24 SQL Server
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs