企业级精致 Blazor 套件 BootstrapBlazor 介绍

BootstrapBlazor

1、前言

Blazor 作为一种 Web 开发的新技术已经发展有一段时间了,有些人标称 无 JS 无 TS,我觉得有点误导新人的意味,也有人文章大肆宣传 Blazor 是 JavaScript 的终结者,是为了替代 JavaScript 而生的,我认为这些言论都太激进了太片面了。我对 Blazor 的理解是:

它仅仅是为开发人员开发 Web 应用是多了一种选择,多了一条路而已,使用 Blazor 组件可以远离 Javascript 与 css,开发 Blazor 组件还是不能彻底抛弃 Javascript 与 css。

本人在码云开源了一个后台通用权限管理平台 BootstrapAdmin(https://gitee.com/LongbowEnterprise/BootstrapAdmin),一直想把这个平台实现一个 SPA 的版本,随着 Blazor 的兴起,我个人想尝试使用 Blazor Server 端方式实现,由于一直比较喜欢 Eleme UI 的风格,于是在网上找了一下能满足需要的组件,要么是不好看,要么功能不全,比如 Table 组件展示一下数据可以,但是做到增删改查还差的很远很远。作为一个代码洁癖的人最不能接受是代码拿下来编译一下,几百个警告信息,眼泪立马流了下来。刚好 4 月份时间比较空闲,觉得利用一个月的时间自己写一套组件,由于出发点是想给 后台通用权限管理平台 BootstrapAdmin 使用,所以就叫了 BootstrapBlazor 这个名字。

经过一个月时间的打磨,本套组件库已经基本完成,从简单的 button 组件到复杂的具备增删改查功能的 table 组件都可以正常使用了,虽然名字叫做 BootstrapBlazor,其实很多组件都是借鉴的 Eleme UI 跟 Ant Design 的,基本上组件都是自己手写 css 样式进行细致调整的。

2、BootstrapBlazor 简介

Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用。通过本套组件可以大大缩短开发周期,节约开发成本。目前已经开发、封装了 70 多个组件,欢迎有兴趣的同学试用。

Gitee 开源地址为:(⭐1833)

https://gitee.com/LongbowEnterprise/BootstrapBlazor

Github 开源地址为:(⭐225)

https://github.com/ArgoZhang/BootstrapBlazor

在线演示网站:

https://www.blazor.zone

主要开发仓库是 gitee 仓库,github 会自动同步。欢迎 star

首先来一波组件“阅兵”,多图预警!!!


组件70+,截图实在有点手疼,还请自己使用体验。

3、快速入门

1) 前置条件

安装 dotnet SDK

https://dotnet.microsoft.com/download

安装 Visual Studio 2019 v16.8+

https://visualstudio.microsoft.com/vs/getting-started/

2) 安装项目模板

dotnet new -i Bootstrap.Blazor.Templates::*

3) 使用方法

使用项目模板创建新项目

dotnet new bbapp

bbapp 是 BootstrapBlazor App 的缩写

一切就是这么丝滑,HFS那样的丝滑!

生成的项目文件
双击打开解决方案

选中 Server 或者 WebAssembly 工程直接按 F5 运行。

剩下的时间就交给你玩玩这些组件吧,祝使用愉快!

4、结语

什么?就这?已经结束了???使用 dotnet tools 两步生成的项目,过于丝滑,显得有些 苍白,少了些动手的乐趣。

1) 现有项目中集成 BootstrapBlazor

  • 从 Nuget.org 获取 BootstrapBlazor 包

dotnet add package BootstrapBlazor
  • 添加样式文件与脚本到项目文件中 Pages/_Host.cshtml (Server) or wwwroot/index.html (WebAssembly)

<!DOCTYPE html>
<html lang="en">
<head>. . .<link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css">
</head>
<body>. . .<script src="_framework/blazor.server.js"></script><script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
</body>
</html>
  • 注册服务 ~/Startup.cs

