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

来源：互联网发布：淘宝举报假冒品牌编辑：程序博客网时间：2024/05/17 21:53

如果我们使用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的语法进行改写

// 把对象转换为jsonvar 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);        }    }})

四、运行结果

阅读全文

0 0