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!";//更新应用LogoWebHost.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");//加入本项目的CSSresoure.AddScript("echarts.js");//加入本项目的jsvue.Debug();}).Run();}
}
由于开启了登陆和验证,所以这一次访问页面会默认是一个登陆窗体
登陆后就可以进行主页面了,这里并没有定义登陆过程,任意用户密码都能登陆成功能。
自动适配手机端下的效果。
组件针对bootstrap提供两种菜单布局方式,上面设置的是顶部菜单,可以通过配置来实现右边菜单显示;只需要调整以下代码即可:
.UseBootstrap(PageStyle.BootstrapDashboard)
以上BeetleX.WebFamily使用bootstrap5开发SPA应用的效果,组件现有已经提升为开源项目,了解项目和示例可访问:
https://github.com/beetlex-io/WebFamily
BeetleX
开源跨平台通讯框架(支持TLS)
提供高性能服务和大数据处理解决方案
https://beetlex.io
BeetleX使用bootstrap5开发SPA应用相关推荐
- 通过Blazor使用C#开发SPA单页面应用程序(4) - Ant Design
通过Blazor使用C#开发SPA单页面应用程序(1) 通过Blazor使用C#开发SPA单页面应用程序(2) 通过Blazor使用C#开发SPA单页面应用程序(3) 前面学习了Blazor的特点.环 ...
- BeetleX.WebFamily针对Web SPA应用的改进
BeetleX.WebFamily1.0在集成vue+element+axios的基础上添加应用页.窗体布局和登陆验证等功能.通过以上功能开发Web SPA应用时只需要编写vue控件和配置菜单即可实现 ...
- 通过Blazor使用C#开发SPA单页面应用程序(2)
今天我们尝试创建一个默认的Blazor应用. .Net Core 3.0需要Visual Studio 2019 的支持. 安装.Net Core 3.0 预览版 SDK版本,注意预览版对应的VS版本 ...
- 通过Blazor使用C#开发SPA单页面应用程序(1)
2019年9月23--25日 .NET Core 3.0即将在.NET Conf上发布! .NET Core的发布及成熟重燃了.net程序员的热情和希望,一些.net大咖也在积极的为推动.NET Co ...
- 天龙八部搭建mysql教程_天龙八部架设mysql数据库
在早期版本BeetleX.WebFamily只提供了vuejs+element的集成,由于element只适合PC管理应用开发相对于移动应用适配则没这么方便.在新版本组件集成了bootstrap5可以 ...
- BeetleX.FastHttpApi之Vuejs扩展
非常喜欢用vuejs,但又不想花时间去搞nodejs和webpack之类的,所以才有了BeetleX.FastHttpApi.VueExtend这样一个组件:组件的主要功能就是可以实现在vs.net中 ...
- 对SPA(单页面应用)的总结
目录 1.单页面应用(SPA)的概念: 2.作用(好处) 3.缺点 4.实现SPA 1.单页面应用(SPA)的概念: 1.single-page application是一种特殊的Web应用.它将所有 ...
- SPA-Vue企业级开发模式介绍
学习SPA 1.1概述 1.2 SPA 的优.缺点 1.3 Vue全家桶的技术栈 1.4 SPA中的组件-*.vue 1.1概述 单页Web应用(single page web application ...
- < 谈谈对 SPA(单页面应用)的理解 >
文章目录 一.什么是 " SPA " 含义 举个栗子 二.SPA和MPA的区别 > 单页应用与多页应用的区别 > 单页应用优缺点 实现一个SPA > 原理 > ...
最新文章
- Spring @Transactional (一)
- 动态代理:JDK动态代理和CGLIB代理的区别
- geotools读取shp文件及shp文件操作工具类代码
- 基于Asp.Net Core打造轻量级内部服务治理RPC(二 远程服务设计)
- 将一个实体转换成 Url 参数的形式 ?a=ab=b
- Codeforces- Educational Codeforces Round 69
- 基于MaxCompute的数仓数据质量管理
- float js 正则 验证_爬虫篇 | 200 行代码实现一个滑动验证码
- 最近自学 Asp.net MVC 小总结
- python 3.9 性能_Python 3.9 性能优化:更快的 list()、dict() 和 range() 等内置类型
- 揪出造成失败用户登录的应用主机名、数据库用户信息
- api下载文件三种方式
- js调用数科阅读器_js调用ocx控件(读写IC卡
- 删除威金病毒残留的_desktop.ini文件(转贴)
- centos7服务器如何通过trunk模式接入交换机
- java课题研究方法和技术途径_开题报告中的拟采取的研究方法技术路线和技术关键...
- 软件测试的环境部署怎么做?
- 【软件工程导论】软件工程导论笔记
- Matlab save colormap
- “你公众号被封了!”