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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/304237.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机基础知识菜鸟教程,机器学习基础知识整理归纳

关于机器学习的一些基本概念的整理1.前言1.机器学习是一门致力于研究如何通过计算的手段&#xff0c;利用经验来改善系统自身的性能的学科。1997年Mitchell给出一个更形式化的定义&#xff0c;假设用P来评估计算机程序在某任务类T上的性能&#xff0c;若一个程序通过利用经验E在…

python echo函数_python如何调用php文件中的函数详解

前言python调用php代码实现思路&#xff1a;php文件可通过在terminal中使用php命令行进行调用&#xff0c;因此可使用python开启子进程执行命令行代码。函数所需的参数可通过命令行传递。测试环境1、操作系统&#xff1a;macos10.13.22、php版本&#xff1a;PHP 7.1.7(mac自带)…

今天换了ubuntu10.04

今天换成了ubuntu10.04&#xff0c;开机很快&#xff0c;17秒到登录界面&#xff0c;在我这台dell vostro 1500上很快很快了。快是ubuntu10.04给我的第一印象。至于界面什么的&#xff0c;我真觉得没什么区别&#xff0c;反正我也不开特效&#xff0c;管它呢&#xff01;反正我…

Jupyter 常见可视化框架的选择

文末有福利&#xff01;对于以Python作为技术栈的数据科学工作者&#xff0c;Jupyter是不得不提的数据报告工具。可能对于R社区而言&#xff0c;鼎鼎大名的ggplot2是常见的可视化框架&#xff0c;而大家对于Python&#xff0c;以及Jupyter为核心的交互式报告的可个视化方案就并…

AOP(面向切面编程)大概了解一下

前言上一篇在聊MemoryCache的时候&#xff0c;用到了Autofac提供的拦截器进行面向切面编程&#xff0c;很明显能体会到其优势&#xff0c;既然涉及到了&#xff0c;那就趁热打铁&#xff0c;一起来探探面向切面编程。正文1. 概述在软件业&#xff0c;AOP为Aspect Oriented Prog…

es6添加删除class_es6中class类的使用

在es5中我们是使用构造函数实例化出来一个对象&#xff0c;那么构造函数与普通的函数有什么区别呢&#xff1f;其实没有区别&#xff0c;无非就是函数名称用首字母大写来加以区分&#xff0c;这个不用对说对es5有了解的朋友都应该知道。但是es5的这种方式给人的感觉还是不够严谨…

搞定WordPress的日志自动截断

WordPress默认首页显示日志全文&#xff0c;这个很让人受不了&#xff0c;在IC之前就想搞定这个&#xff0c;可是一直没有时间&#xff0c;现在比赛过后&#xff0c;作为休闲&#xff0c;总算是搞定&#xff0c;很多人说用more标签&#xff0c;最后还是用了某位仁兄做的很好的插…

如何选择 WebClient HttpWebRequest HttpClient ?

当我们在用 .NET 调用 RestAPI 时通常有三种选择&#xff0c;分别为&#xff1a;WebClient, HttpWebRequest&#xff0c;HttpClient&#xff0c;这篇文章我们将会讨论如何使用这三种方式去调用 RestAPI&#xff0c;我还会提供相应的代码案例来帮助你更好的理解这三者的概念和使…

gre考试能用计算机么,新GRE考试必须知道的九大考场问题

参加GRE考试须知GRE考场问题1、计算机化GRE考试考场的环境怎样?计算机化考场按照全球统一标准建设&#xff0c;温度适宜&#xff0c;光线充足&#xff0c;隔音效果良好。各个考位由屏风分隔&#xff0c;相对独立。GRE考试须知GRE考场问题2、参加计算机化GRE考试需要携带什么文…

python property setter_Python:动态属性 property setter 以及 __getattr__ 属性

1. property引言&#xff1a;-- 假设有这样一个需求&#xff0c;我们需要创建一个 User 类&#xff0c;并初始化 birthday 参数&#xff0c;之后根据 birthday 计算得到年龄&#xff1b;-- 我们设计下面的代码实现该需求&#xff1a;>>> from datetime import date, d…

机器学习三部曲

