推荐一款在浏览器编辑`Blazor`的`IDE`

不知道是否有Blazor用户羡慕过React或者Vue用户,在一些组件库中,它们就提供了在当前的组件预览对于组件的实时编辑并且预览?

比如semi-design的这种

在比如codepen这种

由于Blazor的诞生时间对比现有的前端来说太短了,以至于这种在线编译的基本没有,

有时候在写界面的时候调试也是一种痛苦,导致Blazor用户痛苦连篇,所以我在这个您是否也有想在浏览器中实时的编辑代码并且渲染的想法? - tokengo - 博客园 (cnblogs.com)博客下继续开发,在基于OpenSumi一个开源的Ide结合开发

实现了在浏览器编辑razor代码并且和好的看到效果,效果如下:

可能有些人看着界面有些不太清楚如何使用

下面是使用的流程:

您也可以去Github获取代码修改,并且商用,它是开源的,协议是 Apache-2.0 license ,如果您有什么更好的项目,或者合作,可以与我们联系,目前项目只集成了Masa Blazor,也欢迎PR其他组件的支持!

希望大家可以一块推广Blazor,让更多人去了解Blazor

目前我已经写过Blazor的一些相关的文档:

  • 如何在现有的Vue项目中嵌入 Blazor项目?

  • 如何实现在react现有项目中嵌入Blazor?

  • Maui 读取外部文件显示到Blazor中

  • Maui Blazor 使用摄像头实现

  • 您是否也有想在浏览器中实时的编辑代码并且渲染的想法?

这些是之前对于Blazor的一些经验和一些技术分享,您有更好的技术和经验分享也可以一块交流
希望Blazor更好的发展

如果您对于IDE有更多的项目也可以联系我一块交流学习

再次分享一下目前的一些Blazor组件库:

