首頁 > 其他

springMVC+Thymeleaf+VUE2後台向前台傳值方式__springMVC

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1、@ModelAttribute

功能，註冊以及別名，如@ModelAttribute("testData") Usertest testData，意思是將Usertest 對象註冊一下，並且前台訪問的別名為testData

後台用法： 

//傳遞參數@ModelAttributetestData.setUsename("測試@ModelAttribute擷取");
thymeleaf 頁面擷取： 
@ModelAttribute testData : <div th:text="${testData.usename}"></div>  <br/>
thymeleaf js擷取 
var temp3 = [[${testData.usename}]]; //傳遞參數@ModelAttributealert("-----傳遞參數@ModelAttribute-----:"+temp3);
2、 Model
類似一個map集合，將後台資料放入map集合中，傳遞給前台，跟struts中寫map一樣，只不過這裡固定了類型叫Model，前台跟struts的map不一樣了，到達前台時給拆分了，比如我放入一個aa，前台不是map.aa，而且直接aa

後台用法： 

//傳遞參數Modelmodel.addAttribute("modelData", "測試model擷取");
前台用法： 

傳遞參數Model : <div th:text="${modelData}"></div><br/>
js擷取： 
alert("-----傳遞參數HttpServletRequest:"+temp1);var temp2 = [[${modelData}]]; //傳遞參數Model
3、 HttpServletRequest
這個常用，放入方法的輸入參數中

後台用法： 

//傳遞參數HttpServletRequestrequest.setAttribute("requestTestData", "測試request資料");
thymeleaf頁面用法： 
傳遞參數HttpServletRequest : <div th:text="${requestTestData}"></div><br/>
thymeleaf js用法： 

var temp1 = [[${requestTestData}]]; //傳遞參數HttpServletRequestalert("-----傳遞參數HttpServletRequest:"+temp1);




demo： 

/** * 初始化方法，這裡預設不查詢資料 * @param dc * @return */@RequestMapping({ "/" })//跳轉頁面不需要@responseBodypublic String init(@ModelAttribute("responseData") DataCenter dc,@ModelAttribute("testData") Usertest testData,Model model,HttpServletRequest request) {dataWrap.getPageInfo().setRowOfPage(15);//傳遞參數@ModelAttributetestData.setUsename("測試@ModelAttribute擷取");//傳遞參數Modelmodel.addAttribute("modelData", "測試model擷取");//傳遞參數HttpServletRequestrequest.setAttribute("requestTestData", "測試request資料");//設定參數String query_Date = "2018-02-05 00:00:00";model.addAttribute("query_Date", query_Date);//擷取查詢條件裡的交易月份，由於擷取到的是2018-01-25 00:00:00 格式 需要轉化為201801 故作此處理QueryParamList paramQueryParamList = new QueryParamList();    paramQueryParamList.addParam("gdYjysbmJyyf","201802");return "gd/yjydlsb.html";}

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"><head><template th:substituteby="framework/pageset.html"></template></head><body><div id="app" view>@ModelAttribute testData : <div th:text="${testData.usename}"></div>  <br/>傳遞參數Model : ${modelData} [[${modelData}]]<div th:text="${modelData}"></div><br/>傳遞參數HttpServletRequest : <div th:text="${requestTestData}"></div><br/></div><script th:inline="javascript">var dealFlag = "1";var vm = new Vue({el : "#app",data : {accountCode:"",    begintime:"",    endtime:"",    ipAddress:"",    onlineFlag:""},mounted : function(){//頁面載入完成後執行myTable.setData(response.getAjaxDataWrap("dataWrap"));$("#dataTotal").html("請選擇交易月份");//設定時間var s =[[${query_Date}]];s = s.replace(/-/g,"/");var date = new Date(s );this.begintime=date;//接收參數var temp1 = [[${requestTestData}]]; //傳遞參數HttpServletRequestalert("-----傳遞參數HttpServletRequest:"+temp1);var temp2 = [[${modelData}]]; //傳遞參數Modelalert("傳遞參數Model-----:"+temp2);var temp3 = [[${testData.usename}]]; //傳遞參數@ModelAttributealert("-----傳遞參數@ModelAttribute-----:"+temp3);},methods : {query: function(){},report: function(){}}});function nextpage(){vm.query();}</script></body></html>


本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More