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

最新推荐文章于 2024-03-01 16:39:02 发布

宝华的小岛

最新推荐文章于 2024-03-01 16:39:02 发布

阅读量4.7k

点赞数

分类专栏：架构 HTML5 vue 文章标签： vue 异步请求架构封装

本文链接：https://blog.csdn.net/xxkalychen/article/details/78664977

版权

HTML5 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

架构

7 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

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

        }
    }
})

四、运行结果

宝华的小岛

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue微型架构:requestBody网络请求的模式与自定义协议的封装

如果我们使用vue来构架前端项目，我为自己设计了这样的一个小型架构，参考上一遍文章：《Jquery微型架构:requestBody网络请求的模式与自定义协议的封装》，在次基础上做了一些改变。一、首先是程序架构其中包含jquery和vue两个外部包。需要下载导入。二、页面文件login.html文件内容 login
复制链接

扫一扫