后台使用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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
jQuery 中DOM 操作详解
Jan 13 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 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读取超大文件的实例代码
2012/04/01 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
flask框架中的cookie和session使用
2021/01/31 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
德国PC硬件网站:CASEKING
2016/10/20 全球购物
最好的商品表达自己:Cafepress
2019/09/04 全球购物
期终自我鉴定
2014/02/17 职场文书
继承公证书样本
2014/04/04 职场文书
大学生工作自荐书
2014/06/16 职场文书
学生偷窃检讨书
2014/09/25 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python