Blazor带我重玩前端(一)

写在前面曾经我和前端朋友聊天的时候,我说我希望有一天可以用C#写前端,不过当时更多的是美好的想象,而现在这一切正变得真实…… 什么是Blazor 我们知道浏览器可以正确解释并执行JavaScript代码,那么浏览器是如何执行C#代码的呢?答案是通过WebAssembly.通过WebAssembly,我们可以让浏览器运行很多的高级语言,如 C#.C.C++.GO等,并使他们运行在基于内存安全的沙箱环境中.如下图所示: 作为一个已经五六年没有写过前端的.NET程序员,遇到Blazor实在是幸运中的…

Blazor带我重玩前端(三)

写在前面需要升级VS2019以及.NET Core到最新版(具体的最低支持,我已经忘了,总是越新支持的就越好),以更好的支持自己开发Blazor项目. WebAssembly 搜索Blazor模板选择Blazor WebAssembly App模板项目实例项目实例 BlazorApp.Shared:提供最一般的支持,包括各个Model BlazorApp.Client:依赖BlazorApp.Shared,该项目侧重于Pages功能 BlazorApp.Server:依赖BlazorAp…

Blazor带我重玩前端(四)

布局 Blazor中的布局和MVC中的布局是类似的. 创建布局新建一个Razor页面,所有新增的布局都要继承LayoutComponentBase,同时标识自定义内容的输出位置,即标识Body的位置.如图所示: 应用布局我们修改一下index.razor页面中的代码,增加@layout MyLayout.运行后,按F12查看网页源代码如下: 布局的内容被<app></app>标签包着,这也意味着,我们的layout并不是页面的全部内容,而仅仅只是blazor相关的内容. 顺便说…

Blazor带我重玩前端(五)

概述本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第一篇,后续会有第二篇. 我们可以视组件是一个类,我们先看一下前文所说的Index.Razor页面生成的C#代码. 在此,先补充一下该页面的原始代码: 1: @page "/" 2: @layout MyLayout 3: <h1>Hello, world!</h1> 4: 5: Welcome to your new app. 6: 7: <Surve…

Blazor带我重玩前端(二)

概览 Blazor目前有两种托管模式,一种是Server-Side模式,一种是WebAssembly模式.官方首先支持的是Service-Side模式,使用WebAssembly模式,需要更新到最新版VS2019. 小编目前的精力是更多的专注于Blazor-WebAssembly模式的研究,所以本系列文章只会对Server-Side模式做简要说明. WebAssembly WebAssembly模式(也可叫做Client-Side模式),WebAssembly前文已经说了很多了,本文不再做额外讨…

Blazor带我重玩前端(六)

本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第二篇. 双向绑定概述如图所示当点击单项绑定的时候,MyOnewayComponent里的属性值会发生变化,这种变化是单项的,仅仅只是本地副本的值的变化,并不会引发父页面的值发生变化.但当点击父页面的Click Me的时候,会修改MyOnewayComponent的属性值会被修改.所以单项绑定强调的是占位,以达到动态输出的目的. 当点击双向绑定的时候,三个值会同步发生变化.即便点击父页面的Click…

重学前端 --- Promise里的代码为什么比setTimeout先执行？

首先通过一段代码进入讨论的主题 var r = new Promise(function(resolve, reject){ console.log("a"); resolve() }); setTimeout(()=>console.log("d"), 0) r.then(() => console.log("c")); console.log("b") // a b c d 了解过 Promise 对象的都知道…

重学前端--js是面向对象还是基于对象？

重学前端-面向对象跟着winter老师一起,重新认识前端的知识框架 js面向对象或基于对象编程以前感觉这两个在本质上没有什么区别,面向对象和基于对象都是对一个抽象的对象拥有一系列的行为和状态,本质都是对象层.拜读了winter老师的音频和文档,颇有收获. 对象: 一个可以触摸或者可以看见的东西: 人的智力可以理解的东西: 可以指导思考或行动(进行想象或施加动作)的东西. 对象的特点: 对象具有唯一标识性:即使完全相同的两个对象,也并非同一个对象. 对象有状态:对象具有状态,同一对象可能处于不…

node十年心酸史，带你了解大前端的由来！

前言近年来,随着前端的丰富,前后端分离是趋势.各种东西如雨后春笋一般,层出不穷.node.js的出现,使前端真正意义上变成了大前端. 前端由来之HTML发展史 1990 年,Tim Berners-Lee以超文本语言 HTML 为基础,在由NeXT公司制造的电脑上发明了最原始的 Web 浏览器.总的来说,这一时期浏览器技术还比较简单,很多浏览器都停留在文字和图形处理上,没有太多的新技术,也没有经典的盈利模式和商业模式,整个资本市场对浏览器的关注不高. 1991 年,Tim 作为布道者在 In…

Datatables带参重绘

研究了好久,最后发现只需要加上参数("bDestory":true,) 即可实现每次刷新就是新的重绘,而无需调用什么desctory init clear等等函数..…

架构篇 | 带你轻松玩转 LAMP 网站架构平台（一）

