您的位置：首页 > 理论基础 > 计算机网络

Vue微型架构:requestBody网络请求的模式与自定义协议的封装

2017-11-29 14:40 483 查看

如果我们使用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);

}
}
})

四、运行结果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue 异步请求架构封装

相关文章推荐

新的分享

章节导航