Skip to content

vuejs和beetlexjs整合

Jump to bottom
Henry edited this page Oct 25, 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的使用。

  • 控制器代码
public object Login(string name, string pwd)
{
    if (name == "admin" && pwd == "123456")
        return true;
    return false;
}
  • Html代码
<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进行登陆后的处理。

数据查询

以下实现一个简单的雇员查询

  • 控制器代码
public object EmployeesSelect()
{
    return from a in DataHelper.Defalut.Employees select new { a.EmployeeID, Name = $"{a.FirstName} {a.LastName}" };
}
  • Html代码
<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();

多条件查询

以下是针对带雇员和客户条件的订单查询

  • 控制器代码
public object CustomersSelect()
{
    return from a in DataHelper.Defalut.Customers
            select new
            {
                a.CustomerID,
                Name = $"{a.CompanyName}"
            };
}

public object EmployeesSelect()
{
    return from a in DataHelper.Defalut.Employees select new { a.EmployeeID, Name = $"{a.FirstName} {a.LastName}" };
}

public object ListOrders(int employeeid, string customerid)
{
    return from a in DataHelper.Defalut.Orders
            where 
            (employeeid == 0 || a.EmployeeID == employeeid) && 
            (string.IsNullOrEmpty(customerid) || a.CustomerID == customerid)
            select a;
}
  • Html代码
<form class="form-inline">
    <div class="form-group form-group-sm">
        <label>Employee</label>
        <select v-model="listOrders.data.employeeid" class="form-control">
            <option value="0">All</option>
            <option v-for="item in employeeSelects.result" :value="item.EmployeeID">{{item.Name}}</option>
        </select>
    </div>
    <div class="form-group form-group-sm">
        <label>Customer</label>
        <select v-model="listOrders.data.customerid" class="form-control">
            <option value="">All</option>
            <option v-for="item in customerSelects.result" :value="item.CustomerID">{{item.Name}}</option>
        </select>
    </div>
    <button type="button" @click="listOrders.get()" class="btn btn-default">search</button>
</form>
<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>OrderID</th>
            <th>OrderDate</th>
            <th>ShipName</th>
            <th>ShipAddress</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(item,i) in listOrders.result">
            <th scope="row">{{i}}</th>
            <td>{{item.OrderID}}</td>
            <td>{{item.OrderDate}}</td>
            <td>{{item.ShipName}}</td>
            <td>{{item.ShipAddress}}</td>
        </tr>
    </tbody>
</table>
  • 脚本
var customersSelectcmd = new beetlexAction("/CustomersSelect");
var employeesSelectcmd = new beetlexAction("/EmployeesSelect");
var listOrderscmd = new beetlexAction("/ListOrders", { employeeid: 0, customerid: '' }, []);
var page = new Vue({
    el: '#page',
    data: {
        select: 'login',
        customerSelects: customersSelectcmd,
        employeeSelects: employeesSelectcmd,
        listOrders: listOrderscmd
    }
});
page.listOrders.get();
page.customerSelects.get();
page.employeeSelects.get();

开启websocket

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

beetlex.useWebsocket();

如果需要完整可运行代码可以访问 https://github.com/IKende/BeetleXjs/tree/master/Sample

Clone this wiki locally