天龙八部搭建mysql教程_天龙八部架设mysql数据库
在早期版本BeetleX.WebFamily只提供了vuejs+element的集成,由于element只適合PC管理應用開發(fā)相對于移動應用適配則沒這么方便。在新版本組件集成了bootstrap5可以更好地適配移動Web應用;同時也集成了Fontawesome和bootstrapIcons,這樣在開發(fā)過程中使用字體圖標就更方便了。在開發(fā)時以上組件并不會打包到一起,而是根據實際需要選擇element或bootstrap作為當前應用的樣式主題,而基礎開發(fā)框架還是基于vuejs,ajax數據交互則使用axios。
使用
????在使用之前還是選了解一下BeetleX.WebFamily是如何開發(fā)SPA應用,并有那些基礎功能BeetleX.WebFamily針對Web SPA應用的改進。第一步使用vs或vscode創(chuàng)建控臺項目,引用BeetleX.WebFamily后在main方法中添加以下代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Program
{
static void Main(string[] args)
{
WebHost host = new WebHost();
host.RegisterController()
.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
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()
.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開發(fā)SPA應用的效果,組件現有已經提升為開源項目,了解項目和示例可訪問:
https://github.com/beetlex-io/WebFamily
總結
以上是生活随笔為你收集整理的天龙八部搭建mysql教程_天龙八部架设mysql数据库的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 使用UUID获取唯一的Long类型的值
- 下一篇: Sqlserver 数据库分页查询(三种