??????? BeetleX.WebFamily1.0在集成vue+element+axios的基礎上添加應用頁、窗體布局和登陸驗證等功能。通過以上功能開發Web SPA應用時只需要編寫vue控件和配置菜單即可實現應用開發。

使用

????????創建一個.net控制臺項目，然后通過Nuget引入BeetleX.WebFamily1.0組件，并在Main方法中編寫以下代碼:

static void Main(string[] args) {WebHost host = new WebHost();//注冊當前程序集host.RegisterController<Program>().Setting(o =>{o.SetDebug();o.Port = 80;o.LogLevel = EventArgs.LogType.Error;o.LogToConsole = true;}).Initialize(s =>{s.Vue().Debug();}).Run(); }

然后運行這個程序即可在瀏覽器上訪問，BeetleX.WebFamily在沒有任何配置的情況下訪問頁面如下：

組件默認的開始頁面，接下來的工作就可以通過編寫VUE組件和配置菜單來實現自己的系統功能。

VUE擴展函數

????????為了更好地應對SPA開發，組件針對Vue擴展了一系列的方法用于開發的需要；這些方法可以在所有自定義的Vue組件中使用。

//打開主頁面窗體 $toHome() //告訴應用登陸的用戶，一般用于自定義登陸時，用于通訊應用登陸成功 $userLogin(name) //重新加載Web信息，包括菜單和登陸信息等 $loadWebInfo() //關閉指定id的窗體 $closeWindow(id) //打開或激活窗體，參數分別是:唯一于標識，標題，對應VUE的組件名稱和傳入的數據。 $openWindow(id,title,model,data) //獲取當前打的所有窗體 $getWindows() //激活對應菜單id的窗體 $openMenu(id) //獲取當前登陸的用戶信息，包括有：用戶名和角色 $getUser() //注冊窗體大小變化通知 $addResize(callback) //廣播窗體大小通知 $resizeWindow() //ajax的post請求 $post(url,data) //ajax的get請求 $get(url,data) //ajax的put請求 $put(url,data)

通過以上方法組件可以簡單地和應用進行一些布局交互操作。

添加首頁/菜單

????????組件默認情況下是一個沒有內容的主頁面，為了滿足的需求需要配置對應的默認頁面和菜單。可以在Initialize方法里面添加以下代碼進行一個應用初始化。

//設置應用標題 WebHost.Title = "Northwind"; //調協頭部顯示的Vue組的名稱 WebHost.HeaderModel = "myheader"; //是否需要登陸，默認為false，當設置true時應用獲取不到登陸狀態會自彈出登陸 WebHost.MustLogin = true; //設置應用對應首頁的vue控件 WebHost.HomeModel = "home"; //獲取菜單，方法參數分別是：當前用戶名，角色和http上下文 //菜單支持多層，根本需要添加對應的Child即可 WebHost.GetMenus = (user, role, context) => {List<Menu> menus = new List<Menu>();var item = new Menu();item.ID?=?"home";//菜單IDitem.Name?=?"主頁";//標題item.Img?=?"/images/home.png";//菜單圖標，可缺省；item.Model?=?"home";//打開對應的vue組件。menus.Add(item);item = new Menu();item.ID = "product";item.Name = "產品";item.Img = "/images/product.png";item.Model = "products";menus.Add(item);item = new Menu();item.ID = "order";item.Name = "訂單";item.Img = "/images/order.png";item.Model = "orders";menus.Add(item);item = new Menu();item.ID = "customer";item.Name = "客戶";item.Img = "/images/customer.png";item.Model = "customers";menus.Add(item);item = new Menu();item.ID = "employee";item.Name = "雇員";item.Img = "/images/employee.png";item.Model = "employees";menus.Add(item);return Task.FromResult(menus); };

通過以上配置重啟程序就可以得到一個新的應用效果。

設置自定義頭

????????組件預留了一個頭部位置，用來制定自己的應用頭部信息，如：登陸用戶，消息和快捷按鈕等內容。

WebHost.HeaderModel = "myheader";

可以設置HeaderModel屬性用于替換頁面頭部信息，然后通過Vue擴展函數進行頁面相關操作，以下是示例頭部的實現。

<div><h4>BeetleX Webfamily Northwind示例</h4><a style="float:right;position:absolute;margin-top:-40px;margin-left:350px;cursor:pointer;" v-if="$getUser().name" @click="$userSignout()">退出</a> </div>

登陸/JWT配置

????????有很多應用需要訪問需要驗證登陸，組件默認也集成這一功能；當使用這些功能的時候需要開啟JWT驗證和設置必須登陸訪問。

host.UseJWT()//訪問webapi時必須進行驗證控制 //開啟登陸，當應用檢測到沒有用戶信息時自動彈出登陸窗體 WebHost.MustLogin?=?true;

當開啟以上配置后訪問應用會彈出以下登陸框進行登陸驗證。

組件默認所有用戶名都可以有效登陸并不加以控制，可以通過添加以下委托來實現登陸驗證的邏輯處理。

WebHost.LoginHandler = (user, pwd, context) => {//寫入cookiecontext.SetJwtToken(user, "user", 60 * 60);return Task.CompletedTask; };

可以通過以上方法進行驗證，驗證錯誤拋出異常即可，如果成則通過context寫入當前登陸信息。

????????只要開啟了JWT那所有請求的webapi方法都需要驗證才能有效請求，如果不希望某些方法不進行驗證可以在控制器或方法中打上以下標簽。

?[AuthMark(AuthMarkType.NoValidation)]public?class?Home{}

????????如果登陸框功能不滿足要求也是可以自定義登陸窗體，只要編寫一個登陸組件如下：

<div><el-form size="mini" :model="record" label-width="120px" ref="dataform"><el-row><el-col :span="24"><el-form-item label="用戶名" prop="Name" :rules="Name_rules"><el-input size="mini" v-model="record.Name"></el-input></el-form-item></el-col></el-row><el-row><el-col :span="24"><el-form-item label="密碼" prop="Password" :rules="Password_rules"><el-input size="mini" v-model="record.Password" show-password></el-input></el-form-item></el-col></el-row><el-row><el-col span="24" style="text-align:right"><el-button size="mini" style="padding-left:10px; padding-right:10px;" @click="submitForm">登陸</el-button></el-col></el-row></el-form> </div> <script>{props: [],data(){return {Name_rules: [{ required: true, message: '用戶名不能為空！', trigger: 'blur' },],Password_rules: [{ required: true, message: '密碼不能為空！', trigger: 'blur' },],record: {Name: null,Password: null,}};},methods:?{submitForm() {this.$refs['dataform'].validate((valid) => {if (valid) {this.$post('/website/login', this.record).then(r => {this.$userLogin(this.record.Name);});}});},resetForm() {this.$refs['dataform'].resetFields();}},mounted(){}} </script>

在登陸成功的方法中調用this.$userLogin(this.record.Name);通知應用；最后把這個組件配置即可：

WebHost.LoginModel = "mylogin";

組件定義

????????使用組件后只需要專注于功能組件編寫，組件支持*.vue文件格式基本和Vue CLI一樣，微小的差別就是在這里無須import引用組件。所有vue文件必須編寫在項目的views目錄，引用組件的名稱默認使用文件名稱.

以下是員工信息修改組件：

<div><auto-form v-model="data" ref="editor" size="mini" style="width:600px;margin:auto;" @command="onSave"></auto-form> </div> <script>export default {props: ['token', 'winid'],data() {return {data: {}};},methods: {onSave() {this.$confirmMsg('是否要保存數據?', () => {this.$closeWindow(this.winid);});},},mounted() {var edit = new autoData();edit.addText("LastName", "LastName", true).require('The value cannot be null');edit.addText("FirstName", "FirstName", true).require('The value cannot be null');edit.addText("Title", "Title", true).require('The value cannot be null');edit.addText("TitleOfCourtesy", "TitleOfCourtesy", true).require('The value cannot be null');edit.addDate("BirthDate", "BirthDate", true).require('The value cannot be null');;edit.addDate("HireDate", "HireDate", true).require('The value cannot be null');;edit.addText("Address", "Address", true);edit.addText("City", "City", true);edit.addText("PostalCode", "PostalCode", true);edit.addText("Country", "Country", true);var f = edit.addSelect("ReportsTo", "ReportsTo", true);f.dataurl = '/EmployeesSelectOptions';f.nulloption = true;edit.addButton("save", "保存");if (this.token) {edit.setValue(this.token);}edit.bindForm(this.$refs.editor);},} </script>

可以在員工列表中打開它

this.$openWindow('雇員'?+?e.data.Name,?'(雇員)'?+?e.data.Name,'employeeinfo',??e.data);

組件定義了兩個屬性，分別是token和winid;只要通過$openWindow打開的都能接收到這兩個信息，前者是打開窗體傳進來的數據，后者是對應窗體ID；可以通過this.$closeWindow(this.winid);關閉自己所在窗體。

數據請求

????????組件集成了axios進行ajax訪問，為了讓調用更方便組件提供了以下簡化方法調用。

//ajax的post請求 $post(url,data) //ajax的get請求 $get(url,data) //ajax的put請求 $put(url,data)

以下是一個簡單的登陸調用過程

this.$post('/website/login', this.record).then(r => {this.$userLogin(this.record.Name); });

總結

????????通過引入組件可以快帶地進行Web SPA應用開發，組件提供基礎布局、安全控制和數據訪問的基礎功能，讓你可以更專注于業務功能的實現。雖然集成功能并不豐富，但足以幫你解決主要的繁瑣工作。再結合：

http://vueeditor.beetlex.io/ 數據界面在線生成工具更加讓你事半功倍。

通過以下地址下載完整示例：

https://github.com/beetlex-io/BeetleX-Samples

有使用上的問題可以提交到:

https://github.com/beetlex-io/FastHttpApi/issues

BeetleX

開源跨平臺通訊框架(支持TLS)
提供高性能服務和大數據處理解決方案

https://beetlex.io

總結

以上是生活随笔為你收集整理的BeetleX.WebFamily针对Web SPA应用的改进的全部內容，希望文章能夠幫你解決所遇到的問題。

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