一站式Web开发套件BeetleX.WebFamily

 

        BeetleX.WebFamily是一款前后端分离的Web开发套件，但它并不依赖于nodejs/npm/webpack等相关工具；而使用自身实现的方式来完成前后端分离的Web应用开发；套件以组件的方式发布，只需要在项目引用相关组件即可实现前后端分离开发，开发出来的项目可直接部署在装用.NetCore的Linux和Windows系统上。

        BeetleX.WebFamily整合了前后端两方面的应用技术；后端使用BeetlX.FastHttpApi作为基础服务支持http/https/ws/wss服务，集成了JWT验证方案可以实现相关服务安全性调用；在数据库访问上集成了EFCore组件，外置缓冲上集成了BeetleX.Redis。前端则使用了Vue,默认集成了ElementUI作为基UI库；在Ajax上集成了axios库，为了方便和BeetleX通讯同样集成了基于axios扩展的BeetleXjs实现无缝兼容http/ws的控制器调用。

创建服务

        首先需要创建一个控制台项目(winform也可以，作为服务的宿主)，创建项目后引用BeetleX.WebFamily组件，并在Main函数定义以下代码.

    WebHost host = new WebHost();
    host.Setting(o =>
    {
        o.SetDebug();
        o.Port = 80;
        o.LogLevel = EventArgs.LogType.Info;
        o.LogToConsole = true;
    })
    .Run();

以上是在80上启用一个http/websocket服务，接下来在项目中增加一个views目录，然后添加index.html文件。

接下来就可以运行它并用浏览器访问它了。

 

这样迈出了使用BeetleX.WebFamily编写web应用的第一步，接下来就是WebApi,EFCore和VUE等相关的使用。

API编写

        BeetleX.WebFamily的服务由BeetleX.FastHttpApi提供，在编写Webappi需要定义相关的控制器.

    [Controller]
    public class WebApiController
    {
        public object Hello()
        {
            return DateTime.Now;
        }
    }

以上是一个简单的Hello方法，访问路径是/Hello.在服务启动的时候需要注册一下它。

WebHost host = new WebHost();
host.RegisterController<WebApiController>()
.Setting(o =>
{
    o.SetDebug();
    o.Port = 80;
    o.LogLevel = EventArgs.LogType.Info;
    o.LogToConsole = true;
})
.Run();

通过WebHost.RegisterController方法进行注册控制器，该方法在注册这个类的同时也把相关程序集中所有控制器也注册完成;注册完成即可访问这个方法.

JWT验证

        组件默认是开始JWT验证处理，在这情况所有接口的访问都是没有限制的；可以以下方式开启JWT

WebHost host = new WebHost();
host.RegisterController<WebApiController>()
.Setting(o =>
{
    o.SetDebug();
    o.Port = 80;
    o.LogLevel = EventArgs.LogType.Info;
    o.LogToConsole = true;
})
.UseJWT()
.Run();

开启了JWT后，所有方法在没有凭证的情况都会返回401错误。

 如果希望某些控制器或方法有接受验证处理，可以通过AuthMark来实现

    [Controller]
    [AuthMark(AuthMarkType.NoValidation)]
    public class WebApiController
    {
        public object Hello()
        {
            return DateTime.Now;
        }
    }

以上标记WebApiController的所有方法不用验证即可访问。针对JWT的使用可以查看BeetleX之webapi验证插件JWT集成

数据库访问

        BeetleX.WebFamily默认集成EFCore作为数据库访问组件，可以通过以下代码加入数据库。

static void Main(string[] args)
{
    WebHost host = new WebHost();
    host.RegisterController<WebApiController>()
    .Setting(o =>
    {
        o.SetDebug();
        o.Port = 80;
        o.LogLevel = EventArgs.LogType.Info;
        o.LogToConsole = true;
    })
    .UseJWT()
    .UseEFCore<NorthwindContext>()
    .Run();
}

以上是引用了NorthwindContext数据库，实际可以根据需要来引用多个数据库。当开启了数据库后，控制器方法即可定义相关数据库对象来进行数据库访问。

public DBObjectList<Customer> Customers(EFCoreDB<NorthwindContext> db)
{
    return (db.DBContext, "select * from customers");
}

可以通过EFCoreDB<T>来引用数据库，由于组件需要管控相关参数的一些生合周期和信息所以无法直接用DBContext来处理。

BeetleX.EFCore.Extension之SQL对象详解

Redis访问

        在高并发服务中往往需要缓存作为其并发的支撑点，BeetleX.WebFamily默认集成了BeetleX.Redis作为其内置的缓存服务。可以通过以下方法开启Redis访问，首先定义一个对应需求的Redis对象

    public class NorthwindRedis : RedisDB
    {
        public NorthwindRedis() : base(0, new JsonFormater())
        {

        }
    }

接下来就可以在WebHost中使用它