作者 | JackTian 微信公众号 | 杰哥的IT之旅(ID:Jake_Internet) 转载请联系授权(微信ID:Hc220066)备注:来自博客园 1.什么是 LAMP 架构? LAMP 架构是成熟的企业网站应用模式之一,能够协同工作的一套系统及相关软件,能够提供动态 Web 站点服务及其应用开发环境. LAMP 是一个缩写词,L:Linux操作系统,A:Apache网站服务器,M:MySQL数据库服务器,P:PHP.Python.Perl编程语言; 2.LAMP 架构平台的构成组件…

带你快速上手前端三剑客之css

CSS介绍 CSS(Cascading Style Sheet , 层叠样式表)定义如何显示HTML元素.当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染) 组成每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. 选择器 {属性1:属性值:属性2:属性值} h1 {color:red;font-size:14px} CSS的三种引入方式嵌入式是将CSS样式集中写在网页的 head标签对应的style标签对中.格式如下…

新霸哥带你轻松玩转Oracle数据库

接触过软件开发的朋友可能都会知道oracle,在开发的过程中,数据存储都可能会用到oracle的,因为oracle具有处理速度快,安全级别特别的高.但是有一个缺点就是比较的贵,只有一个大型的公司才有可能接触到的,看到这里可能很多的朋友一定很想了解oracle吧,下面新霸哥将带你走进oracle的世界. 首先介绍一下Oracle中对于字符串的处理 char varchar varchar2 nvarchar long clob这些都是oracle中常用的字符串类型,在这里用的比较多的就是varch…

带你轻松玩转Git--图解三区结构

在上篇文章的结尾我们提到了Git 的三区结构,在版本控制体系中有这样两种体系结构,一种是两区结构一种是三区结构.接下来我们通过对Git三区的结构学习来帮助我们更好的去理解并运用Git. 两区结构是其他版本控制软件常用的结构:工作区--版本库,如下图工作区直接跟版本库打交道从版本库中检出内容到工作区. 从工作区提交内容到版本库. 三区结构是Git的结构:工作区--暂存区--版本库,跟二区的不同是在中间加了一个暂缓区. 此时工作区直接跟暂缓区打交道暂缓区跟版本库打交道. 从工作区中添加内容到暂缓…

带你轻松玩转Git--瞬间创建本地仓库

在上一篇文章中我们对版本控制有了一个比较宏观的了解,同时也能够看到Git 所处在的历史地位.并且对版本控制系统的体系进行了一个宏观的对比,貌似让读者看起来挺复杂的样子. 笔者将会尽可能的简单向大家分享我所了解的Git,能够让初学者一步步的去玩转这个Git工具. Git的官网是https://github.com/ 在用这个工具之前需要先安装一下Git软件.笔者用的是Windows系统,可以直接在官网上进行下载(如果能够顺利下载下来的话),不过为了方便大家,已经为大家下载好,点击就可以下载了.跟其…

带你重拾JavaScript(2)之console的你所不知道的功能

JavaScript最常用的调试工具就是console.info()了.console是浏览器中window对象的属性之一,由浏览器对象模型(BOM)提供,作用是访问浏览器控制台,你可以通过console输出有助于调试代码的字符串.数组.对象.console还附带了一些你平时不了解的好用方法,本文可以丰富你的调试工具. 我们一般通过 window.console.info('hello world'); 或者 console.info('hello world'); 由于window可以省略所以…

CAP带你轻松玩转Asp.Net Core消息队列

CAP是什么? CAP是由我们园子里的杨晓东大神开发出来的一套分布式事务的决绝方案,是.Net Core Community中的第一个千星项目(目前已经1656 Star),具有轻量级.易使用.高性能等特点. https://github.com/dotnetcore/CAP 本博客主要针对易用性这一点,展开叙述,一起看看CAP如何结合EF Core和RabbitMQ带领小白轻松走入分布式消息队列的世界. 准备首先,你需要搭建一套RabbitMQ系统,搭建过程在此不再叙述,如果大家觉得麻烦,可…

忘掉Ghost！利用Win10自带功能，玩转系统备份&恢复 -- 系统重置

之前几篇介绍的如何备份.恢复系统,在遇到问题的时候可以轻松应对. 如果系统出现问题,还可以正常启动,但是之前没有备份过系统,那该怎么办? 碰到这种问题,可以使用Win10系统的“系统重置”功能: 按照如下路径进入系统重置功能:“开始” --> “设置” --> “更新和安全” --> “恢复” --> “重置此电脑” --> “开始” 1.选择需要删除的文件,如果电脑已经“并入膏肓”了,那就选择“删除所有内容吧”, 放心,不会删除D盘数据,下边会有选项可以选的.这样系统恢复的…

忘掉Ghost！利用Win10自带功能，玩转系统备份&恢复 -- 关于系统恢复的深度思考