namespace BootstrapBlazorAppName
{public class Startup{public void ConfigureServices(IServiceCollection services){//more code may be present hereservices.AddBootstrapBlazor(); }//more code may be present here}
}

5、你还需要这个

1) 安装 Visual Studio 插件

下载安装包

https://gitee.com/Longbow/BootstrapBlazorVsix/raw/master/dist/BootstrapBlazor.UITemplate-5.0.0.zip

双击 BootstrapBlazor.UITemplate.vsix 文件,请保证 Visual Studio IDE 以及相关进程均关闭,此安装包安装过程可能很慢,请耐心等待

特别注意:如果长时间无响应,请查看任务管理器中是否有 devenv.exe 或者 msbuild.exe 进程,如果有请手动结束

2) 使用 VS 创建项目

这就又回到上面面创建的项目结果了,欢迎使用,提意见建议!

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

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

相关文章

算法设计与分析——贪心算法——最优装载问题

有一批集装箱要装上一艘载重量为c的轮船。其中集装箱i的重量为Wi。最优装载问题要求确定在装载体积不受限制的情况下&#xff0c;将尽可能多的集装箱装上轮船。 #include<iostream> #include<algorithm> #include<cstring> using namespace std;typedef str…

AgileConfig-轻量级配置中心 1.1.0 发布,支持应用间配置继承

AgileConfig轻量级配置中心自第一个版本发布不知不觉已经半年了。在并未进行什么推广的情况下收到了250个star&#xff0c;对我有很大的鼓舞&#xff0c;并且也有不少同学试用&#xff0c;并且给出了宝贵的意见&#xff0c;非常感谢他们。其中有一些意见非常好&#xff0c;但是…

如何在 C# 中使用 Dapper ORM

译文链接&#xff1a;https://www.infoworld.com/article/3025784/how-to-use-the-dapper-orm-in-c.html?nsdrtrue对象关系映射&#xff08;ORM&#xff09;这个概念已经存在很长时间了&#xff0c;ORM的作用就是用来解决 编程领域的 object model 和关系数据库中的 data mode…

GraphQL:简单开开始一个查询

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述&#xff0c;使得客户端能够准确地获得它需要的数据&#xff0c;而且没有任何冗余&#xff0c;也让 API 更容易地随着时间推移而演进&#xff0c…

算法设计与分析——回溯法——批处理作业调度

问题描述&#xff1a;给定n个作业的集合{J1,J2,…,Jn}。每个作业必须先由机器1处理&#xff0c;然后由机器2处理。作业Ji需要机器j的处理时间为tji。对于一个确定的作业调度&#xff0c;设Fji是作业i在机器j上完成处理的时间。所有作业在机器2上完成处理的时间和称为该作业调度…

探索.NET平台中的SIMD内在函数Vector

概述Vector&#xff08;向量&#xff09;是一种序列式容器&#xff0c;事实上和数组差不多&#xff0c;但它比数组更优越。一般来说数组不能动态拓展&#xff0c;因此在程序运行的时候不是浪费内存&#xff0c;就是造成越界。而Vector刚好弥补了这个缺陷&#xff0c;它的特征是…

算法设计与分析——回溯法——装载问题

0027算法笔记——【回溯法】回溯法与装载问题 自己写的代码&#xff1a; #include <iostream> using namespace std; template <class Type> class Loading {//friend Type MaxLoading(Type[],Type,int,int []);//private:public:void Backtrack(int i);int n, …

深入解析 C# 的 String.Create 方法

作者&#xff1a;Casey McQuillan译者&#xff1a;精致码农原文&#xff1a;http://dwz.win/YVW说明&#xff1a;原文比较长&#xff0c;翻译时精简了很多内容&#xff0c;对于不重要的细枝末节只用了一句话概括&#xff0c;但不并影响阅读。你还记得上一次一个无足轻重的细节点…

算法设计与分析——回溯法——n皇后问题

一、什么是N皇后问题&#xff1f; 在nn格的棋盘上放置彼此不受攻击的n个皇后。按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。n后问题等价于再nn的棋盘上放置n个皇后&#xff0c;任何2个皇后不妨在同一行或同一列或同一斜线上。 问题…

全局程序集缓存gac中安装程序集_我就不信2W字把源码拆的这么碎,你还不明白mybatis缓存...

