后台使用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 相关文章推荐
JavaScript类和继承 constructor属性
Mar 04 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
JavaScript 数组去重详解
Sep 15 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数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
php实现websocket实时消息推送
2018/03/30 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
python版本的读写锁操作方法
2016/04/25 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
取保候审保证书
2014/04/30 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
逃课检讨书
2015/01/26 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
单位更名证明
2015/06/18 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers