版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xxkalychen/article/details/78664977
如果我们使用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);
}
}
})
四、运行结果