随着科技的发展&#xff0c;计算机对人类的生产活动和社会活动产生了极为重要的影响&#xff0c;同时以强大的生命力飞速发展着。目前计算机正广泛用于社会各个领域&#xff0c;并朝着微型化、网络化、智能化和巨型化的方向前进。说到智能化&#xff0c;大家最先想到的应该就是…

AntDesign Pro + .NET Core 实现基于JWT的登录认证

很多同学说AgileConfig的UI实在是太丑了。我想想也是的&#xff0c;本来这个项目是我自己使用的&#xff0c;一开始甚至连UI都没有&#xff0c;全靠手动在数据库里修改数据。后来加上了UI也是使用了老掉牙的bootstrap3做为基础样式。前台框架也是使用了angularjs&#xff0c;同…

武汉大学计算机学院2019考研复试,2019年武汉大学硕士研究生复试及录取名单汇总...

原标题&#xff1a;2019年武汉大学硕士研究生复试及录取名单汇总考生可以通过录取名单了解到很多重要的信息&#xff0c;例如复试比例&#xff0c;进复试最低分&#xff0c;复试录取成绩&#xff0c;录取总评成绩等重要信息。以下是我们整理收集到的各学院复试录取名单汇总&…

ugui unity 取消选择_UGUI中几种不规则按钮的实现方式

前言UGUI中的按钮默认是矩形的&#xff0c;若要实现非矩形按钮该怎么做呢&#xff1f;比如这样的按钮&#xff1a;本文将介绍两种实现方式供大家选择。使用alphaHitTestMinimumThresholdImage类的alphaHitTestMinimumThreshold是一个浮点值&#xff0c;Raycast检测时只有图片中…

你的专业 VS 你妈口中你的专业

亲妈认证★英语语言文学我妈&#xff1a;她就是一个学英语的~我同学&#xff1a;你学英语的啊&#xff1f;那你看美剧不用看字幕的吧&#xff1f;你听英文歌都听得懂的吧&#xff1f;这个怎么翻译啊&#xff1f;这上面写的什么&#xff1f;你不是专八吗&#xff1f;哈喽~ 在吗&…

反射 + 抽象工厂模式切换不同的实现方法

概述工厂模式&#xff08;Abstract Factory&#xff09;定义 &#xff1a;提供一个创建一系列相关或相互依赖对象的接口&#xff0c;而无需指定它们具体的类。抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09;是围绕一个超级工厂创建其他工厂。该超级工厂又称为其…

计算机应用乘法,计算机系统原理(十) 二进制整数的乘法运算和除法运算

2.5我们着重介绍了二进制整数的加、减运算&#xff0c;本次我们继续介绍乘、除运算。本章是迄今为止最难的一章&#xff0c;希望各位猿友有所收获&#xff0c;也别忘了“点个推荐哦”。引言运算一直是程序运行当中一个重要的环节&#xff0c;而在二进制的运算过程当中&#xff…

3 年工作经验程序员应有的技能

前言因为和同事有约定再加上LZ自己也喜欢做完一件事之后进行总结&#xff0c;因此有了这篇文章。这篇文章大部分内容都是面向整个程序员群体的&#xff0c;当然因为LZ本身是做Java开发的&#xff0c;因此有一部分内容也是专门面向咱们Java程序员的。第二阶段&#xff1a;五年五…

应急响应中的溯源方法

在发现有入侵者后&#xff0c;快速由守转攻&#xff0c;进行精准地溯源反制&#xff0c;收集攻击路径和攻击者身份信息&#xff0c;勾勒出完整的攻击者画像。 对内溯源与对内溯源 对内溯源&#xff1a;确认攻击者的行为 &#xff0c;分析日志 数据包等&#xff1b; 对外溯源&…

POP3口令扫描案例

通过本案例可以学到&#xff1a; (1)了解POP3有关知识(2)利用Hscan工具软件来破解POP3账号和口令现在很多邮箱服务器都支持POP3功能&#xff0c;通过POP3来收取信件&#xff0c;收取信件时仅仅需要提供用户名和密码。目前有很多工具可以扫描POP3邮件账号和口令&#xff0c;本案…