SpringMVC+Thymeleaf+VUE 2バックグラウンドからフロントへの値伝達方式
4043 ワード
1、@ModelAttribute
@ModelAttribute(「testData」)Usertest testDataなどの機能、登録、別名.これは、Usertestオブジェクトを登録し、フロントでアクセスする別名をtestDataという意味です.
バックグラウンドの使用方法:
thymeleafページの取得:
2、
Model
1つのmapの集合のように、バックグラウンドのデータをmapの集合の中に入れて、フロントに渡して、strutsの中でmapを書くのと同じですが、ここにはモデルというタイプが固定されています.フロントはstrutsのmapとは違います.フロントに着いたときに分割されました.例えば、私はaaを入れて、フロントはmapではありません.aa、しかも直接aa
バックグラウンドの使用方法:
3、
HttpServletRequest
このよく使われる、メソッドの入力パラメータに入れる
バックグラウンドの使用方法:
thymeleafページの使い方:
demo:
@ModelAttribute(「testData」)Usertest testDataなどの機能、登録、別名.これは、Usertestオブジェクトを登録し、フロントでアクセスする別名をtestDataという意味です.
バックグラウンドの使用方法:
// @ModelAttribute
testData.setUsename(" @ModelAttribute ");
thymeleafページの取得:
thymeleaf js获取@ModelAttribute testData :
var temp3 = [[${testData.usename}]]; // @ModelAttribute
alert("----- @ModelAttribute-----:"+temp3);
2、
Model
1つのmapの集合のように、バックグラウンドのデータをmapの集合の中に入れて、フロントに渡して、strutsの中でmapを書くのと同じですが、ここにはモデルというタイプが固定されています.フロントはstrutsのmapとは違います.フロントに着いたときに分割されました.例えば、私はaaを入れて、フロントはmapではありません.aa、しかも直接aa
バックグラウンドの使用方法:
// Model
model.addAttribute("modelData", " model ");
フロントの使い方:js获取:Model :
alert("----- HttpServletRequest:"+temp1);
var temp2 = [[${modelData}]]; // Model
3、
HttpServletRequest
このよく使われる、メソッドの入力パラメータに入れる
バックグラウンドの使用方法:
// HttpServletRequest
request.setAttribute("requestTestData", " request ");
thymeleafページの使い方:
thymeleaf js用法:HttpServletRequest :
var temp1 = [[${requestTestData}]]; // HttpServletRequest
alert("----- HttpServletRequest:"+temp1);
demo:
/**
* ,
* @param dc
* @return
*/
@RequestMapping({ "/" })
// @responseBody
public String init(@ModelAttribute("responseData") DataCenter dc,
@ModelAttribute("testData") Usertest testData,
Model model,
HttpServletRequest request) {
dataWrap.getPageInfo().setRowOfPage(15);
// @ModelAttribute
testData.setUsename(" @ModelAttribute ");
// Model
model.addAttribute("modelData", " model ");
// HttpServletRequest
request.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";
}
@ModelAttribute testData :
Model : ${modelData} [[${modelData}]]
HttpServletRequest :
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}]]; // HttpServletRequest
alert("----- HttpServletRequest:"+temp1);
var temp2 = [[${modelData}]]; // Model
alert(" Model-----:"+temp2);
var temp3 = [[${testData.usename}]]; // @ModelAttribute
alert("----- @ModelAttribute-----:"+temp3);
},
methods : {
query: function(){
},
report: function(){
}
}
});
function nextpage(){
vm.query();
}