怎么在后臺使用freeMarker和前端使用vue的方法-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關怎么在后臺使用freeMarker和前端使用vue的方法的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)是一家專注于成都做網(wǎng)站、成都網(wǎng)站設計與策劃設計,林周網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設10余年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:林周等地區(qū)。林周做網(wǎng)站價格咨詢:18980820575為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫,Vue允許可以將一個網(wǎng)頁分割成可復用的組件,每個組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網(wǎng)頁中相應的地方,所以越來越多的前端開發(fā)者使用vue。

一: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參數(shù)傳給前臺
    model.addAttribute("code ", code );
    //頁面跳轉(zhuǎn)
    return "page/test";
  }
}

2:前端頁面獲取后臺傳輸?shù)闹担╢reeMarker傳輸?shù)闹抵荒茉趆tml頁面獲取)

注:這里是結合vue

第一步:在js中定義vue的相關參數(shù):

var vm = new Vue({
  el: '#rrapp',
  data: {
    basePath:"", //項目路徑
    code : "", // code參數(shù)
  },
..........(vue后面內(nè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頁面將后臺傳輸?shù)闹蹈督ovue的data中的參數(shù),但是在mounted中是無法使用的時候獲取的還是創(chuàng)建的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內(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;
    //進行初始化業(yè)務操作!
  },
}

感謝各位的閱讀!關于“怎么在后臺使用freeMarker和前端使用vue的方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

本文名稱:怎么在后臺使用freeMarker和前端使用vue的方法-創(chuàng)新互聯(lián)
瀏覽地址:http://www.kartarina.com/article42/dhgohc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設計動態(tài)網(wǎng)站外貿(mào)建站標簽優(yōu)化網(wǎng)站建設做網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)站建設公司
主站蜘蛛池模板: 精品人妻无码区在线视频| 亚洲av无码不卡久久| 日韩久久无码免费毛片软件| 国产日产欧洲无码视频| 亚洲国产精品成人精品无码区 | 久久无码AV一区二区三区| 人妻丰满熟妇AV无码区免| 亚洲VA中文字幕无码毛片| 无码av专区丝袜专区| 精品深夜AV无码一区二区老年| 东京热人妻无码人av| (无码视频)在线观看| 亚洲AV无码乱码在线观看代蜜桃 | 亚洲youwu永久无码精品| 亚洲一区二区三区AV无码| 亚洲AV永久无码天堂影院| 人禽无码视频在线观看| 亚洲日韩精品无码一区二区三区 | 日韩放荡少妇无码视频| 无码精品久久久久久人妻中字| aⅴ一区二区三区无卡无码 | 亚洲AV无码成人精品区蜜桃| 国产成人无码精品一区不卡| 亚洲欧洲av综合色无码| 精品三级AV无码一区| 免费精品无码AV片在线观看| 无码人妻精品一区二区三区99仓本| 久久久久久av无码免费看大片| 无码视频免费一区二三区| 精品人妻系列无码人妻漫画| 精品久久久久久中文字幕无码 | 色噜噜综合亚洲av中文无码 | 国产av激情无码久久| 无码国产精品一区二区免费式影视 | 无码任你躁久久久久久老妇 | 国内精品人妻无码久久久影院导航 | av中文无码乱人伦在线观看| 夫妻免费无码V看片| 无码无套少妇毛多69XXX| 国产精品无码亚洲精品2021| av色欲无码人妻中文字幕 |