前言 首先感谢下 cipchk基于 Ng-Zorror 框架上制作的ng-alain . 之前很早就关注了 ng-alain,今天得空折腾了下. 折腾的时候发现官方文档有些坑,没有写清楚,所以我作为一些补充吧~ 之前在微软MVP群里,董斌辉邀请了cipchk做了一次分享,厚着脸皮要了PPT,看了看ng-alin的定位.跟我的项目契合度 很高.那么我们就试试水呗. 正文 说事情,要PPT别找我. 如何使用 安装&配置 第一种方式: 直接 clone git 仓库 $ git clone --dep…
官方文档:https://ant.design/docs/react/introduce-cn 说明:Ant Design 是一个 ui框架,和 bootstrap 一样是ui框架.里面的组件很完善,开发中后台系统非常方便.分别基于react.vue.angular框架,各自开发了一套 Ant Design 的UI框架.(这里主要讲react框架的 Ant Design) 一.通用组件 1.Button 按钮 2.Icon 图标 3.Typography 排版: 这个是文案的排版 二.布局 1.…
一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页面: 技术博客风格: 详情页风格: 详情页留言风格: 1.3后台风格: 表格风格: 博客发布风格: 以上看到的系统页面是目前系统完成的风格,以后页面设计都参考这些页面风格. 二.使用前端web框架以及插件说明 2.1选择前端web框架,我找了很多框架,以前学过自学过bootstrap觉得对于没有前端…
一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页面: 技术博客风格: 详情页风格: 详情页留言风格: 1.3后台风格: 表格风格: 博客发布风格: 以上看到的系统页面是目前系统完成的风格,以后页面设计都参考这些页面风格. 二.使用前端web框架以及插件说明 2.1选择前端web框架,我找了很多框架,以前学过自学过bootstrap觉得对于没有前端…
UI是User Interface的缩写.通常被觉得是MVC中View的部分,作用是提供跟人机交互的可视化操作界面. MVC中Model提供内容给UI进行渲染,用户通过UI框架产生响应,一般而言会由控制层调用业务逻辑进行处理.并把处理结果以Model方式返回View,再次渲染.UI框架的大致过程就是如此.按实现方式能够分为RIA和瘦client方式,眼下基于B/S的瘦client方式比較流行. UI框架套路上非常easy,可是想要做好可就不easy了.眼下基于MVC的框架灿若繁星.不客气的说是个…
祈澈姑娘 程序员一枚 本文作者祈澈姑娘,转载请声明 前端的技术日渐更新,最近得空,将前端常见的框架总结了一下,在开发的过程之中,有了这些,不断能够提高自己的工作效率,还可以在工作之余了解更多. 1.Layui 官方网址:http://www.layui.com/ Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用.从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发.,从核心代码到API的每一处细节都经过精…
背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的angular拥抱typescript,更是为后端开发量身打造, 学习angular,可以参考学习笔记: Angular快速学习笔记(4) -- Observable与RxJS Angular快速学习笔记(3) -- 组件与模板 Angular快速学习笔记(2) -- 架构 Angular 快速学习笔记(…
一:angular动态绑定样式 举个栗子: <tr *ngFor="let dataTr of tableData;let i = index" [formGroupName]="i" [ngClass]='isHideClass(i)'> isHideClass(index){ const data = this.tableData[index]; // if(data['532411351520251904'].value.valueText==='…
前端领域最近几年发展的特别迅速,可以说是百家争鸣.在底层的前端框架领域中,最早是jquery称霸互联网,近两年MVVM类型的框架慢慢成为主流,Vue.React和Angular三大框架并驾齐驱.可以说,目前这四种是开发者用的最多使用最广的底层框架,也由此衍生了大量基于这些框架的免费UI库. 这些年不断有新的框架冒出来,又不断有旧的框架被淘汰.2017年马上到尾声了,在这里总结一下基于Vue.React.Angular和Jquery这四大框架衍生的,经受过时间检验深受广大开发者欢迎的UI框架. 一…
前言 之前是用Vue的,现在由于工作原因,开始使用Angular.分别是Vue2和Angular5入的坑.只是从使用上来对比总结,加深记忆,避免混淆. 什么 ?  你问实现原理的异同及优劣? 本宝宝还在努力学习中,也许有生之年你可以看到分析贴. 不管用什么框架,创建项目都是第一步.发展到现在,Angular 和 Vue 都有官方的脚手架用来快捷的创建和配置项目. 创建项目 Angular和Vue的脚手架都依赖于NodeJs和Npm,所以先确认自己的环境.两个脚手架都需要全局安装 //Angula…
一.前端框架库: 1.Zepto.js 地址:http://www.css88.com/doc/zeptojs/ 描述:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto.关于Zepto认知我也是通过与一位腾讯朋友聊天的时候知道的,只作了些基础的了解. 2.SUI Mobile 地址:http://m.sui.taobao.org 描述:SUI Mobile 是一套基于 Framework7 开…
原文转自:http://www.csdn.net/article/2013-05-27/2815450-google-polymer 摘要:开发者Axel Rauschmayer在自己的博客上详解了Google Polymer的设计理念与组成架构,深得Polymer开发者的认同.他认为Polymer这样高互操作性的设计才应该是Web开发的未来. 虽然今年的Google I/O也已结束,但会上揭晓的新技术.新工具仍然让开发者兴奋不已.其中Web开发方面尤以Ploymer和Web Component…
时代在进步,原本前端只是用来简单的数据显示以及提交数据到后端处理逻辑的地方,而随着SPA的发展,前端的逻辑也越来越是庞大,恰巧,今天看微博的时候,发现一个概念讨论的比较多,就是 Web Components,顺藤摸瓜,做了一些了解,发现 Polymer 这样一个或许是未来的东东,至少有一点,chrome将会原生支持.收集了一些资料,多家学习. 1. Polymer Polymer由以下几层组成: 基础层(Foundation)——platform.js:基本构建块,其中大部分API最终将成为原生…
摘要:开发者Axel Rauschmayer在自己的博客上详解了Google Polymer的设计理念与组成架构,深得Polymer开发者的认同.他认为Polymer这样高互操作性的设计才应该是Web开发的未来. 虽然今年的Google I/O也已结束,但会上揭晓的新技术.新工具仍然让开发者兴奋不已.其中Web开发方面尤以Ploymer和Web Components为重. Polymer由加盟Google的原Palm webOS开发团队打造,是一套以“一切皆组件.最少化代码量.最少框架限制”为设…
Angulr 项目的名称为 Angulr,对!没错!就是少个 a,少个 a 就是它正确的拼写. 是一个以 Bootstrap 和 AngularJS 为基础,并使用了大量前端开源组件合成的一个前端UI框架,是非常棒的UI框架. 今天就来和大家讲讲怎么使用这个框架.在这之前,先放几张这个项目的截图,给大家欣赏一下. 好了,图片欣赏完了,我们来正式开始使用这个框架吧. 打开项目,会发现以下文件夹: 目录说明 grunt :构建配置文件 (这个文件夹里的东西可忽略,不用管它) html: 静态页面 (…
像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven 用得顺溜,但对 NPM 仍不带感,兴许是周边无人带动的稀薄气氛,也或者是没参加过类似的大型活动,于是在自发性上差了许多.再者,我不用 MVVM 模式,领导也不会扣绩效. 为了快速体验 MVVM 模式,我选择了非工程化方式来起步,并选择使用 Vue.js,以及基于它构建的 iView UI 框架. V…
前言: 近期,小弟根据GitHub.前端社区.掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热度和使用范围等进行的粗略的汇总[不分先后]).希望对寻找UI框架的小伙伴们提供点帮助. 以下对前端UI框架的移动端.PC端和混合APP的应用进行了列举. 移动端UI框架 Mint UI(饿了么团队) 中文官网:http://mint-ui.github.io/#!/zh-cn 描述:基于vue的移动端UI框架 基于vue 组件库:…
一.前言 前段时间写博客分享和介绍了阿里云的UI框架NG-ZORRO(博客请查看:http://www.cnblogs.com/donaldtdz/p/7892960.html),结合近段时间对.Net开源框架ABP的学习.完成将ABP前端框架替换成阿里云的NG-ZORRO. 二.替换说明 ABP版本采用的v3.3 .Net Core版本 Angular 版本5.0 三.注意事项 1.angular 2版本要5.0以上 2.需要安装 "abp-ng2-module": "^1…
身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指正留言讨论.(注:排名不分先后,好像也没有排名) ◆ BootStrap 1.0 2.0 3.0 分类:UI框架 适用范围:优化布局 美化页面 现成组件 使用方式:组件 class 框架愿景: 组成: 特点: 说明:最早的前端框架,好像没有之一,笔者只用过它的组件(1.0)现在已经发展到4.0 真的…
UI选择务必慎重,货比三家. 弱水三千只取一瓢:弱水三千只取一瓢,源起佛经中的一则故事,警醒人们在一生中可能会遇到很多美好的东西,但只要用心好好把握住其中的一样就足够了 老牌构建于jQuery框架之上的UI外, 新锐UI派系: 基于Vue: ELementUI, iViewui 基于React: AntDesign, Amaze UI React 根据GitHub.前端社区.掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热…
JEECG前后端分离UI框架实战版本 - 抢先体验 (ng2-admin+Angular4+AdminLTE) 关键词: ng2-admin.Angular4.AdminLTE.Nodejs.Jeecg JEECG紧跟技术潮流推出前后端分离架构UI,前端开发与后台服务分离,便捷的开发模式,更好的体验风格,后期前端UI重够更方便. UI 框架:Angular4+AdminLTE 技术点: angular4.nodejs.Typescript.Angular CLI.npm.AdminLTE 开发工…
JEECG前后端分离UI框架 (ng2-admin+Angular4+AdminLTE) 关键词: ng2-admin.Angular4.AdminLTE.Nodejs.Jeecg JEECG紧跟技术潮流推出前后端分离架构UI,前端开发与后台服务分离,便捷的开发模式,更好的体验风格,后期前端UI重构更方便. UI 框架:Angular4+AdminLTE技术点: angular4.nodejs.Typescript.Angular CLI.npm.AdminLTE开发工具:  WebStorm…
Vue.js 之 iView UI 框架 像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven 用得顺溜,但对 NPM 仍不带感,兴许是周边无人带动的稀薄气氛,也或者是没参加过类似的大型活动,于是在自发性上差了许多.再者,我不用 MVVM 模式,领导也不会扣绩效. 为了快速体验 MVVM 模式,我选择了非工程化方式来起步,并选择使用 Vue.js,以及…
总所周知,在前端开发中,大家用的比较多的框架就是angular,vue,react等,今天就为大家讲一下angular大家框架的原理及运用 1.本次所举的例子是以依赖require.js的, <script src="js/libs/require-2.3.3.min.js" data-main="main" charset="utf-8"></script> <script> document.documen…
最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己的公司项目. 学习的过程之中发现继最热的 React 组件库和 Angular 组件库之后,这里有很多个流行和实用的 Vue.js 组件库完善你的下一个用 Vue.JS 编写 UI 界面的应用程序.Vue.js是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的…
概述 这款基于React开发的UI框架,界面非常简洁美观,在这篇文章中我主要为大家介绍一下如何用Ant开始搭建React项目 详细 代码下载:http://www.demodashi.com/demo/12205.html 一.安装webstorm + Noje.js(全局安装) 详细安装这里略过 二.全局安装create-react-app脚手架 用管理员身份运行cmd,输入: npm install -g create-react-app yarn 成功! 三.创建React项目antd-d…
10 个打造 React.js App 的最佳 UI 框架 在本文中,我们将分享一些助你打造 React.js App 最佳的 UI 框架.它们具备你所需要的基本 React 组件,以及易用的 API,同时,在外观和体验上也非常棒.Have Fun ! 1. Material-UI 基于谷歌 Material Design 设计规范的 React 组件 此外,它还是 React 的第一个 UI 套件.Material-UI具备你所需要的所有组件(甚至更多),以及可配置性极高的预定义调色板和<Mu…
Element UI 框架搭建 1.webpack 全局安装 npm install -g webpack 2.淘宝镜像cnpm安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 3.vue脚手架全局安装 -- 用于生成vue模板 npm install -g vue-cli 4.使用脚手架构建vue项目 -- 一路回车就行了 vue init webpack 目前可用的模板介绍 browserify–全功能的Bro…
深入探讨前端UI框架 1 前言 先说说这篇文章的由来 最近看riot的源码,发现它很像angular的dirty check,每个component ( tag )都保存一个expressions数组,更新时,遍历expressions数组,重新求值,对比旧值,如果有变更则更新DOM. 这不就是dirty check吗?为什么riot还声称它实现了virtual DOM? 疑惑之下,就去复盘了一下各大前端框架,把一些收获分享给大家 本文内容很多,实在不知道怎么取标题,最终取了一个泛泛的标题,请读…
53.购物车_商品列表UI框架布局 cart_page.dart 清空原来写的持久化的代码; 添加对应的引用,stless生成一个静态的类.建议始终静态的类,防止重复渲染 纠正个错误,上图的CartPage单词拼错了,这里改过来防止后面,运行app的时候报错 build内我们使用scaffold脚手架 创建Future方法获取购物车持久化数据 取数据需要等待时间的,所以之类使用异步async,我们的provide需要context上下文,所以方法内我们要接收一个context对象的参数 在bod…