一切福田,不離方寸,從心而覓,感無不通。

Category Archives: Frontend

7个基于VUE移动端UI好用框架!

1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档 在线预览 https://wangdahoo.github.io/vonic/docs/#/home 2.vux 基于WeUI和Vue(2.x)开发的移动端UI组件库 star 10k 基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式。 中文文档 在线预览 https://vux.li/demos/v2/?x-page=v2-doc-home#/ 3.Mint UI 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库 star 8.3k 中文文档 github地址 在线预览 https://github.com/ElemeFE/mint-ui 4.MUI 最接近原生APP体验的高性能前端框架 star 7.5k 中文文档 github地址 http://dev.dcloud.net.cn/mui/ 5.Muse-ui 基于 Vue 2.0 和 Material Design 的 UI 组件库star 4.9k 中文文档 github地址 https://github.com/museui/muse-ui 6.Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。star 1k 中文文档 github地址 https://github.com/youzan/zent 7.Cube UI star 3k 滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库 github地址 中文文档 https://github.com/didi/cube-ui 特性 质量可靠 由滴滴内部组件库精简提炼而来,经历了业务一年多的考验,并且每个组件都有充分单元测试,为后续集成提供保障。 体验极致 以迅速响应、动画流畅、接近原生为目标,在交互体验方面追求极致。 标准规范 遵循统一的设计交互标准,高度还原设计效果;接口标准化,统一规范使用方式,开发更加简单高效。 扩展性强 […]

龙生   09 Jul 2020
View Details

比较好用的vue框架