WebHost host = new WebHost();
host.RegisterController<WebApiController>()
.Setting(o =>
{
    o.SetDebug();
    o.Port = 80;
    o.LogLevel = EventArgs.LogType.Info;
    o.LogToConsole = true;
})
.UseJWT()
.UseEFCore<NorthwindContext>()
.UseRedis<NorthwindRedis>(redis =>
    {
        var host = redis.Host.AddWriteHost("127.0.0.1");
        host.MaxConnections = 50;
    })
.Run();

给相关Redis库添加一个可写的服务地址，然后设置最大连接数是50。开启后就可以在控制器中方法定义相关参数了。

public async Task SetRedis(EFCoreDB<NorthwindContext> db, NorthwindRedis redis)
{
    var item = await db.DBContext.Customers.FirstAsync();
    await redis.Set(item.CustomerID, item);
}

public async Task<Customer> GetRedis(NorthwindRedis redis)
{
    var item = await redis.Get<Customer>("ALFKI");
    return item;
}

Vue使用

        在BeetleX.WebFamily的支持上无须使用nodejs/npm/webpack等相关工具即可编写Vue模块；组件默认嵌入了Vue,axios和element包，所以在开发过程中无须导入，如果需要其他则需要自行导入。为了方便修改刷后即得结果需要在服务启动时添加以下代码

WebHost host = new WebHost();
host.RegisterController<WebApiController>()
.Setting(o =>
{
    o.SetDebug();
    o.Port = 80;
    o.LogLevel = EventArgs.LogType.Info;
    o.LogToConsole = true;
})
.UseJWT()
.UseEFCore<NorthwindContext>()
.UseRedis<NorthwindRedis>(redis =>
{
    var host = redis.Host.AddWriteHost("127.0.0.1");
    host.MaxConnections = 50;
})
.Initialize(s =>
{
    //添加第三方css和javascript文件
    //s.GetWebFamily().AddCss("site.css");
    //s.GetWebFamily().Addscript("xxx.js");
    s.Vue().Debug();
}).Run();

通过Initialize方法里设置一下Vue.Debug(),这样确保程序在运行时修改模块文件也可以即时刷新查看。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>BeetleX.WebFamily</title>
    <link href="/css/beetlex.css" rel="stylesheet" />
    <script src="/js/beetlex.js"></script>
</head>
<body>
    <div id="app">
       <h1></h1>
    </div>
    <script>
        var page = new Vue({
            el: '#app',
            data: {
                title: 'BeetleX.WebFamily Vue',
            }
        });
</script>
</body>
</html>

在这里需要注意的是css和javascript引用，引用方式是固定的

<link href="/css/beetlex.css" rel="stylesheet" />
<script src="/js/beetlex.js"></script>

组件打包的css和 javascript通过这两个路径输出。

Vue组件

        作为一个模块化设计理念的组件，在实际应用更多是单页面集成模块为主；组件支持组件编写，编写方式和传统es6下有所不同，以下是mypanel.vue模块

<h1>
    {{title}}
</h1>
<script>
    {
        data(){
            return { title: 'BeetleX.WebFamily Vue module' }
        }
    }
</script>

其编写方法主要是以vuejs为主，组件分为两大块一块是html模块，另一块是则是以script的方式描述Vue组件信息。在index.html中引用组件:

<body>
    <div id="app">
        <mypanel></mypanel>
    </div>
    <script>
        var page = new Vue({
            el: '#app',
            data: {
            }
        });
</script>
</body>

 

使用element控件

        组件集成了ElementUI可以直接在组件中使用相关组件。下面实现一个customers.vue来显示客户信息。

<div>
    <el-table :data="getCustomers.result"
              style=" 100%" size="mini">
        <el-table-column prop="CustomerID"
                         label="CustomerID"
                         width="180">
        </el-table-column>
        <el-table-column prop="CompanyName"
                         label="CompanyName"
                         width="180">
        </el-table-column>
        <el-table-column prop="ContactName"
                         label="ContactName">
        </el-table-column>
        <el-table-column prop="ContactTitle"
                         label="ContactTitle">
        </el-table-column>
        <el-table-column prop="Country"
                         label="Country">
        </el-table-column>
        <el-table-column prop="Address"
                         label="Address">
        </el-table-column>
    </el-table>
</div>
<script>
    {
        data(){
            return {
                getCustomers: new beetlexAction("/Customers", null, []),
            };
        },
        methods: {

        },
        mounted(){
            this.getCustomers.get();
        }
    }
</script>

在这里并没有使用axios进行数据请求，而是使用在它基础上封装的beetlexjs功能。通过beetlexAction来定义一个请求，并在el-table上直接绑定对应的result对象。

<body>
    <div id="app">
        <customers></customers>
    </div>
    <script>
        var page = new Vue({
            el: '#app',
            data: {
            }
        });
</script>
</body>

更改一下页面引用customer组件.