一站式Web開發套件BeetleX.WebFamily

beetlex發表於2020-10-29
Web套件

        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 

相關文章