一站式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="width: 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組件.

下載

鏈接：https://pan.baidu.com/s/18VEArcgZSJw_COHzesK-6w

提取碼：g4kk

一站式Web開發套件BeetleX.WebFamily

.Net 8.0 下的新RPC，IceRPC之試試的新玩法"打洞"

完美替代postman的軟件

Vue mockjs mock.js

關於遊戲付費的一點想法

我通過CKA和CKS啦！

《最新出爐》系列入門篇-Python+Playwright自動化測試-42-強大的可視化追蹤利器Trace Viewer

大數據怎麼學？對大數據開發領域及崗位的詳細解讀，完整理解大數據開發領域技術體系

一站式Web開發套件BeetleX.WebFamily

EFCore之SQL擴展組件BeetleX.EFCore.Extension

使用BeetleX.Tracks對APM關係鏈埋點

BeetleX之webapi自定義響應內容

BeetleX之webapi使用入門

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結