Skip to content

vuejs和beetlexjs整合

Jump to bottom
Henry edited this page Oct 24, 2019 · 5 revisions

vue是当前比较流行的web应用开发框架，为了让FastHttpApi更好地和vue在数据交互上的整合所以封装了beetlexjs.其实很早之前就有一个针对FastHttpApi包装的js库，不过是基于jquery设计和vue整合也不太方便。于是这次重新使用axios扩展并更好地和vue结合，这扩展是beetlex4axios.js可以到https://github.com/IKende/BeetleXjs获取最新版本。

beetlexjs介绍

beetlexjs设计的目的是尽可能利用Vue的数据绑定功能来代替相关方法的编写，毕竟编写大量的ajax方法和设置返回值是一件比较麻烦的事情；所以beetlexjs把数据模型和ajax方法设计在一起，然后Vue在事件绑定中直接指定模型get或post方法即可。这样整体的脚本编写量会大大减轻，达到更简便的ajax调用。

引用

使用这个扩展需要先引用axios.js,由于以下介绍是基于vue所以相关引用如下:

    <script src="vue.js"></script>
    <script src="axios.js"></script>
    <script src="beetlex4axios.js"></script>

登陆实现

以下通过一个简单的登陆功能来体现vuejs和beetlexjs的使用。

<form class="form-horizontal">
    <div class="form-group  form-group-sm">
        <label for="inputEmail3" class="col-sm-2 control-label">Name</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" v-model="login.data.name" placeholder="name">
        </div>
    </div>
    <div class="form-group  form-group-sm">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" v-model="login.data.pwd" placeholder="Password">
        </div>
    </div>

    <div class="form-group  form-group-sm">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" @click="login.post()" class="btn btn-default">Sign in</button>
            <label v-if="login.result==true" style="color:forestgreen;">Success</label>
            <label v-if="login.result==false" style="color:red;">Wrong password</label>
        </div>
    </div>
</form>

以上是一个简单登陆的html模块，直接在登陆按钮中绑定了登陆事件，一般情况下都是绑定在vue的methods方法上，而这里直接绑定了login模型的post方法上；接下来看一下脚本代码

var logincmd = new beetlexAction("/Login", { name: '', pwd: '' });
var page = new Vue({
            el: '#page',
            data: {
                login: logincmd,
            }
  });

以上代码定义了一个login的beetlexAction,然后指定请求中径和相关数据，由于数据通过模型绑定，所以密码的变更会直接反映在这个模型上。beetlexAction经过包装，它默认提供了get和post的行为。以上示例只是通过更改ui来查看登陆的情况，如果需要进行登陆后的操作可以定义相关方法

        var logincmd = new beetlexAction("/Login", { name: '', pwd: '' });
        logincmd.callback = function (data) { };

这样你就可以在callback进行登陆后的处理。

数据查询

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>City</th>
            <th>Address</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(item,i) in listEmployee.result">
            <th scope="row">{{i}}</th>
            <td>{{item.FirstName}}</td>
            <td>{{item.LastName}}</td>
            <td>{{item.City}}</td>
            <td>{{item.Address}}</td>
        </tr>
    </tbody>
</table>
var listEmployeecmd = new beetlexAction("/ListEmployees");
var page = new Vue({
    el: '#page',
    data: {
        listEmployee: listEmployeecmd,
    }
});
page.listEmployee.get();

开启websocket

beetlexjs不仅仅提供ajax的http请求，还可以开启基于websocket请求；websocket请求的好处是可以并行同时发起多个请求包不像http那样只能串行。开启websocket非常简单只需发调用一个方法即可:

        beetlex.useWebsocket();
Clone this wiki locally