??????? 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?

【BeetleX通訊框架代碼詳解】 【WebApi示例擴展】 BeetleX

開源跨平臺通訊框架(支持TLS)
輕松實現高性能:tcp、http、websocket、redis、rpc和網關等服務應用

https://beetlex.io

如果你想了解某方面的知識或文章可以把想法發送到

henryfan@msn.com|admin@beetlex.io

總結

以上是生活随笔為你收集整理的一站式Web开发套件BeetleX.WebFamily的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。