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

下載

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

提取碼：g4kk 


Tags:

VirMach 便宜 VPS

QNews

QNews