前端
关注
分享
扫一扫
文章平均质量分 80
淼叔
资深架构师，PMP、OCP、CSM、HPE University讲师，EXIN DevOps Professional与DevOps Master认证讲师，曾担任HPE GD China DevOps & Agile Leader，帮助企业级客户提供DevOps咨询培训以及实施指导。熟悉通信和金融领域，有超过十年金融外汇行业的架构设计、开发、维护经验，在十几年的IT从业生涯中拥有了软件开发设计领域接近全生命周期的经验和知识积累，著有企业级DevOps技术与工具实战。
展开
-
JSON基础：fastjson使用说明
Fastjson虽然最近频爆问题，但是作为Json使用较为广泛的库，与Gson、Jackson一起仍然是众多开发者的重要选择，即使出于安全的角度考虑，从了解fastjson的使用方式以便替换的角度，也需要了解一下fastjson的使用方式，这篇文章进行简单的总结和整理。原创 2020-06-12 07:03:07 · 750 阅读 · 0 评论 -
安全基础：0-day漏洞
这篇文章以阿里巴巴的FastJSon来介绍一下Zero-day（0-day）漏洞的基础常识。原创 2020-06-09 06:17:46 · 5919 阅读 · 2 评论 -
flowchar.js使用指南
flowchar.js是一个javascript库，可以签到很多应用中直接使用，所以在很多类型的平台都是直接支持的，比如优快云的markdown语法也是支持flowchart.js的，这篇文章的flowchart.js示例也都是使用mermaid方式直接指定并进行显示的。这样，用户就可以直接已DSL的方式非常容易地进行流程图的绘制了。原创 2020-03-22 10:50:13 · 11824 阅读 · 0 评论 -
Angular 入门教程系列：33：移动端统计图表F2
F2应该就是Fast & Flexible的缩写，从名称上就能看出其所关注的场景。F2也是蚂蚁金服下的一款开源可视化的前端组件库，使用F2可以很简单地根据数据创建出统计图表，F2源于早期的G2-Mobile，所以它是针对于移动端的。移动端有很多需要考虑的因素，比如：性能/大小/扩展性等。这篇文章中会使用简单的例子来创建一个柱状图，用于显示某一星期七天不断出现的bug数目。安装f2...原创 2018-08-07 06:26:28 · 5303 阅读 · 0 评论 -
Angular 入门教程系列：24：Angular 6 + NG-Zorro
NG-Zorro发行到1.0版本后，理论上说兼容性考虑地会好一些，可以考虑引入了。因为其需要Angular 6的版本，而Angular 6在本年度5月份左右刚刚发布，而且考虑到rxjs等相关的变化，低版本的要升上来还是有一点点修改和测试的量的，但是早晚要升，从这篇文章开始使用Angular 6 和 Ng-zorro的新版做demo。准备 软件 版本 node v8...原创 2018-08-01 06:51:40 · 9473 阅读 · 2 评论 -
Angular 入门教程系列：31：使用子路由和菜单动作
在这篇文章中创建一个子路由用于显示conent，用于展示各种组件比如G2如何使用。创建moduleliumiaocn:default-layout liumiaolsdefault−layout.component.cssdefault−layout.component.spec.tsdefault−layout.component.htmldefault−layout.compone...原创 2018-08-04 11:26:59 · 4804 阅读 · 0 评论 -
Angular 入门教程系列：30：设置页面路由
上篇文章搭建了一个页面的框架，这篇文章中将会添加路由，使得页面可以通过路由来进行控制。原创 2018-08-04 05:45:43 · 4288 阅读 · 0 评论 -
Angular 入门教程系列：29：简单布局的页面
这篇文章用最简单的方式做一个包含左侧可收缩的侧边栏菜单和固定头部的页面布局。修改内容基本上还在前面的文章上使用的内容，为了简单，只是简单修改一下HTML和CSS的内容default-layout.component.htmlliumiaocn:default-layout liumiao$ cat default-layout.component.html <nz-...原创 2018-08-04 05:11:10 · 7963 阅读 · 0 评论 -
Angular 入门教程系列：28：NRM 多重npm库管理方式
nrm是一个MIT的开源的npm package，使用npm install nrm即可。它的作用在于管理各种常用的库，比如taobao的cnpm或者缺省的npm，其作用基本等于npm get/set registry + 常用的registry的地址。概要信息 项目 说明 开源/闭源 开源 License类别 MIT License 代码管理...原创 2018-08-04 05:10:27 · 4425 阅读 · 0 评论 -
Angular 入门教程系列：23：Angular 6新特性之Angular Material
Angular Material是包含Navigation/Dashboard/Table三种图形类型，这篇文章中将会了解一些其使用的方式。准备:安装Material进入到上篇文章创建的demo2，使用ng add进行安装liumiaocn:demo2 liumiao$ pwd/tmp/trainings/angualr/demo2liumiaocn:demo2 liumi...原创 2018-07-21 14:38:25 · 8700 阅读 · 0 评论 -
Angular 入门教程系列：22：Angular 6新特性之cli部分
Angular6的发布(2018/05/04)已经过去大概两个多月了，从这篇文章开始使用angular6进行试验。生成项目框架liumiaocn:angualr liumiao$ ng new demo2 --skip-installCREATE demo2/README.md (1022 bytes)CREATE demo2/angular.json (3539 bytes)C...原创 2018-07-20 21:57:12 · 5783 阅读 · 0 评论 -
Angular 入门教程系列：25：Zorro定制主题
与之前的版本相比，稳定版本的zorro提供了定制主题的功能，而且和Ant Design React一样，主题定制文件是可以通用的。因为Ant Design的样式本身就是Less的，所以整体的调整会非常的简单。主题可定制可调整，应该是这个版本的zorro的最大亮点之一。使用前提Less的版本需要降到2.7.3，其实，Angular 5所支持的版本即为2.7.3:liumiaocn:n...原创 2018-08-01 20:03:22 · 7171 阅读 · 0 评论 -
Angular 入门教程系列：26：使用zorro进行页面布局
这篇文章介绍一下Angular应用的页面布局方式，这里直接使用ng-zorro-antd的页面布局方式进行举例。zorro的页面布局简单的来说，zorro的layout有如下几种组件 类型 说明 nz-layout 布局容器，与其他layout组件结合使用 nz-header 顶部布局部分，与nz-layout结合使用 nz-sider...原创 2018-08-01 22:15:43 · 7019 阅读 · 0 评论 -
Angular 入门教程系列：32：统计图表G2
G2是蚂蚁金服下的一款开源可视化的前端组件库，使用G2可以很简单地根据数据创建出统计图表，这篇文章中会使用简单的例子来创建一个柱状图，用于显示某一星期七天不断出现的bug数目。安装g2从版本3开始，data-set进行了分离，简单的方式可以不直接使用data-set，可以不必安装@antv/data-set，这篇文章便没有安装data-setliumiaocn:ng6demo li...原创 2018-08-07 06:25:53 · 9400 阅读 · 0 评论 -
Angular 入门教程系列：34：Angular6下的Http模块与Rxjs6
Angular6的升级，略有影响的地方应该主要集中在Rxjs6，而至于http，在Angular4.3之后就发生了变化，如果没有欠债的话，升级应该很简单。即使有欠债的话，修改的内容也不多。rxjs的变换rxjs6主要在包的结构/pipe的使用方式/API的重命名这几点与旧版本的使用方式不相容的变更，所以导致在实际使用中，有如下的变化import的方式 import类...原创 2018-08-07 06:26:58 · 8639 阅读 · 0 评论 -
Angular 入门教程系列：27：可折叠的sidebar和菜单
zorro对nz-sider和menu都提供了折叠的选项，可以很容易实现动态折叠的效果。menu的nzInlineCollapsedmenu通过nzInlineCollapsed的设定进行htmlliumiaocn:default-layout liumiao$ cat default-layout.component.html <nz-layout> ...原创 2018-08-03 06:00:02 · 8157 阅读 · 1 评论 -
Angular 入门教程系列：35：Restful的增删改查
这篇文章来介绍一下如何进行前后端交互，一个常见的场景就是前端调用后端提供的restful api，进行增删改查，结合之前提到的新版本的http模块和rxjs，这篇文章首先使用kong搭建一个提供后端restful的api接口，对微服务的api增删改查进行处理，以实现api的简单管理。事前准备搭建kong，同时启动api服务，然后将此api注册到kong上，通过kong提供的查询的相关Res...原创 2018-08-08 04:53:25 · 5394 阅读 · 0 评论 -
Angular 入门教程系列：37：使用ng-alain快速开发
ng-alain在ng-zorro-antd上再封一程，可以更快加速开发速度，目前在github上已经超过1800个star。这篇文章来简单看一下如何使用。创建应用框架因为alain缺省使用使用less作为样式设定，在创建骨架时需要指定style为less方式。使用ng new alaindemo –skip-install –style less进行创建。下载依赖可以使用ya...原创 2018-08-08 05:19:51 · 17225 阅读 · 2 评论 -
Angular 入门教程系列：36：Restful的增删改查
上篇文章中讲解了增删改查中的查，这篇来看一下如何进行增删改。删除使用delete进行删除，一般页面设计的时候也基本都是在列表页进行操作的。首先为删除的链接添加一个函数，同时将...原创 2018-08-17 20:31:03 · 4855 阅读 · 0 评论 -
Angular 入门教程系列：38：升级小结(5.2->6.1)
在前面的文章中也曾经分别提到过，angular6由于存在一些稍大的变化，所以不能像Angular4到Angular5那样基本无感地进行升级，这里结合官方提示，简单整理一下Angular5.2到目前稳定的6.1的升级要点。升级前后版本：升级前版本升级后版本5.26.1事前准备变更内容V5.2V6.1说明HttpModuleHttpCli...原创 2018-10-29 06:46:04 · 3890 阅读 · 0 评论 -
前端Javascript代码质量扫描解决方案：Karma + Jasmine + lcov + Sonarqube
代码质量扫描的流行工具sonarqube，java系的应用开发框架可以使用Maven/Gradle作为构建工具，JUnit作为单体覆盖率测试工具，使用Jacoco可视化提供支撑。而Javascript则可以使用Karma+Jasmine+lcov+Sonarqube进行类似的质量扫描。原创 2018-12-27 21:58:24 · 7867 阅读 · 3 评论 -
Angular 入门教程系列：19：多版本的Node管理nvm
在实际的工作中往往需要在开发机上安装多个node的环境，然后在此基础上对应的angular的版本也有所不同。所以往往需要在一台开发机器上保持多个node的版本和相关的依赖是非常常见的需求，尤其是package的更新经常收到各种原因的困扰，保证本地可用的各个版本的node环境对于需要对应不同项目的node环境的开发者者来说可以考虑使用nvm。node版本支持计划根据node.js工作组的...原创 2018-07-14 06:09:55 · 5772 阅读 · 0 评论 -
Angular 入门教程系列：21：使用cli快速开发
angular-cli是angular开发团队自行维护的一个开发工具， angular/cli概要信息 项目 说明 官网 https://cli.angular.io/ 开源/闭源 开源 License类别 MIT License 代码管理地址 https://github.com/angular/angular-cli...原创 2018-07-16 21:45:43 · 6681 阅读 · 0 评论 -
Angular 4入门教程系列：9：TypeScript：ECMAScript之前世今生
在以例子为主的官方介绍中，我们学习到了npm install typescript，也看过tsconfig.json的typescript配置文件的配置文件，比如里面写的ES5到底是什么。另外那些.ts的文件，都是typescript的，跟angular有什么关系，这篇文章将会介绍一下最基础的知识，大体对其有些概念上的认识。原创 2017-11-06 21:33:19 · 5217 阅读 · 0 评论 -
Angular 4入门教程系列：8：Tour Of Heroes之前后端服务
这篇文章我们将会重点学习一下Angular的HttpModule和In-Memory Web API的使用方法。学习时间大概5-10分钟。事前准备需要事前安装模块angular-in-memory-web-api才能保证此部分学习能够正常进行原创 2017-11-09 21:19:47 · 6297 阅读 · 0 评论 -
Angular 4入门教程系列：7：Tour Of Heroes之路由
路由可是说是Angular4非常重要的一个功能，这篇文章中我们将会继续使用Tour Of Heroes的例子来学习路由的使用方法。具体来说我们将学会：使用Angular路由进行导航/设定路由参数/使用管道格式化数据/在多个组件之间共享服务,学习时间大概需要十分钟。原创 2017-11-06 19:31:29 · 5628 阅读 · 2 评论 -
Angular 4入门教程系列：5：Tour Of Heroes之组件复用
这篇文章将会学习一下如何进行组件的复用，以及组件如何接受输入，父子组件如何进行绑定。学习目标通过这篇文章，将会学到如下内容：将原本的一个文件拆成多个多个组件之间如何进行关联学习时长五分钟左右原创 2017-10-29 09:53:52 · 6254 阅读 · 1 评论 -
Angular 4入门教程系列：4：Tour Of Heroes之事件处理
上篇文章我们学习了对象的插值表达式和双向数据绑定，这篇我们将学习一下ngFor与ngIf的写法以及事件的处理方式。学习目标这篇文章将实现如下目标：显示英雄对象的列表当点击对象的时候,显示该对象的详细信息学习时长大概5-10分钟原创 2017-10-28 12:31:07 · 5462 阅读 · 0 评论 -
Angular 4入门教程系列：2：从HelloWorld去理解Angular程序的组成和启动
上篇文章中我们了解到了如何使用cli创建一个项目骨架，接下来我们来学习一下这个项目骨架的组成以及Angular程序的启动过程。原创 2017-10-27 16:31:16 · 6518 阅读 · 1 评论 -
Angular 4入门教程系列：3：Tour of Heroes之双向数据绑定
这篇文章将理解官方教程的第一个例子，在这篇文章中我们将会学到：自己如何创建一个程序框架Angular的双向数据绑定如何使用原创 2017-10-28 09:50:05 · 5798 阅读 · 0 评论 -
Angular 4入门教程系列：1：运行在Docker中的HelloWorld
Angular作为目前前端的一个重要选择，加之背后站着google，得到了越来越多的开发者的青睐。但是发现没有按照由浅入深地实例化的教程，虽然官网的教程已经不错，但是初始入门的细节没有提到，再加之网络等问题，决定把官网的教程替大家做一遍给大家留个笔记。同时可能会结合docker进行使用，当然没有安装docker也完全没有关系，同样执行就可以了。原创 2017-10-27 05:49:09 · 9850 阅读 · 2 评论 -
前端基础之CSS（1）
前端基础之CSS，只看需要的，简单memo如下。原创 2016-09-20 21:15:44 · 4926 阅读 · 0 评论 -
Angular 4入门教程系列：10：TypeScript：结合gulp的第一个Helloworld
这篇文章开始来简单地进行一下typescript的入门。为了简单练习，结合使用前端构建工具gulp进行第一个typescript的HelloWorld程序。学原创 2017-11-12 12:18:24 · 5787 阅读 · 0 评论 -
Angular 4入门教程系列：11：TypeScript：基础数据类型
这篇文章将会来练习一下如何使用typescript的基础数据类型。学习目标练习typescript的基础数据类型使用方式。学习时间：5分钟。事前准备请参看如下文章，结合gulp进行简单环境搭建：http://blog.youkuaiyun.com/liumiaocn/article/details/78510285原创 2017-11-12 17:37:54 · 8568 阅读 · 2 评论 -
Angular 入门教程系列：20：包管理工具yarn
一般安装node之后自带npm管理工具，而操作也基本使用npm install等进行相关的依赖安装非常方便。yarn也是node的包管理工具，聚焦于更加快速/稳定/安全的进行依赖管理，这篇文章介绍一下yarn和其使用上的一些特点。概要信息 项目 说明 官网 https://yarnpkg.com 开源/闭源 开源 License类别 B...原创 2018-07-16 21:24:30 · 7449 阅读 · 0 评论 -
Easypack容器系列之：Nexus 3：NPM私库
Nexus作为私库管理最为流行的工具之一，用于包的管理和Docker镜像管理的私库管理场景中非常常用，但同时也可以用于NPM私库等的管理。Why Nexus 3这里整理了为什么使用Nexus 3的一些理由，在做选型的时候可以做一个简单参照。这篇文章将简单介绍一下如何使用nexus3进行npm私库设定和使用。原创 2017-11-07 09:20:37 · 8254 阅读 · 0 评论 -
Angular 4入门教程系列：17：NG-ZORRO：Layout
这篇文章介绍一下如何使用NG-ZORRO的layout相关的组件。原创 2017-11-19 05:22:55 · 10446 阅读 · 1 评论 -
Angular 4入门教程系列：16：NG-ZORRO：ICON/Button/Grid
NG-ZORRO使用起来非常方便，上手很快，这篇文章介绍一下如何使用NG-ZORRO的ICON/Button/Grid。原创 2017-11-19 05:02:23 · 12655 阅读 · 0 评论 -
Angular 4入门教程系列：15：NG-ZORRO的使用方式
这篇文章介绍一下Angular的优秀国内UI组件库NG-ZORRO，并演示一下如何使引入NG-ZORRO到项目之中。Why NG-ZORRONG-ZORRO由阿里计算平台事业部、阿里云等不同部门的开发人员在原业务组件的基础上构建而成，于2017/8/15在github上发布了第一个对外的版本0.5.0-rc.0，版本更新很快，三个月已经接近有12次更新之多，基本周发布的快速迭代，目前最新版本为0.6原创 2017-11-14 05:25:17 · 33589 阅读 · 6 评论 -
Angular 4入门教程系列：14：PrimeNG的使用方式
这篇文章介绍一下Angular的老牌UI组件库PrimeNG，并演示一下如何使引入PrimeNG到项目之中。原创 2017-11-13 21:47:00 · 12395 阅读 · 5 评论