上一篇文章讲了,系统可以正常启动,如何从D盘恢复系统到C盘的情况. 如果系统不能启动,要怎么去恢复系统,恢复后会是什么结果? 先说明系统结构: 系统版本:Windows 10 (1709) 硬盘1(50GB):C盘(系统盘),D盘(数据盘),引导盘(500MB) 硬盘2(40GB):E盘如果系统不能正常启动,可以使用系统盘进行引导,进入系统恢复程序: 1.选择系统语言: 2.选择“修复计算机”,即可进入系统恢复程序: 3.可以进行系统恢复了! 4.关于不同情况下系统恢复效果的对比: [未完待续…

CAP带你轻松玩转ASP.NETCore消息队列

CAP是什么? CAP是由我们园子里的杨晓东大神开发出来的一套分布式事务的决绝方案,是.Net Core Community中的第一个千星项目(目前已经1656 Start),具有轻量级.易使用.高性能等特点. https://github.com/dotnetcore/CAP 本博客主要针对易用性这一点,展开叙述,一起看看CAP如何结合EF Core和RabbitMQ带领小白轻松走入分布式消息队列的世界. 准备首先,你需要搭建一套RabbitMQ系统,搭建过程在此不再叙述,如果大家觉得麻烦,…

【Web前端Talk】无聊吗？写个【飞机大战】来玩吧(上篇)

01前言介绍微信小游戏是基于微信客户端的游戏,它即点即玩,无需下载安装,体验轻便,可以和微信内的好友一起玩,比如PK.围观等,享受小游戏带来的乐趣.那如何开发一款属于自己的小游戏呢? 源码地址: https://github.com/A123asdo11/aircraft_war (新版ccc已无法正常使用,需要修复,文章作者花费了大量的时间和精力,在ccc2.0以上版本进行了修复,并在微信小游戏正常运行) 02微信小游戏飞机大战简介 1.大事记经典飞机大战是腾讯交流软件微信5.0版本在20…

基于AngularJS的企业软件前端架构[转载]

这篇是我参加QCon北京2014的演讲内容: 提纲: 企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢? B/S企业软件前端开发模式大体上与桌面软件类似,都是偏重量级的,在前端可能会有较多的业务逻辑,这些业务逻辑如何被合理模块化,与界面分离,以便测试,成为这个领域的一个重要挑战.另一方面,由于企业应用的界面相对规整,偏重的是数据存取,没有太多花哨的东西,所以常见的界面控件也是可枚举的,如何让开发界面的工作能…

从〇开始构架前端（NLDV框架）

从〇开始构架前端(NLDV框架) 框架设计模式摘要:一个普通应用,大到微信, 小到豆瓣FM,必不可少的都包括四部分:Network.Logic.Data.View(NLDV).如何把他们组合起来,结构清晰.又协作便利,是前端主程的基本修养.本文用通(有)俗(点)易(啰)懂(嗦)的语言,界定了这四个模块的职能范围,同时提供了一种简单易用的组织方式.知者可互动,不知者可参考. 博客: http://www.cnblogs.com/jhzhu 邮箱: jhzhuustc@gmail.com 作者:…

如何伪装成为一名前端（JS方向）

作为一个菜鸟级别的.NET开发者,在连服务器都没搞定的情况下,要研究前端,这是在扯淡,不过,迫于工作的需要,时常需要去前端打杂,所以经常伪装成为一名前端,有时候竟产生错觉,去应聘Y一份前端work吧...... 第一招:收集jquery的 chm帮助手册因为经常但又不是很频繁的写js,记不住jquery的api,咋办?当然是chm的帮助手册方便查询,其他各类JS框架都有chm的速查版本下载地址 http://ishare.iask.sina.com.cn/f/12406216.html…

b2c项目基础架构分析（二）前端框架以及补漏的第一篇名词解释

继续上篇,上篇里忘记了也很重要的前端部分,今天的网站基本上是以一个启示页,然后少量的整页切换,大量的浏览器后台调用web服务局部.动态更新页面显示状态这种方式在运作的,从若干年前简单的ajax流行起来,后台是基于xml的web服务,到今天主流的web服务是基于所谓rest架构的json为载体的web服务,其实我个人觉得rest和过去xml的soap相比并没有本质级别的改变,反倒是今天的浏览器内运作的前端框架有更大的改变. 我个人不是擅长前端的开发人员也不热衷于前端内容,所以为了帮助团队的前端,我…

如何才能成为一个合格的web前端工程师

转载原文地址:https://juejin.im/post/5cc1da82f265da036023b628 开篇前端开发是一个非常特殊的行业,它的历史实际上不是很长,但是知识之繁杂,技术迭代速度之快是其他技术所不能比拟的.winter在他的<重学前端>课程中提到: 到现在为止,前端工程师已经成为研发体系中的重要岗位之一.可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更没有系统性的教学方案出现.大部分前端工程师的知识,其实都是来自于实践和工作中零散的学习. 这样是…

ASP.NET Core Blazor 初探之 Blazor Server

上周初步对Blazor WebAssembly进行了初步的探索(ASP.NET Core Blazor 初探之 Blazor WebAssembly).这次来看看Blazor Server该怎么玩. Blazor Server Blazor 技术又分两种: Blazor WebAssembly Blazor Server Blazor WebAssembly上次已经介绍过了,这次主要来看看Blazor Server.Blazor Server 有点像WebAssembly的服务端渲染模式.页面在…