前言不知道大家看到这张图感觉怎么样&#xff0c;不是难&#xff0c;一共也没有几个组件&#xff0c;但是真的让我想当头疼&#xff0c;因为在面试的时候&#xff0c;就这张图&#xff0c;对&#xff0c;你没看错&#xff0c;就这几个组件&#xff0c;那是让我相当难受啊MyBati…

GraphQL:和EntityFramework更配哦

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述&#xff0c;使得客户端能够准确地获得它需要的数据&#xff0c;而且没有任何冗余&#xff0c;也让 API 更容易地随着时间推移而演进&#xff0c…

算法设计与分析——回溯法——符号三角形问题

#include<iostream> using namespace std;class Triangle{public:void Backtrack(int t);int n;//第一行的符号个数 int half;//n*(n1)/4 int count;//当前—的个数 int **p;//符号三角形矩阵 long sum; //已找到的符号三角形数 };void Triangle::Backtrack(int t) {if(…

mysql 默认事务隔离级别_MySQL 事务隔离级别详解

个人公众号『码农札记』&#xff0c;欢迎关注&#xff0c;查看更多精彩文章。 简介&#xff1a; MySQL的事务隔离级别一共有四个&#xff0c;分别是读未提交、读已提交、可重复读以及可串行化。四个特性ACID原子性 &#xff08;Atomicity&#xff09;事务开始后所有操作&#x…

如何在 Asp.Net Core 中对请求进行限流

译文链接&#xff1a;https://www.infoworld.com/article/3442946/how-to-implement-rate-limiting-in-aspnet-core.html在应用程序开发时&#xff0c;或许你有这样的想法&#xff0c;控制用户的请求频率来防止一些用户的恶意攻击&#xff0c;具体的说就是&#xff1a;为了预防…

算法设计与分析——动态规划——石子合并问题

1.石子合并问题 在一个圆形操场的四周摆放着n堆石子。现要将石子有序地合并成一堆。规定每次只能选相邻的2堆石子合并成新的一堆&#xff0c;并将新的一堆石子数记为该次合并的得分。设计一个算法&#xff0c;计算出将n堆石子合并成一堆的最小得分和最大得分。 #include<st…

软件层面可以做到重启本地串口吗_手机关机还是重启好?get这几招,手机更流畅...

遇到手机卡顿&#xff0c;很多人都会不自觉的选择重启手机&#xff0c;还是不行&#xff0c;就关机等一会儿再开机&#xff0c;这样几次下来手机真的就顺畅多了。那么关机和重启到底有什么区别&#xff1f;还有哪些方法可以保持手机流畅&#xff1f;跟着小编来了解一下&#xf…

在传统行业做数字化转型之团队篇

【数字化转型】| 作者 / Edison Zhou这是EdisonTalk的第309篇原创内容在过去的两年时间里&#xff0c;我加入了一家传统行业的企业参与其数字化转型的过程&#xff0c;现在我将我的经历分享出来&#xff0c;本文是第四部分—团队篇&#xff0c;主要会介绍一下我所在的经济适用型…

回顾 | 进击吧! Blazor!系列

Blazor 是一个 Web UI 框架&#xff0c;可通过 WebAssembly 在任意浏览器中运行 .Net 。Blazor 旨在简化快速的单页面 .Net 浏览器应用的构建过程&#xff0c;它虽然使用了诸如 CSS 和 HTML 之类的 Web 技术&#xff0c;但它使用 C&#xff03;语言和 Razor 语法代替 JavaScrip…

算法设计与分析——回溯法——旅行售货员问题

#include<iostream> #include<bits/stdc.h> using namespace std; const int noEdge65535; class Traveling {public:void BackTrack(int i);int n; //图G的顶点数 int *x; //当前的解 int *bestx; // 当前的最优解 int **a; // 图G的临界矩阵 int cc; //…

sql不等于0怎么表示_数组真的只能从0开始吗?python表示不同意

背景早在linux操作系统诞生开始&#xff0c;c语言作为linux系统的编程语言主力&#xff0c;它为后续的其他高级编程语言(如c、java)提供了很多语言级的语义和协议规范。数组做为linux操作系统最基本的数据结构之一&#xff0c;便是其中的一项语言级高级特性&#xff0c;深入理解…