(Masa Blazor)[http://docs.masastack.com/blazor/getting-started/installation]
(Bootstrap Blazor)[http://www.blazor.zone/]

IDE项目示例:
Blazor Code
您也可以在Gitee或者Github中下载Window应用程序版本 ,在体验上应用程序的体验会比WebAssembly更好,因为应用程序会使用本机的程序执行编译效果,
Blazor.Code: 支持Blazor动态编译 可以在webassembly下运行编译 内置Masa组件 (gitee.com)

Blazor Code

一个热爱学习的token

qq交流群:737776595
微信交流群:

本文转载于网络 如有侵权请联系删除

相关文章

  • Windows搭建SVN服务器「建议收藏」

    大家好,又见面了,我是你们的朋友全栈君。写这篇文章其实是弥补6年前的一个遗憾,之前在第一家公司时,快要离职时,帮公司搭建一个SVN服务器,当时在Linux上面搭建,搭建的服务器不支持HTTP协议,无法在浏览器中查看,限于当时的能力,未能找到具体的解决方案。今天听同事在提SVN服务器,突然想搭建一个,搭建之后,Windows环境可以直接通过http协议访问,就这样吧,后续遇到SVN使用的具体问题再细究吧。需要的软件SVN服务端软件VisualSVN-Server:http://www.visualsvn.com/server/download/SVN客户端软件TortoiseSVN:http://tortoisesvn.net/downloads.html安装服务器双击安装,均选默认操作其中需要注意的一步,选择SVN版本有标准版和企业版,这里个人练习,选择上面标准版选择后,会有如下选择设置:程序安装路径Location;代码仓库位置Repositories;https访问端口ServerPort;代码备份路径Backups。安装完成后,会弹出完成窗口,并默认会弹出管理窗口,上面有是否订阅

  • lookup-method标签实践与分析

    文件结构这个示例一共需要新建6个文件创建实体类有4个实体类(一个父类+两个子类+一个操作类)Animal.java(父类)packagecom.aqin.custom.MethodOverride.lookup; /** *@Description *@Authoraqin1012AQin. *@Date2022/8/229:28AM *@Version1.0 */ publicclassAnimal{ publicAnimal(){ System.out.println("吃点啥嘞?"); } } 复制代码复制Cat.javapackagecom.aqin.custom.MethodOverride.lookup; /** *@Description *@Authoraqin1012AQin. *@Date2022/8/2210:01AM *@Version1.0 */ publicclassCatextendsAnimal{ publicCat(){ System.out.println("吃(__).。oO……猫粮"); } } 复制代

  • 聊聊UI自动化的PageObject设计模式

    当我们开发UI自动化测试用例时,需要引用页面中的元素(数据)才能够进行点击(动作)并显示出页面内容。如果我们开发的用例是直接对HTML元素进行操作,则这样的用例无法“应对”页面中UI的更改。PageObject模式就是对HTML页面以及元素细节的封装,并对外提供应用级别的API,使你摆脱与HTML的纠缠。  什么是PageObject模型?PageObject模型是一种设计模式,其核心是减少代码重复(最小化代码更新/维护用例)以降低用例开发的工作量。利用PageObject模型,为每个网页创建Page类,测试场景中用的定位器/元素存储在单独的类文件中,并且测试用例在不同的文件中,使代码更加模块化。由于元素定位器和测试脚本是分开存储的,因此对WebUI元素的任何更改只需要在测试场景代码中进行更改即可。基于PageObject模型的实现包含以下两点:Page类——将页面封装成Page类,页面元素为Page类的成员元素,页面功能放在Page类方法里。 测试类——针对这个Page类定义一个测试类,在测试类调用Page类的各个类方法完成测试。它使用Page类中的页面方法/方法与页面的UI元素进行

  • R语言之可视化(32)之ggtext:提高ggplot2的文本呈现

    R语言之可视化(31)扫地僧easystats(2)相关性分析该ggtext软件包为ggplot2提供了富文本(基本HTML和Markdown)支持。富文本可用于图注解(图标题,字幕,标题,轴标签,图例等)中并可视化文本数据,就像通常使用geom_text()。安装包remotes::install_github("wilkelab/ggtext")复制该软件包在CRAN上可用后,您将可以照常通过install.packages()安装最新版本。install.packages("ggtext")复制示例所有文本渲染都是通过gridtext软件包中的richtext_grob()或textbox_grob()来执行的。ggtext包定义了两个新的主题元素,element_markdown()和element_textbox()。两者的行为都类似于element_text(),但将提供的文本呈现为markdown/html。element_markdown()是element_text()的直接替代,它呈现文本而无需自动换行。要开始新行,请使用标记

  • Java改善性能小技巧

    改善性能的技巧◆◆◆◆不管有多少经验,都会被问到一些优化建议,从代码层面到数据库层面,下面介绍一些改善性能的小技巧慎用异常◆◆◆◆在开发中,经常使用try-catch进行错误捕获,但是try-catch对系统性能是很糟糕的。一定要注意:在循环语句中,尽量不要使用try-catch如果无法处理某个异常,不要捕获它在最靠近异常抛出的地方捕获异常,不要大段代码的捕获。捕获有特殊意义的异常,如SqlException,而不是简单的Exception 使用局部变量◆◆◆◆调用方法时传递参数以及在调用中创建的临时变量都保存在栈中,速度较快。其他变量,如静态变量,在堆中,速度较慢; 如:inta=0for(int1=0;i<100000000;i++)a++;publicstaticintta=0;for(int1=0;i<100000000;i++)ta++;在测试时,代码1的速度是68ms,第二段是256ms,远远大于代码1位运算代替乘除法◆◆◆◆计算机中,位运算是最高效的,可以尝试使用位运算来代替乘除法,如longa=100;for(int1=0;i<100000000;i

  • 安全工具Snort

    概要在本文中,我们将了解Snort是什么以及如何配置它。Snort是最流行的IPS(入侵防御系统)和IDS(入侵检测系统)方法之一。什么是Snort?Snort是一个免费的、开源的网络入侵防御和检测系统。它使用基于规则的语言,执行协议分析、内容搜索/匹配,并可用于检测各种攻击和探测,如缓冲区溢出、隐形端口扫描、CGI攻击、SMB探测、操作系统指纹识别尝试等。Snort规则Snort规则提供检测攻击和恶意活动的功能。您可以编写特定的规则,如alert、log、删除连接等。规则具有简单的语法。此外,您可以在配置文件中编写所有规则,并且可以编辑您想要的其他系统。 Snort有三种不同的mod。这些mod是; 1-数据包嗅探器。 2-数据包记录器。 3-NIPDS(网络入侵和防御检测系统)规则语法架构:Snort规则语法 规则标头 alert——规则操作。Snort将在满足设置条件时生成alert。 any——源IP。(如果使用“any”,Snort将查看所有来源)。 any——源端口。(如果使用“any”,Snort将查看所有端口)。 —>—— 方向。从源到目标。 any——目标IP。

  • 判断点是否在多边形内的Python实现及小应用(射线法)

    判断一个点是否在多边形内是处理空间数据时经常面对的需求,例如GIS软件中的点选功能、根据多边形边界筛选出位于多边形内的点、求交集、筛选不在多边形内的点等等。判断一个点是否在多边形内有几种不同的思路,相应的方法有:射线法:从判断点向某个统一方向作射线,依交点个数的奇偶判断;转角法:按照多边形顶点逆时针顺序,根据顶点和判断点连线的方向正负(设定角度逆时针为正)求和判断;夹角和法:求判断点与所有边的夹角和,等于360度则在多边形内部。面积和法:求判断点与多边形边组成的三角形面积和,等于多边形面积则点在多边形内部。面积和法涉及多个面积的计算,比较复杂,夹角和法以及转角法用到角度计算,会涉及反三角函数,计算开销比较大,而射线法主要涉及循环多边形的每条边进行求交运算,但大部分边可以通过简单坐标比对直接排除,因此这是比较好的方法,也是比较实用的图形学基础算法。射线法的原理及实现射线法就是以判断点开始,向右(或向左)的水平方向作一射线,计算该射线与多边形每条边的交点个数,如果交点个数为奇数,则点位于多边形内,偶数则在多边形外。该算法对于复合多边形也能正确判断。射线法的关键是正确计算射线与每条边是否相交

  • 【调试】258- 前端调试各种收集-断点篇

    前言当我第一次知道这种东西,我也惊呆了,居然还有这种操作,实在强大到没朋友,从此爱上调试,按时下班。无数次通过调试解决问题的经验告诉我,调试绝对是开发者最应该掌握的重要技能之一。调试能帮助我们定位问题解决问题,每解决一个问题,经验值就往上涨。后面就可以考经验解决很多问题,并且能正确避开当年踩过的雷区,减少再犯次数,节省解决问题的时间,大大提高开发效率和编码水平。我想这应该是掌握调试技能的一个很重要意义,而不仅仅是为了解决问题。你是否遇到过以下情况:按钮的点击事件不起作用,点击按钮没反应。下载人家的demo运行,点击登录之后不出错页面也不跳转请求数据后填充到页面,但是页面却不显示数据某个请求总是被取消明明按照人家教程来写,代码一模一样,却得不到和教程一样的效果无意中写错字母,大小写部分,运行出错,但是看代码怎么都看不出问题按照文档的写法,控制台老是报错,且错误发生在使用的组件里面,不是自己写的代码等等,还有很多类型的问题以上问题基本都可以通过调试解决,只需要掌握相关的调试技巧就可以。断点调试的第一步就是打断点。断点的目的是,代码运行时在你想要开始调试的地方停下来。这个时候就可以查看当前上

  • GraphicsMagick 1.3.23 常用命令

    常用命令benchmark:测量和报告实用程序命令的性能batch:在交互式或批处理模式中发出多个命令convert:转换图像或图像序列,模糊,裁剪,驱除污点,抖动,临近,图片上画图片,加入新图片,生成缩略图等identify:描述一个或较多图像文件的格式和特性mogrify:变换一个图像或图像序列,模糊,裁剪,抖动等,Mogrify改写最初的图像文件然后写到一个不同的图像文件composite:将多个图片组合一起montage:从不同的图像创建一个复合图像(在一个网格中)compare:比较两个图像使用统计或视觉差display:在运行Xserver的工作站上显示图像animate:在运行X服务器的任何工作站上显示一个图像序列import:在Xserver或任何可见的窗口上输出图片文件,你可以捕获单一窗口,整个的荧屏或任何荧屏的矩形部分conjure:解释执行MSL(MagickScriptingLanguage)写的脚本time:执行一个实用程序命令的时间version:报告graphicsmagick版本,功能,和编译选项。常用的参数-crop x{+-}{+-}{%}宽x高+起

  • 测试MM希望你了解关于测试的5件事

    质量保证成为了软件开发项目中比较重要的一个环节。随着越来越多的群体转向敏捷软件测试,QA在程序创建中起到了一个更加重要的作用。不过,这里有几件QA管理人员希望利益相关者在软件测试中知道的事情: 1.开发人员认为他们知道一切 敏捷软件开发的目的是消除多余步骤,但是这可能会导致踏进对方的领地。例如,许多开发人员认为,他们知道如何,何时以及怎样进行测试,但代码中经常存在大量bug。SoftwareTestingHelp指出,开发人员常常自以为是地觉得自己比测试人员更厉害。事实是,双方都在朝着同一个目标努力:构建一个成功的应用程序。一起联合起来并分享知识,可以更好地测试,构建得更全面更丰富。 2.打折扣的测试指标 QA团队从测试指标中获取可操作的见解,但许多其他利益相关者会将这些数字奉为圣旨。这些统计是用来衡量测试人员能力和项目完成的。SoftwareTestingClub线程指出,管理人员往往不会考虑到这些信息的背景。如果数字显示进度减慢,那么,举个例子,可能是因为客户要求做一个改变。上下文将是推动QA团队,并促进高效测试管理的重要因素。 3.尊重测试人员 测试人员经常会感到自己的工作得不

  • Zookeeper之Watcher监听事件丢失分析

    在上篇博客中,介绍了zookeeper客户Curator对监听事件的封装及应用——《Zookeeper开源客户端Curator之事件监听详解》在讲解部分代码实例的运行结果时我们已经注意到,并不是所有的监听事件都会发送到客户端。比如连续更改一个节点的内容、创建节点再马上删除节点。本篇博客就讨论一下zookeeper监听事件丢失的原因及使用时的注意事项。案例packagecom.secbro.learn.curator; importorg.apache.curator.RetryPolicy; importorg.apache.curator.framework.CuratorFramework; importorg.apache.curator.framework.CuratorFrameworkFactory; importorg.apache.curator.framework.recipes.cache.NodeCache; importorg.apache.curator.framework.recipes.cache.NodeCacheListener; importorg

  • 8.图片切换

    1<!DOCTYPEhtml> 2<html> 3<headlang="en"> 4<metacharset="UTF-8"> 5<title></title> 6</head> 7<body> 8 9<!--<ahref="javacript:;">切换</a>--> 10<!--<ahref="#">切换</a>--> 11<ahref="http://www.baidu.com"style="margin:10px;display:block"onclick="fn();returnfalse;">切换</a> 12<imgid="img"src="image/1.jpg"width="400px"/> 13 14<script> 15//需求:点击a链接,img图片切换(行内式) 16//步骤: 17//1.获取事件源和图片 18//2.绑定事件 19//3.书写事

  • jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单、易套用的jQueryAJAX上传示例及代码下载。后台对文件的上传及检查,以C#/.NETHandler处理(可视需要改写成Java或PHP)。 有时做一个网站项目(不论是否ASP.NET),内附的FileUpload控件,功能不足(页面必须刷新、不支援AJAX),或外观太丑被用户嫌弃(却无法透过CSS自定义外观)。网路上虽已有许多可用的示例,如:jQueryFileUpload,但功能太强大、外观复杂,欲仅取出部分功能来引用,反而不易。因此我参考了两本书上、多个网路上的示例,整合、改写成此一示例,标榜:功能简单(够用就好)、外观可自定义(只用HTML的div、span、input,不被特定厂商的控件绑死)、日后做其他网站项目都易于使用(公司其他程序员,不必再改写一堆jQuery、JavaScript、CSS)。---------------------------------------------------------------WizardWuUpload上传文件(图片)日期:2015/02/19版本:v1.1--------------------------

  • #交互,分类讨论#CF1292E Rin and The Unknown Flower

    题目传送门 分析 先尝试锁定一个字母,显然询问\(CH,CO,CC\)会比直接询问\(C\)更优,虽然牺牲了最后一个位置是否为\(C\)的查询。 同理,询问\(HH,OH,CH\)会比直接询问\(H\)更优,虽然牺牲了第一个位置是否为\(H\)的查询。 可以发现这样询问非首尾位置未填的一定是\(O\),\(C,H\)一定会被询问出来。 然后首字母只可能填\(O,H\),尾字母只可能填\(C,O\),然后再三次判断就可以知道整个串(如果三次判断都不知道,那只能是最后一种情况) 那么操作代价就是\(\frac{5}{4}+\frac{4-1}{n^2}\),可以发现在\(n>4\)时都不超过\(\frac{7}{5}\),\(n=5\)时最小,为\(1.37\) 那么只剩下\(n=4\)的情况,显然直接这样问肯定会代价过高。 可以发现只要确定其中两个位置,就可以花不超过\(\frac{9-1}{16}\)的代价确定其它位置, 还是尝试锁定\(C\)字母,如果锁定得了那么只需要花\(\frac{3}{4}\)的代价, 同时其它位置就可以花不超过\(\frac{6-1}{16}\)的代

  • 编写一段代码,打印一个M行N列的二维数组转置。(交换行和列)

    importedu.princeton.cs.algs4.*; publicclassNo_1_1_13{ publicstaticvoidmain(String[]args) { intm=4; intn=3; int[][]a=newint[m][n]; for(inti=0;i<m;i++) { for(intj=0;j<n;j++) { a[i][j]=i+j; StdOut.print(a[i][j]); } StdOut.println(); } int[][]b=newint[n][m]; for(inti=0;i<n;i++) { for(intj=0;j<m;j++) { b[i][j]=a[j][i]; StdOut.print(b[i][j]); } StdOut.println(); } } }复制 以下是打印结果(在eclipse中运行)  

  • 石子合并问题

    经典石子合并问题 1.每次取任意两个堆合并,合并价值为两堆重量(价值)之和:   贪心,每次取最小的两堆(哈夫曼模型),优先队列可以直接写 2.每次取相邻两个堆合并,合并价值为两堆重量(价值)之和:   堆数很小的时候(堆数<3000大概):区间dp+平行四边形优化 #include<bits/stdc++.h> usingnamespacestd; #defineinf0x3f3f3f3f #definemaxn300 intsum[maxn],n; intMinval(){ intdp[maxn][maxn],s[maxn][maxn]; for(inti=1;i<=n;i++){ dp[i][i]=0; s[i][i]=i; } for(intlen=1;len<n;len++){ for(inti=1;i<=n-len;i++){ intj=i+len; dp[i][j]=inf; for(intk=s[i][j-1];k<=s[i+1][j];k++){//平行四边形优化 if(dp[i][k]+dp[k+1][j]+sum[j]

  • Code First Migrations更新数据库结构(数据迁移)

      背景 codefirst起初当修改model后,要持久化至数据库中时,总要把原数据库给删除掉再创建(DropCreateDatabaseIfModelChanges),此时就会产生一个问题,当我们的旧数据库中包含一些测试数据时,当持久化更新后,原数据将全部丢失,故我们可以引入EF的数据迁移功能来完成。   要求   已安装NuGet   过程示例 //原model复制 usingSystem.Collections; usingSystem.Collections.Generic; usingSystem.ComponentModel.DataAnnotations; publicclassLesson{ publicintlessonID{get;set;} [Required] [MaxLength(50)] publicstringlessonName{get;set;} [Required] publicstringteacherName{get;set;} publicvirtualUserInfoUserInfo{get;

  • windows API编程第一天2015.11.13

    学习windowsAPI编程 #include<windows.h> #pragmacomment(lib,"User32.lib") intWINAPIWinMain(HINSTANCEhInstance, HINSTANCEhPrevInstance, LPSTRlpCmdLine, intnCmdShow ) { MessageBox(NULL, TEXT("helloworld!\r\n"), TEXT("firstapplication!"), MB_OK|MB_YESNOCANCEL|MB_ICONEXCLAMATION|MB_DEFBUTTON3|MB_SYSTEMMODAL); return0; }复制 参考MSDN文档 Message_Box类型 MB_ABORTRETRYIGNORE 消息框包含三个按钮:中止,重试和忽略。 MB_OK 消息框包含一个按钮:好。 MB_OKCANCEL 消息框包含两个按钮:好和取消。 MB_RETRYCANCEL 消息框包含两个按钮:重试和取消。 MB_Y

  • 码教授往届师兄的宝贵经验

    勤于学习,不断进步 PHP方向的沈师兄主要针对职场经验进行了分享,他告诉小伙伴们,在职场,很多时候吃苦是福,因为你经历的多,你就收获的多,当领导给你很多任务的时候证明他信任你,如果你没有工作做,那你要思考你是不是会被替换;并且在工作中要注意沟通和执行的重要性。   java方向的杨师兄主要从学习方法进行了分享,他告诉所有的小伙伴学习是自己的事情,千万不要觉得上课好好听讲就够了,这只是最基本的,更多的是要下来之后不断的演练和复习,然后做笔记,对程序员来说,多听、多练、多想是非常重要的。(给杨师兄点赞,说的太好啦)   最后一位也是来自于java方向的彭师兄,彭师兄厉害了,从学员的面试下手,给小伙伴们总结了几个面试问题和回答方法,小伙伴们听得直记笔记,最后甚至直接叫了一个即将毕业的小伙伴上来进行模拟面试,现场进行技术官和面试者的正面交锋!给小伙伴们呈现了一场专业的、精彩的模拟面试!   作者:tecode1 链接:http://www.lofter.com/lpost/1f723135_12e5ecb3 来源:LOFTER

  • 手机APP测试

    一,手机APP测试的范围 -功能模块测试:  1.1运行   -App安装完成后的试运行,可正常打开软件   -APP打开测试,是否有加载状态进度提示   -APP打开速度测试,速度是否可观   -APP页面间的切换是否流畅,逻辑是否正确    注册      -用户名密码长度      -注册后的提示页面      -前台注册页面和后台的管理页面数据是否一致      -注册后,在后台管理页面提示    登录      -使用合法的用户登录系统      -系统是否允许多次非法的登录,是否有次数限制    &nb

  • 金蝶k3系统如何设置业务单据打印模板

    1.打开金蝶客户端工具包 2.在客户端工具包中选择单据套打设置->供应链套打->打开  3.输入用户名和密码  4.点击那个文件夹,在金蝶安装目录搜索对应单据的套打文件并打开该套打文件,本例以搜索采购订单为例如下  5.点击那个文件夹,在金蝶安装目录搜索对应单据的套打文件并打开该套打文件,本例以搜索采购订单为例如下  6.右键采购订单对象属性修改活动文本,所谓活动文本就是从单据上取的数据哪些带$号的就是活动文本,如下,就这样调整整个模板的显示和布局 7.制单界面使用套打设置 以采购订单为例 打开 采购订单界面 文件->勾选使用套打  再次点击文件》套打设置  切换到注册套打页签,浏览到我们刚才设置的套打文件  切换回打印选项页签,选择我们的套打文件,并设置打印每行分录数,把超出页边距警告前面的勾去掉,这样即使超过页边距在打印时也可以看到效果,然后我们就可以使用套打模板进行订单的打印了 注:没有注册的套打文件是没得选的   玉环人才吧 玉

相关推荐

推荐阅读