如果我們使用vue來構架前端項目，我爲自己設計了這樣的一個小型架構，參考上一遍文章：《Jquery微型架構:requestBody網絡請求的模式與自定義協議的封裝》，在次基礎上做了一些改變。
一、 首先是程序架構
其中包含jquery和vue兩個外部包。需要下載導入。
二、頁面文件login.html文件內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<script src="../js/vue.min.js"></script>
<script src="../js/vue-resource.js"></script>
</head>
<body>
<div id="app">
<table>
<tr>
<td>用戶名：</td>
<td><input v-model="username"/></td>
</tr>
<tr>
<td>密碼：</td>
<td><input v-model="password"/></td>
</tr>
<tr>
<td colspan="2">
<button v-on:click="login" style="width: 100%">登錄</button>
</td>
</tr>
</table>
<p>{{info}}</p>
</div>
</body>
<script src="../js/login.js"></script>
</html>三、js文件
其中properties.js、beans.js、jsonutils.ja文件和上一篇文章所講一致。
1.requestutils.js文件有所改變，要按照vue的語法進行改寫
// 把對象轉換爲json
var RequestBodyAjax = function (url, requestBody, callback) {
Vue.http({
url: url,
method: "post",
body: requestBody,
contentType: 'application/json',
}).then(function (response) {
//var result = JSON.parse(response.data);
console.debug(response.data);
callback(response.data);
})
}2.關鍵的login.js也要按照vue的標準進行改寫
//爲頁面引入實體類文件
document.write("<script type='text/javascript' src='../js/properties.js'></script>")
document.write("<script type='text/javascript' src='../js/beans.js'></script>")
document.write("<script type='text/javascript' src='../js/jsonutils.js'></script>")
document.write("<script type='text/javascript' src='../js/requestutils.js'></script>")
var mVue = new Vue({
el: "#app",
data: {
username: "Chris",//用戶名
password: "gk123456",//密碼
info: ""//顯示調試信息
},
methods: {
login: function () {
// 獲取輸入的參數
var userName = this.username;
var password = this.password;
// 創建參數對象
var params = new LoginParams();
params.setName(userName);
params.setPassword(password);
// 創建請求體
var loginRequest = new WebRequest(params);
loginRequest.setToken("ttyyuuii");
loginRequest.setVer("1.0");
// 構建requestBody
var requestBody = ToJson(loginRequest);
// 創建請求結果回調函數
var callback = function (data) {
mVue.info = data;
}
// 發起異步請求
var url = baseUrl + 'getUser';
new RequestBodyAjax(url, requestBody, callback);
}
}
})四、運行結果
