后台使用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 prototype截取字符串函数
Apr 01 Javascript
js 数据类型转换总结笔记
Jan 17 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
js实现限定范围拖拽的示例
Oct 26 Javascript
cypress测试本地web应用
Jun 01 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
如何选购合适的收音机
2021/03/01 无线电
php stream_get_meta_data返回值
2013/09/29 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
javascript引导程序
2008/10/26 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
民政局个人整改措施
2014/09/24 职场文书
工作简历自我评价
2015/03/11 职场文书
靠谱准确的求职信
2019/04/02 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python
OpenCV实现普通阈值
2021/11/17 Java/Android