????????在早期版本BeetleX.WebFamily只提供了vuejs+element的集成，由于element只適合PC管理應(yīng)用開發(fā)相對于移動(dòng)應(yīng)用適配則沒這么方便。在新版本組件集成了bootstrap5可以更好地適配移動(dòng)Web應(yīng)用；同時(shí)也集成了Fontawesome和bootstrapIcons,這樣在開發(fā)過程中使用字體圖標(biāo)就更方便了。

????????在開發(fā)時(shí)以上組件并不會(huì)打包到一起，而是根據(jù)實(shí)際需要選擇element或bootstrap作為當(dāng)前應(yīng)用的樣式主題，而基礎(chǔ)開發(fā)框架還是基于vuejs，ajax數(shù)據(jù)交互則使用axios。

使用

????????在使用之前還是選了解一下BeetleX.WebFamily是如何開發(fā)SPA應(yīng)用，并有那些基礎(chǔ)功能BeetleX.WebFamily針對Web SPA應(yīng)用的改進(jìn)。第一步使用vs或vscode創(chuàng)建控臺(tái)項(xiàng)目，引用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)//設(shè)置使用bootstrap.Initialize((http, vue, resoure) =>{vue.Debug();}).Run();} }

啟動(dòng)項(xiàng)目后，可以從瀏覽器訪問得到以下結(jié)果：

以上是基于bootstrap的SPA應(yīng)用默認(rèn)主頁，當(dāng)然這并不是你所需要的。

定義功能

????????接下來在Main方法修改SPA應(yīng)用的內(nèi)容，通過修改這些配置可以讓你馬上把主頁更換成實(shí)際應(yīng)用的功能。

class Program {static void Main(string[] args){//更改應(yīng)用標(biāo)題WebHost.Title = "beetlex & bootstrap!";//更新應(yīng)用LogoWebHost.LogoImg = "/images/icons-hero.png";//設(shè)置頭部組件WebHost.HeaderModel = "custom-header";//設(shè)置需要登陸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驗(yàn)證.UseFontawesome()//開啟Fontawesome.UseBootstrap(PageStyle.Bootstrap)//開啟bootstrap.Initialize((http, vue, resoure) =>{resoure.AddCss("website.css");//加入本項(xiàng)目的CSSresoure.AddScript("echarts.js");//加入本項(xiàng)目的jsvue.Debug();}).Run();} }

由于開啟了登陸和驗(yàn)證，所以這一次訪問頁面會(huì)默認(rèn)是一個(gè)登陸窗體

登陸后就可以進(jìn)行主頁面了，這里并沒有定義登陸過程，任意用戶密碼都能登陸成功能。

自動(dòng)適配手機(jī)端下的效果。

組件針對bootstrap提供兩種菜單布局方式，上面設(shè)置的是頂部菜單，可以通過配置來實(shí)現(xiàn)右邊菜單顯示；只需要調(diào)整以下代碼即可:

.UseBootstrap(PageStyle.BootstrapDashboard)

以上BeetleX.WebFamily使用bootstrap5開發(fā)SPA應(yīng)用的效果，組件現(xiàn)有已經(jīng)提升為開源項(xiàng)目,了解項(xiàng)目和示例可訪問:

https://github.com/beetlex-io/WebFamily

BeetleX

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

https://beetlex.io

總結(jié)

以上是生活随笔為你收集整理的BeetleX使用bootstrap5开发SPA应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。