后臺(tái)使用freeMarker和前端使用vue的方法及遇到的問題
一：freeMarker的使用
1：java后臺(tái)使用freeMarker是通過Model，將值傳給前端：
如：
@Controller
public class MobileNewsFreeMarkerController {
@RequestMapping("page/test")
public String Test(Model model,HttpServletRequest request){
//獲取項(xiàng)目路徑
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+""+request.getContextPath()+"/";
//將頁(yè)面路徑通過model傳給前臺(tái)
model.addAttribute("basePath", basePath);
//通過HttpServletRequest 獲取url中的值，如code值
String code = request.getParameter("code");
//將獲取的code參數(shù)傳給前臺(tái)
model.addAttribute("code ", code );
//頁(yè)面跳轉(zhuǎn)
return "page/test";
}
}
2：前端頁(yè)面獲取后臺(tái)傳輸?shù)闹担╢reeMarker傳輸?shù)闹抵荒茉趆tml頁(yè)面獲?。?/p>
注：這里是結(jié)合vue
第一步：在js中定義vue的相關(guān)參數(shù)：
var vm = new Vue({
el: '#rrapp',
data: {
basePath:"", //項(xiàng)目路徑
code : "", // code參數(shù)
},
..........（vue后面內(nèi)容省略）
第二步：再在頁(yè)面接收后臺(tái)傳輸?shù)闹?/p>
<head>
<script type="text/javascript">
$(document).ready(function() {
<#if basePath??>
vm.basePath="${basePath}";
</#if>
<#if userId??>
vm.code ="${code }";
</#if>
});
</script>
</head>
二：使用中主要遇到的問題
1：Vue存在調(diào)用的先后順序，雖然html頁(yè)面將后臺(tái)傳輸?shù)闹蹈督ovue的data中的參數(shù)，但是在mounted中是無(wú)法使用的時(shí)候獲取的還是創(chuàng)建的vue的時(shí)候data中賦的值，并不會(huì)使用html賦的值：
如：
var vm = new Vue({
el: '#rrapp',
data: {
basePath: "",
code :"",
},
mounted: function () {
var _this = this;
console.log(_this.basePath);
//輸出的還是：""，并不會(huì)輸出html賦的值，所有在這里無(wú)法使用
}
2：但是在vue中methods內(nèi)的方法是可以直接使用的；初始化如果需要html中傳輸?shù)膮?shù)，可以使用以下方法：
$(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;
//進(jìn)行初始化業(yè)務(wù)操作！
},
}
總結(jié)
以上所述是小編給大家介紹的后臺(tái)使用freeMarker和前端使用vue的方法及遇到的問題，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
VUE中的export default和export使用方法解析
export default和export都能導(dǎo)出一個(gè)模塊里面的常量，函數(shù)，文件，模塊等，在其它文件或模塊中通過import來導(dǎo)入常量，函數(shù)，文件或模塊。但是，在一個(gè)文件或模塊中export,import可以有多個(gè)，export default卻只能有一個(gè)。2022-12-12
vue實(shí)現(xiàn)動(dòng)態(tài)路由的詳細(xì)代碼示例
動(dòng)態(tài)路由,動(dòng)態(tài)即不是寫死的,是可變的,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由的詳細(xì)代碼示例,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
vue2 使用@vue/composition-api依賴包 編譯、打包各種報(bào)錯(cuò)問題分析
由于package.json 文件中 vue、vue-template-compiler 版本號(hào)前面 多了個(gè) ^ 導(dǎo)致實(shí)際導(dǎo)入時(shí)，node_module中的 vue 版本可能被升級(jí)為 2.7.x，這篇文章主要介紹了vue2 使用@vue/composition-api依賴包 編譯、打包各種報(bào)錯(cuò)問題分析,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue?background-image?不顯示問題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue 按鍵修飾符的相關(guān)資料，vue中新增按鍵修飾符和系統(tǒng)修飾符來處理類似的事件，具體內(nèi)容詳情大家參考下本文2018-05-05
antd vue 刷新保留當(dāng)前頁(yè)面路由,保留選中菜單,保留menu選中操作
這篇文章主要介紹了antd vue 刷新保留當(dāng)前頁(yè)面路由,保留選中菜單,保留menu選中操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
部署vue+Springboot前后端分離項(xiàng)目的步驟實(shí)現(xiàn)
這篇文章主要介紹了部署vue+Springboot前后端分離項(xiàng)目的步驟實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
基于Vue實(shí)現(xiàn)人民幣小寫轉(zhuǎn)為大寫功能
在金融類應(yīng)用中,經(jīng)常需要將金額從小寫數(shù)字轉(zhuǎn)換為大寫形式,這種轉(zhuǎn)換主要用于正式票據(jù)、合同等場(chǎng)合,以增加文本的專業(yè)性和可讀性,本文將詳細(xì)介紹如何在Vue.js項(xiàng)目中實(shí)現(xiàn)這一功能,并提供多個(gè)示例和詳細(xì)的代碼說明,需要的朋友可以參考下2024-09-09
vue如何在vue.config.js文件中導(dǎo)入模塊
這篇文章主要介紹了vue如何在vue.config.js文件中導(dǎo)入模塊問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue+FormData+axios實(shí)現(xiàn)圖片上傳功能的項(xiàng)目實(shí)戰(zhàn)
本文主要介紹了Vue+FormData+axios實(shí)現(xiàn)圖片上傳功能的項(xiàng)目實(shí)戰(zhàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06