在早期版本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方法中添加以下代码:

  1. class Program
  2. {
  3.     static void Main(string[] args)
  4.     {
  5.         WebHost host = new WebHost();
  6.         host.RegisterController<Program>()
  7.         .Setting(o =>
  8.         {
  9.             o.SetDebug();
  10.             o.Port = 80;
  11.             o.LogLevel = EventArgs.LogType.Info;
  12.             o.LogToConsole = true;
  13.         })
  14.         .UseFontawesome()//加入Fontawesome
  15.         .UseBootstrap(PageStyle.Bootstrap)//设置使用bootstrap
  16.         .Initialize((http, vue, resoure) =>
  17.         {
  18.             vue.Debug();
  19.         }).Run();
  20.     }
  21. }

启动项目后，可以从浏览器访问得到以下结果：

以上是基于bootstrap的SPA应用默认主页，当然这并不是你所需要的。

    接下来在Main方法修改SPA应用的内容，通过修改这些配置可以让你马上把主页更换成实际应用的功能。

  1. class Program
  2. {
  3.     static void Main(string[] args)
  4.     {
  5.             //更改应用标题
  6.             WebHost.Title = "beetlex & bootstrap!";
  7.             //更新应用Logo
  8.             WebHost.LogoImg = "/images/icons-hero.png";
  9.             //设置头部组件
  10.             WebHost.HeaderModel = "custom-header";
  11.             //设置需要登陆
  12.             WebHost.MustLogin = true;
  13.             //定义页面的功能菜单
  14.             WebHost.GetMenus = (usr, role, http) =>
  15.             {
  16.                 List<Menu> result = new List<Menu>();
  17.                 var item = new Menu();
  18.                 item.ID = "home";
  19.                 item.Img = "fas fa-home";
  20.                 item.Name = "主页";
  21.                 item.Model = "webfamily-home";
  22.                 result.Add(item);
  23.                 //....
  24.                 return Task.FromResult(result);
  25.             };
  26.             WebHost host = new WebHost();
  27.         host.RegisterController<Program>()
  28.         .Setting(o =>
  29.         {
  30.             o.SetDebug();
  31.             o.Port = 80;
  32.             o.LogLevel = EventArgs.LogType.Info;
  33.             o.LogToConsole = true;
  34.         })
  35.         .UseJWT()//开启jwt验证
  36.         .UseFontawesome()//开启Fontawesome
  37.         .UseBootstrap(PageStyle.Bootstrap)//开启bootstrap
  38.         .Initialize((http, vue, resoure) =>
  39.         {
  40.             resoure.AddCss("website.css");//加入本项目的CSS
  41.             resoure.AddScript("echarts.js");//加入本项目的js
  42.             vue.Debug();
  43.         }).Run();
  44.     }
  45. }

由于开启了登陆和验证，所以这一次访问页面会默认是一个登陆窗体

登陆后就可以进行主页面了，这里并没有定义登陆过程，任意用户密码都能登陆成功能。

自动适配手机端下的效果。

组件针对bootstrap提供两种菜单布局方式，上面设置的是顶部菜单，可以通过配置来实现右边菜单显示；只需要调整以下代码即可:

  1. .UseBootstrap(PageStyle.BootstrapDashboard)

以上BeetleX.WebFamily使用bootstrap5开发SPA应用的效果，组件现有已经提升为开源项目,了解项目和示例可访问:

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

版权声明：本文为smark原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/smark/p/14522273.html