vant(轻量级,适合微信公众号项目使用) [https://youzan.github.io/vant/#/zh-CN/intro] iview https://www.iviewui.com/ Ant Design Vue [https://www.antdv.com/docs/vue/introduce/] element http://element.eleme.io/ vuetify https://vuetifyjs.com/ vue-strap http://yuche.github.io/vue-st… cube-ui https://didi.github.io/cube-ui/#/zh-CN/example buefy https://buefy.github.io/#/ vue-beauty https://fe-driver.github.io/vue-beauty/#/components/button vue-storefront http://vuestorefront.io/ at-ui https://at-ui.github.io/at-ui/#/zh vue-blu https://chenz24.github.io/vue-blu/#/ vux https://vux.li/ 光子补充:vuetifyjs https://vuetifyjs.com/en/components/timelines/ 作者:曾经也是个少年 链接:https://www.jianshu.com/p/69729b7f9871 来源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

龙生   09 Jul 2020
View Details

ExtJS MVC 4.2 Demo

有项目需要用到ExtJS,而且是老版本的,MVC的开发方式,前后端分离。 经过几天的学习,做了个demo,供大家学习参考。直接上图~   源码下载

龙生   09 Jul 2020
View Details

ExtJS MVC 案例实践(一)

参考自:https://blog.csdn.net/luckypeng/article/details/43151793 介绍: 使用ExtJS MVC构建出如下图框架。 ps: 此实验是接着 "ExtJS MVC框架搭建(三)" 教程后面做的, 所以主页为 index2.html, JS文件为 app2.js 一、自定义一个viewport组件 新建 app/view/Viewport.js 文件, 内容如下:

  ps:①自定义的试图组件继承了 Ext.container.Viewport , 且采用的border布局 ②border布局的 中间部分(region: "center")为tabpanel ③border布局的 左边部分(region:’west’)里面放着是 树型面板(xtype: 'menutree',    menutree 继承了 treepanel, 下一步介绍menutree) 二、定义一个 treepanel组件 新建 app/view/MenuTree.js 文件,内容如下:

  ps:①、 自定义的 MenuTree 菜单组件,该组件继承 treepanel ②、store :’MenuStore' 指定了菜单面板的数据集,下一步会定义 这个 MenuStore 数据集 三、定义一个 store 组件 新建 app/store/MenuStore.js 文件, 内容如下:

  ps:①、定义的store组件,继承 Ext.data.TreeStore ②、 配置 autoLoad: true, 以便自动加载数据 ③、 配置 proxy 加载远程数据, 请求地址为 data/data.json, 下一步就创建这个文件  四、定义 json 数据 用于创建 树型结构 新建 webapp/data/data.json 文件,内容如下:

  五、定义 Main控制器,用于管理这些对象 新建 app/controller/Main.js […]

龙生   09 Jul 2020
View Details

ExtJS4.2:Sencha Cmd 介绍

背景 本来不打算写这篇文章的,但是按照官方文档的介绍,还是会出现一些问题。该文章就是简洁的介绍一下如何使用Sencha Cmd及其注意事项。 官方文档 Introduction to Sencha Cmd Using Sencha Cmd with Ext JS 4.2+ Compiler-Friendly Code Guidelines Workspaces in Sencha Cmd 环境要求 Java Run-time Environment or JRE,版本>=6.0。 Ruby,不要下载最新版,Ruby 1.9.3-p392可以。 Sencha Cmd。 Ext JS SDK。 创建一个workspace 目录名称不要用中文,特殊符号最好也不要用,中文我测试了不行。

创建两个app(一个app一个html)

编译创建的两个app

结果 项目结构 编译后的运行效果 备注 sencha cmd 必须运行在SDK目录或app目录,具体的可以参考官方文档。   from:https://www.cnblogs.com/happyframework/archive/2013/05/07/3060630.html

龙生   07 Jul 2020
View Details

ExtJS 4.2学习——MVC架构与布局

1 ExtJS入门 1.1 支持所有主流浏览器 调试推荐:chrome、Safari、Firefox 1.2  推荐目录结构 – appname (包含所有程序代码,是根目录)     – app (包含所有类,按包的规则命名子目录)                    – namespace                             – Class1.js                             – Class2.js                             – …          – extjs (ExtJS 4 SDK)          – resources (CSS图片等资源文件)                    – css                    – images                    – …          – app.js (程序入口,包含程序逻辑)          – index.html (入口文件) ExtJS 4 SDK部分说明: –            extjs/resources/css/ext-all.css 包含了所有样式 –            extjs/ext-debug.js 包含了最基础的一些类,ExtJS 4 Core核心部分,只在开发时使用,任何附加的类都通过动态加载引入(会造成n多请求,所以发布应用的时候不要用这个) –            extjs/ext.js 功能和ext-debug.js一致,但是是用于对外发布的,它和app-all.js一起使用 –            extjs/ext-all-debug.js 包含ExtJS全部内容,全部class,它可以像ExtJS 3那样使用,可以减少学习成本,官方还是推荐ext-debug.js这种引入了新机制的方式 –            extjs/ext-all.js 是ext-all-debug.js的压缩版本,内容跟其一致,可用于发布,但是它包含所有内容,官方不推荐 –            all-classes.js  包含app自定义的所有类,这个文件没有压缩可以方便调试 –            app-all.js 这个文件是压缩过的,包含所有app代码和依赖的类,相当于一个可以用于发布的 all-classes.js + app.js –            builds:是extjs压缩后的代码,体积更小,加载更快 –            docs :extjs的文档 […]

龙生   07 Jul 2020
View Details

ExtJS4.2 MVC

ExtJS是一个富客户端开发框架,用它做出来的用户界面风格很统一。对于美工不好的的后端开发人员来说,用这个东西做界面,完全就不需要考虑美工了,它内置的样式模板显示的效果还是非常好的。 现代工程应用的开发量,无论是后端逻辑,还是前端的界面展示,代码量都会非常大,如何保持代码的结构逻辑清晰,非常必要。在后端有MVC(Model View Controller)代码分层结构,ExtJS如今也引入了该设计方法,使前端代码看起来也结构规整、逻辑清晰,增强了前端代码的可读性、可维护性。 下面将通过一个例子来看看ExtJS的MVC是怎么回事。 在MVC的布局模式中,所有的类都放置在app文件夹中,这个文件夹还包含了一些子文件夹用于命名你的models,views,controllers,stores.下图为goods这个应用程序的文件夹结构。 Ext工程,必须在应用程序入口(app.html)引入ExtJS的2个文件,一个是SDK核心js类库ext-all.js(也可以是ext-all-debug.js或者bootstrap.js;第一个是服务部署版本,第二个是开发阶段版本,第三个会运行环境调用第一或第二个)、一个是核心样式表ext-theme-classic-all.css(有很多套样式,可以自行选择)。在app.html中,仅需要下面这段代码:

  一、定义应用 每一个ExtJS应用程序都由一个Application类作为开始,这个Application包含了全局设置,比如应用程序的名称,以及需要引用到的所有的models,views,controllers。下面我们创建一个商品模块应用,来管理商品信息。app.js中的代码:  

首先,我们调用Ext.application去创建一个Application类,传递一个名字叫Inv。这样它就能够自动的为我们创建一个全局的变量 Inv给我们,并将这个命名空间注册到Ext.Loader。这里还指定应用的控制器,说明这个应用使用哪个或者哪些控制器;这里还设置自动创建并加载显示师徒,也可以在代码中还创建了一个launch函数,这个函数里面创建了一个Viewport,来加载显示界面视图。 二、定义控制器 控制器是跟应用程序绑定在一起的,控制器所做的工作就是监听事件并作出相应,监听的事件通常是在views中,下面我们来创建一个控制器,在app/controller/下面新建一个GoodsController.js 里面代码如下:  

  控制器主要就是绑定应用的视图对象(views)和模型对象(models、stores),应用在加载的时候自动加载控制器,再由控制器来加载应用的视图和模型对象。 三、定义视图 View无非就是一个组件,通常会定义为一个Ext js component的子类。下面我们要创建一个商品列表,可以新建一个GoodsGridPanel.js,位于app/view/下。GoodsGridPanel.js代码如下:  

  在app/view/还有一个Viewport.js,也是定义一个视图的,该视图继承自上面定义的GoodsGridPanel,额外定义这个视图的模板渲染显示为准和其定义相分离,以达到视图组件重用的目的。app.js中定义的自动创建视图也就是指的这个。Viewport.js的代码如下:

  四、定义模型 数据模型其实包括两个部分,即store和model。其中model负责数据结构的定义,store负责数据的存取。 a)      数据模型定义 在app/model下创建一个GoodsModel.js,代码如下:

  看上面的代码,其实很简单,就是给商品数据模型定义了2个属性:code(编码)、name(名称),就像定义数据库的字段一样。   b)      定义存储模型(静态数据) 在app/store中创建GoodsStore.js,代码如下:

  c)      定义存储模型(从服务器获取数据) 在app/store中创建GoodsStore.js,代码如下:

  该存储模型首先调用了商品数据模型GoodsModel,然后再构造函数constructor中指定存储对象的数据模型;指定存储实例的ID;指定数据对象并在里面加了2条数据,存储模型也可以通过代理(prox)从服务端获取数据,实际工程中换一下数据来源即可。 最终页面效果 from:https://blog.csdn.net/clj198606061111/article/details/16811665

龙生   07 Jul 2020
View Details

axios在catch中获取响应状态码

以下 是 对 axios 请求 错误的处理 ( 困扰我好长时间 的 问题 终于 解决了!)

下图控制台 打印出的 结果 :   from:https://blog.csdn.net/bianliuzhu/article/details/88170549

龙生   29 Jun 2020
View Details

Javascript两个感叹号的用法(!!)

from:https://www.cnblogs.com/EasonJim/p/6239087.html

龙生   28 Jun 2020
View Details

巧用正则和document.location.search获取URL参数的值

要获取当前页面URL的参数,可能大家第一个想到是使用 window.location.href 或者是document.location.href ,获取结果诸如http://www.xxx.com/?aa=xx&bb=xx ;但是其实我们需要的只是:?aa=xx&bb=xx。这种形式可以使用 document.location.search 这个属性获取。 如果我想要获取该URL后面参数aa的值该怎么弄呢?常见的方式可能是这样:

  改用document.location.search和正则获取参数将使代码更加简洁:

  from:https://www.cnblogs.com/codebean/archive/2011/05/27/2059901.html

龙生   20 Jun 2020
View Details
1 15 16 17 58