Vue微型架構:requestBody網路請求的模式與自定義協議的封裝
阿新 • • 發佈：2019-01-30
如果我們使用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); } } })
四、執行結果
