BeetleX使用bootstrap5開發SPA應用
在早期版本BeetleX.WebFamily只提供了vuejs+element的整合,由於element只適合PC管理應用開發相對於移動應用適配則沒這麼方便。在新版本元件集成了bootstrap5可以更好地適配移動Web應用;同時也集成了Fontawesome和bootstrapIcons,這樣在開發過程中使用字型圖示就更方便了。在開發時以上元件並不會打包到一起,而是根據實際需要選擇element或bootstrap作為當前應用的樣式主題,而基礎開發框架還是基於vuejs,ajax資料互動則使用axios。
使用
在使用之前還是選瞭解一下BeetleX.WebFamily是如何開發SPA應用,並有那些基礎功能BeetleX.WebFamily針對Web SPA應用的改進。第一步使用vs或vscode建立控臺專案,引用BeetleX.WebFamily後在main方法中新增以下程式碼:
class Program { static void Main(string[] args) { WebHost host = new WebHost(); host.RegisterController<Program>() .Setting(o => { o.SetDebug(); o.Port = 80; o.LogLevel = EventArgs.LogType.Info; o.LogToConsole = true; }) .UseFontawesome()//加入Fontawesome .UseBootstrap(PageStyle.Bootstrap)//設定使用bootstrap .Initialize((http, vue, resoure) => { vue.Debug(); }).Run(); } }
啟動專案後,可以從瀏覽器訪問得到以下結果:
以上是基於bootstrap的SPA應用預設主頁,當然這並不是你所需要的。
定義功能
接下來在Main方法修改SPA應用的內容,通過修改這些配置可以讓你馬上把主頁更換成實際應用的功能。
class Program { static void Main(string[] args) { //更改應用標題 WebHost.Title = "beetlex & bootstrap!"; //更新應用Logo WebHost.LogoImg = "/images/icons-hero.png"; //設定頭部元件 WebHost.HeaderModel = "custom-header"; //設定需要登陸 WebHost.MustLogin = true; //定義頁面的功能選單 WebHost.GetMenus = (usr, role, http) => { List<Menu> result = new List<Menu>(); var item = new Menu(); item.ID = "home"; item.Img = "fas fa-home"; item.Name = "主頁"; item.Model = "webfamily-home"; result.Add(item); //.... return Task.FromResult(result); }; WebHost host = new WebHost(); host.RegisterController<Program>() .Setting(o => { o.SetDebug(); o.Port = 80; o.LogLevel = EventArgs.LogType.Info; o.LogToConsole = true; }) .UseJWT()//開啟jwt驗證 .UseFontawesome()//開啟Fontawesome .UseBootstrap(PageStyle.Bootstrap)//開啟bootstrap .Initialize((http, vue, resoure) => { resoure.AddCss("website.css");//加入本專案的CSS resoure.AddScript("echarts.js");//加入本專案的js vue.Debug(); }).Run(); } }
由於開啟了登陸和驗證,所以這一次訪問頁面會預設是一個登陸窗體
登陸後就可以進行主頁面了,這裡並沒有定義登陸過程,任意使用者密碼都能登陸成功能。
自動適配手機端下的效果。
元件針對bootstrap提供兩種選單佈局方式,上面設定的是頂部選單,可以通過配置來實現右邊選單顯示;只需要調整以下程式碼即可:
.UseBootstrap(PageStyle.BootstrapDashboard)
以上BeetleX.WebFamily使用bootstrap5開發SPA應用的效果,元件現有已經提升為開源專案,瞭解專案和示例可訪問:
https://github.com/beetlex-io/WebFa