存档

‘WEB前端开发框架’ 分类的存档

放弃Bootstrap&Foundation,迎接Semantic UI?

2016年5月18日 评论已被关闭

放弃Bootstrap&Foundation,迎接Semantic UI?

http://www.csdn.net/article/2013-09-26/2817049-bootstrap-and-foundation-and-semantic-ui

Semantic UI—完全语义化的前端界面开发框架,跟Bootstrap和Foundation比起来,还是有些不同的,在功能特性上、布局设计上、用户体验上均存在很多差异。文章里详细介绍了Semantic UI自身的功能特性和优缺点。

文章来自CoderWall,作者是Nicholas Jordon。在这篇文章当中作者讲述了Semantic UI具备哪些功能特性,以及和其它前端界面开发框架的不同之处。可能Semantic UI只是HTML/CSS框架领域上的一个新成员,但是它来势汹汹,势不可挡。引用Semantic UI团队的话说:“Semantic赋予设计师和开发者为UI创建一个共享词汇库的能力。”(以下是编译内容)

我通常情况下不喜欢更改开发框架,即使是HTML/CSS框架。但是有的时候为了最终的产品质量,还是值得一试去改变框架的。

有那么一段时间,我是Zurb’s Foundation Framework的超级粉丝,它有许多其它框架没有的功能特性,同时它还有很多预制模板。所以使用Zurb’s Foundation Framework来设计的话相对是比较舒适快捷的。但唯一的一点是有些功能得等到Foundation新版本发布出来才能使用。

进入到Semantic UI开发框架,就会看到数量庞大的功能特性,这些功能都很有特点。Semantic UI拥有支持情态动词、手风琴元素、元素调光器、3D转换,甚至是评级等多种功能。更不用说其它的运行程序,因为它们看上去都像是涂抹了黄油一样——运行起来特别流利顺畅。当然所列举的这些只是冰山一角,不过这能让你基本上了解大致情况。可能Semantic UI只是HTML/CSS框架领域上的一个新成员,但是它来势汹汹,势不可挡。

另外,这些功能使用的类别名称比一些随意的字符串更加的接近英语;所以使用Semantic UI设计会让你感觉更自然。因此,学习如何使用Semantic UI,并用Semantic UI进行设计也就方便的多了。

然而,现在的问题是Semantic UI忽略了一些基本功能,例如基本的图片滑块,或者是缩略图类等等。不过后来发现,这些所谓的功能缺失,实际上是和其它功能整合了,在其它方面是完全可以实现的。

Semantic UI的一些优点:

  • MIT许可协议下出版。
  • 有很好的证明文档记录。
  • 看上去更容易学习/使用。
  • 配备网格布局。
  • 使用LESS动态样式语言。
  • 有一些非常实用的附加配置,例如inverted类。
  • 对于社区贡献来说是比较开放的。
  • 有一个非常好的按钮实现,情态动词,和进度条。
  • 在许多功能上使用图标字体。

Semantic UI的一些缺点:

  • 没有图片滑块。
  • 没有缩略图类。
  • 缺少可见性类。
  • 没有SASS。
  • 没有发布1.0以上的版本。

我们再来看看BootStrap有哪些优缺点:

如今的Bootstrap已包括了几十个组件,每个组件都自然地结合了设计与开发,具有完整的实例文档,定义了真正的组件和模板。无论处在何种技术水平的开发者,也无论处在哪个工作流程中,都可以使用Bootstrap快速、方便地构建开发者喜欢的应用。

难能可贵的是,Bootstrap依旧本着“并行开发”、“作为产品的风格指南”和“迎合所有的技能水平”的原则帮助开发者解决实际问题,不断完善自己,吸引更多人选择Bootstrap应用于自己的项目中。

然而古人云“万物相生相克”,有好就有坏,Bootstrap也是一样。对于在国内的开发者来说,最可怕的就是IE兼容问题。目前Bootstrap对 IE6到IE8的支持都不友好。另一个缺点是,采用Bootstrap的模板,网站结构时常会显得臃肿。此外,覆盖一些样式时会造成代码冗余。

其次,再来看看Foundation有哪些优缺点:

Foundation是一个易用、强大而且灵活的框架,用于构建基于任何设备上的Web应用。提供多种 Web上的UI组件,如表单、按钮、Tabs等等。

从兼容性方面来说,Foundation已经放弃了对IE 8的支持,而Bootstrap 2仍能较完美的支持IE 8,甚至通过类似bs-ie的方式来达到大部分component支持IE 6的要求,在国内是选择Foundation还是选择Bootstrap的时候可能还是需要考虑这一重要因素吧。

从JavaScript库角度来说,Bootstrap 2/3采用的都是更为常见的jQuery,而Foundation采用的是Zepto,Zepto.js是支持移动WebKit浏览器的JavaScript框架,具有与jQuery兼容的语法。

从社区支持度来说,Bootstrap在Github上的人气毋庸置疑,国内也有中文版的文档,各种教程案例以及衍生而来的插件、主题也是层出不穷,一片欣欣向荣之景。而Foundation的社区支持度则相对来说较为薄弱。因为Foundation的开发理念是mobile first,所以Foundation在国内则相对较为小众。

最后结论:

实话实说,很多人还是比较喜欢Semantic UI框架的,不管是在生产站点还是在个人项目中使用Semantic UI,都会让人觉得特别激动。如果Semantic UI框架能发挥它的所有潜力,很有可能会比Bootstrap和Foundation都深受开发者的喜爱。

在HN的讨论中dfischer特别提到要想获得真正的Semantic功能特性,就不得不将演示彻底的从标记当中分离出来。而且像“评级”类这样的标准模块设置都是必不可少的。在短短的时间内就完成了这个http://betterfrontend.com/,但是没办法把时间放进去。这不是一个Semantic框架,因为类别名有太多的定义,它们只是用于同种功能的相同类别。一个使用类别来装饰的CSS框架永远不会是一个Semantic框架。

bluetidepro:个人觉得这个Semantic UI很有前景,Semantic UI团队在CSS预处理上使用LESS而不是使用SASS,也是非常独特的一点。

然而,并不是所有人都认为Semantic UI将会取代Bootstrap和Foundation的位置。他们觉得Bootstrap和Foundation各有各的好处。

dntrkv:Semantic UI框架所具备的优点,Bootstrap同样具备。例如,Semantic UI框架有很好的证明文档记录,>>>Bootstrap也有很好的证明文档记录;Semantic UI框架没有图片滑块,>>>而Bootstrap框架有图片滑块。

cschmidt:Bootstrap的Apache 2许可协议也是足够慷慨的,MIT许可协议并不是真的具有很多优势。

beat:Bootstrap的根基已经成熟了很多,使用也很广泛,从网络效应当中获得利益。Foundation是Bootstrap的替代品,对使用者同样具有很强的影响力。Semantic UI框架作为后来者,对开发者来说能有多大的吸引力呢?

不管是Bootstrap还是Foundation亦或是Semantic UI,作为开发框架,不同的开发人群对它们的接受程度和理解力当然是不一样的。不知道你怎么看待它们?                           (编译/薛梁  校审/付江)

原文:CoderWall

采用Ruby on Rails+Semantic-UI开发的音乐社交网络:Ting

2016年5月17日 评论已被关闭

采用Ruby on Rails+Semantic-UI开发的音乐社交网络:Ting

http://www.open-open.com/lib/view/1444483613916

 

采用Ruby on Rails+Semantic-UI开发的音乐社交网络项目。示例:this link.

Requirements

Ruby 2.0.0 +
Memcached 1.4 +
ImageMagick 6.8 +

Installation

$ git clone git://github.com/Aufree/ting.git$ cd ting

linux(ubuntu)

$ sudo apt-get update$ sudo apt-get install memcached imagemagick

Mac OS

$ brew install memcached && brew install imagemagick

Run

$ bundle install$ rake db:migrate# ensure that memcached has started up$ rails s

Testing

$ rake test

项目主页:http://www.open-open.com/lib/view/home/1444483613916

[前端框架] Bootstrap 3 与 Foundation 5 的五大区别 (译)

2016年5月13日 评论已被关闭

[前端框架] Bootstrap 3 与 Foundation 5 的五大区别 (译)

https://ruby-china.org/topics/17143

本篇译自: https://medium.com/frontend-and-beyond/8b3812c7007c

开发工程师, 使用 Bootstrap. 前端开发人员, 使用 Foundation. 我们来谈谈为什么.

Bootstrap 与 Foundation 有许多关键的区别, 但是, 我想你只需要记住一件事:

ZURB 和 Twitter 的两种设计理念是很清楚的, 从他们对自己的框架的命名就可以看出来: Bootstrap 有引导, 开机自举的意思, 换言之, 它尝试处理你项目中一切所需要的. 而 Foundation 有创建, 创造的意思, 换言之, 它仅仅给你项目中强有力的创造力.

保持这种看法, 现在我来列出两者之间更多的关键区别:

1. UI 元素

Foundation 只安排了有限的几种元素, Bootstrap 则给你了所有你可以想像到的一切元素.

ZURB 对于 Foundation 的设计目标是, 纵然你使用预定义的 UI 元素, 也不应该与大家的网站长的太像.

而另一边, Bootstrap 则试图给你提供所有定义好的 UI 元素.

2. REMs VS Pixels

Foundation 使用 REMs, 而 Bootstrap 使用 Pixels.

使用 Pixels 意味着你不得不准确定义一个组件的高, 宽, 内边距, 外边距, 而且在每一种设备与屏幕尺寸上, 因为不同的设备往往显示效果区别很大.

现在 Foundation 5 使用 REMs, 而不是 EM. 这样, 避免了 EM cascade 问题: http://css-tricks.com/font-sizing-with-rem/

使用 REMs 意味着你可以直接用 font-size: 80%; 就可以让整个组件和它的子组件缩小 20%.

值得说明的是, 通过 REMs, 你可以脱离 Pixels 的细节了, 所以, 使用 REMs 来处理是非常值得的.

Foundation 还提供了 sass 的 mixin 方法来将 Pixels 转换为 REMs, 这样, 你还可以继续使用 Pixels 的思考方式来定义页面:

.element {
  width: rem-calc(10px); // will be converted to REMs
} 

3. 灵活的网格 VS 预定义的网格

Foundation 的网格可以自动适配当前浏览器的宽度. Boostrap 则是预定义了几种网格尺寸来适配主流的设备和屏幕.

Bootstrap 会在你改变浏览器宽度的时候突然改变它的网格.

Foundation 则会灵活适配当前的浏览器宽度, 这是一种新的技术手段, 自动适配的同时, 可以表现的与 Transformer 一样的效果.

Foundation 当网格改变时有两个要点: 小, 中和大. 所有的操作都只有缩小和放大, 并适应于当前浏览器的宽度. 不需要预定义的屏幕大小, 并且更主要的原因是, 鼓励你去根据屏幕的大小来定义不同的样式.

使用 Bootstrap, 你得到一个固定的或者说流形的网格, 这意味着你需要分别设定或者说对于网格容器不是一个预定义好的宽度.

使用 Foundation 和 Sass, 你可以自由调整最大的网格的大小( 中型的和小型的自动被计算 ), 大屏幕的列数, 小屏幕的列数.

4. 移动设备优先 VS 也支持移动设备

Foundation 设计时已经考虑了任何四角屏幕. 而 Bootstrap 设计时则预先分为: 手机, 平板, 台式机和超大屏幕的台式机.

构建一个优先支持移动设备的网站意味着它肯定在更大的屏幕上是可用的. 所以, Foundation 鼓励你这样去做: 移动优先.

如果你使用 Foundation 的 Sass Media Query Mixin, 你就会发现, 没有特定的 Media Query 来查询什么是移动设备, 而是你使用 Media Query 来定义在更大的屏幕下应该怎么显示.

设计东西时先考虑台式机的话很可能在支持更小屏幕时遇到很大问题, 和先考虑手机的话, 将会让你专注于什么是对用户最重要的, 让你空间提用感上升.

5. 社区

Bootstrap 有一个更大的社区. 而使用 Foundation 你就不得不自力更生一些.

Bootstrap 非常大的亮点就是社区. 这是一个非常巨大, 包罗万象, 几乎找啥都可以找到.

如果你选择了 Foundation, 自力更生可能就是你不得不掌握的了. 几乎所有的解决方法都是为 Bootstrap 的, 你只能自己再去构建自己的.

结论

问你自己几个问题:

  1. 你想让某个东西更加易用或者让它更具生活气息?
  2. 你想组织自己的 CSS, 只是让它成为你的基础组件?

答案分别是: Bootstrap. Foundation.

本文由 WinDy 发布, 欢迎关注.

[前端框架] Bootstrap 3 与 Foundation 5 的五大区别 (译)

2016年5月13日 评论已被关闭

[前端框架] Bootstrap 3 与 Foundation 5 的五大区别 (译)

https://ruby-china.org/topics/17143

本篇译自: https://medium.com/frontend-and-beyond/8b3812c7007c

开发工程师, 使用 Bootstrap. 前端开发人员, 使用 Foundation. 我们来谈谈为什么.

Bootstrap 与 Foundation 有许多关键的区别, 但是, 我想你只需要记住一件事:

ZURB 和 Twitter 的两种设计理念是很清楚的, 从他们对自己的框架的命名就可以看出来: Bootstrap 有引导, 开机自举的意思, 换言之, 它尝试处理你项目中一切所需要的. 而 Foundation 有创建, 创造的意思, 换言之, 它仅仅给你项目中强有力的创造力.

保持这种看法, 现在我来列出两者之间更多的关键区别:

1. UI 元素

Foundation 只安排了有限的几种元素, Bootstrap 则给你了所有你可以想像到的一切元素.

ZURB 对于 Foundation 的设计目标是, 纵然你使用预定义的 UI 元素, 也不应该与大家的网站长的太像.

而另一边, Bootstrap 则试图给你提供所有定义好的 UI 元素.

2. REMs VS Pixels

Foundation 使用 REMs, 而 Bootstrap 使用 Pixels.

使用 Pixels 意味着你不得不准确定义一个组件的高, 宽, 内边距, 外边距, 而且在每一种设备与屏幕尺寸上, 因为不同的设备往往显示效果区别很大.

现在 Foundation 5 使用 REMs, 而不是 EM. 这样, 避免了 EM cascade 问题: http://css-tricks.com/font-sizing-with-rem/

使用 REMs 意味着你可以直接用 font-size: 80%; 就可以让整个组件和它的子组件缩小 20%.

值得说明的是, 通过 REMs, 你可以脱离 Pixels 的细节了, 所以, 使用 REMs 来处理是非常值得的.

Foundation 还提供了 sass 的 mixin 方法来将 Pixels 转换为 REMs, 这样, 你还可以继续使用 Pixels 的思考方式来定义页面:

.element {
  width: rem-calc(10px); // will be converted to REMs
} 

3. 灵活的网格 VS 预定义的网格

Foundation 的网格可以自动适配当前浏览器的宽度. Boostrap 则是预定义了几种网格尺寸来适配主流的设备和屏幕.

Bootstrap 会在你改变浏览器宽度的时候突然改变它的网格.

Foundation 则会灵活适配当前的浏览器宽度, 这是一种新的技术手段, 自动适配的同时, 可以表现的与 Transformer 一样的效果.

Foundation 当网格改变时有两个要点: 小, 中和大. 所有的操作都只有缩小和放大, 并适应于当前浏览器的宽度. 不需要预定义的屏幕大小, 并且更主要的原因是, 鼓励你去根据屏幕的大小来定义不同的样式.

使用 Bootstrap, 你得到一个固定的或者说流形的网格, 这意味着你需要分别设定或者说对于网格容器不是一个预定义好的宽度.

使用 Foundation 和 Sass, 你可以自由调整最大的网格的大小( 中型的和小型的自动被计算 ), 大屏幕的列数, 小屏幕的列数.

4. 移动设备优先 VS 也支持移动设备

Foundation 设计时已经考虑了任何四角屏幕. 而 Bootstrap 设计时则预先分为: 手机, 平板, 台式机和超大屏幕的台式机.

构建一个优先支持移动设备的网站意味着它肯定在更大的屏幕上是可用的. 所以, Foundation 鼓励你这样去做: 移动优先.

如果你使用 Foundation 的 Sass Media Query Mixin, 你就会发现, 没有特定的 Media Query 来查询什么是移动设备, 而是你使用 Media Query 来定义在更大的屏幕下应该怎么显示.

设计东西时先考虑台式机的话很可能在支持更小屏幕时遇到很大问题, 和先考虑手机的话, 将会让你专注于什么是对用户最重要的, 让你空间提用感上升.

5. 社区

Bootstrap 有一个更大的社区. 而使用 Foundation 你就不得不自力更生一些.

Bootstrap 非常大的亮点就是社区. 这是一个非常巨大, 包罗万象, 几乎找啥都可以找到.

如果你选择了 Foundation, 自力更生可能就是你不得不掌握的了. 几乎所有的解决方法都是为 Bootstrap 的, 你只能自己再去构建自己的.

结论

问你自己几个问题:

  1. 你想让某个东西更加易用或者让它更具生活气息?
  2. 你想组织自己的 CSS, 只是让它成为你的基础组件?

答案分别是: Bootstrap. Foundation.

本文由 WinDy 发布, 欢迎关注.

Windows环境下的NodeJS+NPM+Bower安装配置步骤

2015年10月19日 评论已被关闭

Windows环境下的NodeJS+NPM+Bower安装配置步骤

http://my.oschina.net/JeeChou/blog/219699

Windows环境下的NodeJS+NPM+Bower安装配置步骤 – WEB开发与设计艺术 – 开源中国社区

 Windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(http://nodejs.org/),便可以看到首页的“INSTALL”按钮,直接点击就会自动下载安装。安装过程基本直接“NEXT”就可以了。(Windows的安装msi文件在过程中会直接添加path的系统变量,变量值是你的安装路径,例如“C:\Program Files\nodejs”,我这里的演示是安装在“D:\Program Files\nodejs”)

废话不多说,安装完成之后,我们先检测下NodeJS是否安装成功,cmd命令行中键入:

1
node -v

若出现版本提示,就说明安装成功了,如下图:

105518_zMBO_1174432

npm的安装。由于新版的NodeJS已经集成了npm,所以之前npm也一并安装好了。同样可以使用cmd命令行中键入:

1
npm -v

同样,若出现版本提示,就说明安装成功了,如下图:

105835_HNLH_1174432

这样,常规NodeJS的搭建到现在为止已经完成了,迫不及待的话你可以在cmd命令行中键入“node”进入node开发模式下,输入你的NodeJS第一句:”hello world“ – 输入:console.log(‘hello world’)。这里就不再多作演示了。

npm作为一个NodeJS的模块管理,之前我由于没有系统地看资料所以导致安装配置模块的时候走了一大段弯路,所以现在很有必要列出来记录下。我们要先配置npm的全局模块的存放路径以及cache的路径,例如我希望将以上两个文件夹放在NodeJS的主目录下,便在NodeJs下建立“node_global”及“node_cache”两个文件夹。我们就在cmd中键入两行命令:

1
npm config set prefix "D:\Program Files\nodejs\node_global"

1
npm config set cache "D:\Program Files\nodejs\node_cache"

请大家注意,因为我事先降NodeJS安装在了“D:\Program Files\nodejs”目录下,所以大家键入命令时请正确输入你们的NodeJS目录。

现在我们来装个模块试试,选择express这个比较常用的模块。同样在cmd命令行里面,输入:

1
npm install express -g

注意,这里“-g”这个参数意思是装到global目录下,也就是上面说设置的“D:\Program Files\nodejs\node_global”里面。待cmd里面的安装过程滚动完成后,会提示“express”装在了哪、版本还有它的目录结构是怎样。

下面这一步非常关键,我们需要设置系统变量。进入我的电脑→属性→高级→环境变量。在系统变量下新建“NODE_PATH”,输入“D:\Program Files\nodejs\node_global\node_global”。如下图所示:

114639_0cZz_1174432

如果以上步骤都OK的话,我们可以再次开启cmd命令行,键入:

1
node

待出现“> ”标记后,在键入:

1
require('express')

用途是测试下node的模块全局路径是否配置正确了。正确的话cmd会列出express的相关信息。如下图:

115008_P2UK_1174432

如出错一般都是NODE_PATH的配置不对,可以再次检查以确保正确。

好了,现在我们已经安装配置好NodeJS+npm了,那么我们现在安装Bower就显得容易得多,只需要在cmd中键入一行命令:

1
npm install bower -g

若检测是否安装成功方法同express一样。

结束语:

以上便是本人在安装配置NodeJS的时候的操作,由于新手的缘故,借助了google查阅了很多资料,希望对刚开始接触NodeJS的朋友都有点帮助。我现在用的IDE是Sublime text 2 + NodeJS的插件这个组合,能够在Sublime里面直接编译node的程序,挺方便的。

分类: WEB前端开发框架 标签:

Hexo在github上构建免费的Web应用

2015年8月27日 评论已被关闭

Hexo在github上构建免费的Web应用

http://blog.fens.me/hexo-blog-github/

从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发。Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎。chrome浏览器就基于V8,同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express,可以帮助我们迅速建立web站点,比起PHP的开发效率更高,而且学习曲线更低。非常适合小型网站,个性化网站,我们自己的Geek网站!!

关于作者

  • 张丹(Conan), 程序员Java,R,PHP,Javascript
  • weibo:@Conan_Z
  • blog: http://blog.fens.me
  • email: bsspirit@gmail.com

转载请注明出处:
http://blog.fens.me/hexo-blog-github/

hexo-github1

前言

很多次想把博客从wordpress迁移到github,为此还特意学了一下Ruby和Jekyll。但由于迁移过程过于复杂,我又没有很多时间,这个计划就被搁置了。慢慢地文章积累越来越多了,更没有时间来整理了,所以就先用着wordpress吧。

不过,了迁移博客我也有一些新的发现。hexo,一个基于Node的博客框架,同样可以实现基于github的博客,而且更轻更快,更适合Node的开发程序员。

目录

  1. Hexo介绍
  2. Hexo安装
  3. Hexo的使用
  4. 发布到项目到github
  5. 替换皮肤
  6. 配置常用插件

1. Hexo介绍

Hexo 是一个简单地、轻量地、基于Node的一个静态博客框架。通过Hexo我们可以快速创建自己的博客,仅需要几条命令就可以完成。

发布时,Hexo可以部署在自己的Node服务器上面,也可以部署github上面。对于个人用户来说,部署在github上好处颇多,不仅可以省去服务器的成本,还可以减少各种系统运维的麻烦事(系统管理、备份、网络)。所以,基于github的个人站点,正在开始流行起来….

Hexo的官方网站:http://hexo.io/ ,也是基于Github构建的网站。

2. Hexo安装

系统环境:

  • win7 64bit
  • node v0.10.5
  • npm 1.2.19

Hexo安装,要用全局安装,加-g参数。


D:\> npm install -g hexo

查看hexo的版本


D:\> hexo version
hexo: 2.5.5
os: Windows_NT 6.1.7601 win32 x64
http_parser: 1.0
node: 0.10.5
v8: 3.14.5.8
ares: 1.9.0-DEV
uv: 0.10.5
zlib: 1.2.3
modules: 11
openssl: 1.0.1e

安装好后,我们就可以使用Hexo创建项目了。


D:\workspace\javascript> hexo init nodejs-hexo 
[info] Creating file: source/_posts/hello-world.md
[info] Creating file: package.json
[info] Creating file: .gitignore
[info] Copying file: _config.yml
[info] Copying file: scaffolds/draft.md
[info] Copying file: scaffolds/page.md
[info] Copying file: scaffolds/photo.md
[info] Copying file: scaffolds/post.md
[info] Creating folder: source/_drafts
[info] Creating folder: scripts
[info] Copying theme data...
[info] Initialization has been done. Start blogging with Hexo!

我们看到当前在目录下,出现了一个文件夹,包括初始化的文件。

进入目录,并启动Hexo服务器。


# 进入目录
D:\workspace\javascript>cd nodejs-hexo

# 启动hexo服务器
D:\workspace\nodejs-hexo>hexo server
[info] Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

这时端口4000被打开了,我们能过浏览器打开地址,http://localhost:4000/ 。

hexo-web

出现了默认的网页界面,是不是很容易呢!!

3. Hexo的使用

接下来,我们要对Hexo做更全面的了解,才能做出个性化一的博客。

3.1 目录和文件

先来看一下,默认生成了哪些东西。

hexo-folder

  • scaffolds 脚手架,也就是一个工具模板
  • scripts 写文件的js,扩展hexo的功能
  • source 存放博客正文内容
  • source/_drafts 草稿箱
  • source/_posts 文件箱
  • themes 存放皮肤的目录
  • themes/landscape 默认的皮肤
  • _config.yml 全局的配置文件
  • db.json 静态常量

在这里,我们每次用到的就是_posts目录里的文件,而_config.yml文件和themes目录是第一次配置好就行了。

_posts目录:Hexo是一个静态博客框架,因此没有数据库。文章内容都是以文本文件方式进行存储的,直接存储在_posts的目录。Hexo天生集成了markdown,我们可以直接使用markdown语法格式写博客,例如:hello-world.md。新增加一篇文章,就在_posts目录,新建一个xxx.md的文件。

themes目录:是存放皮肤的,包括一套Javascript+CSS样式和基于EJS的模板设置。通过在themes目录下,新建一个子目录,就可以创建一套新的皮肤,当然我们也可以直接在landscape上面修改。

3.2 全局配置

_config.yml是全局的配置文件:很多的网站配置都在这个文件中定义。

  • 站点信息: 定义标题,作者,语言
  • URL: URL访问路径
  • 文件目录: 正文的存储目录
  • 写博客配置:文章标题,文章类型,外部链接等
  • 目录和标签:默认分类,分类图,标签图
  • 归档设置:归档的类型
  • 服务器设置:IP,访问端口,日志输出
  • 时间和日期格式: 时间显示格式,日期显示格式
  • 分页设置:每页显示数量
  • 评论:外挂的Disqus评论系统
  • 插件和皮肤:换皮肤,安装插件
  • Markdown语言:markdown的标准
  • CSS的stylus格式:是否允许压缩
  • 部署配置:github发布

查看文件:_config.yml


# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/tommy351/hexo/

# 站点信息
title: Hexo博客
subtitle: 新的开始
description: blog.fens.me
author: bsspirit
email: bsspirit@gmail.com
language: zh-CN

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://blog.fens.me
root: /
permalink: :year/:month/:day/:title/
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code

# 文件目录
source_dir: source
public_dir: public

# 写博客配置
new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: false # Add spaces between asian characters and western characters
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
max_open_file: 100
multi_thread: true
filename_case: 0
render_drafts: false
post_asset_folder: false
highlight:
  enable: true
  line_number: true
  tab_replace:

# 目录和标签
default_category: uncategorized
category_map:
tag_map:

# 归档设置
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 2
category: 2
tag: 2

# 服务器设置
## Hexo uses Connect as a server
## You can customize the logger format as defined in
## http://www.senchalabs.org/connect/logger.html
port: 4000
server_ip: 0.0.0.0
logger: false
logger_format:

# 时间和日期格式
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: MMM D YYYY
time_format: H:mm:ss

# 分页设置
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# 评论
disqus_shortname:

# 插件和皮肤
## Plugins: https://github.com/tommy351/hexo/wiki/Plugins
## Themes: https://github.com/tommy351/hexo/wiki/Themes
theme: landscape
exclude_generator:

# Markdown语法
## https://github.com/chjj/marked
markdown:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: true

# CSS的stylus格式
stylus:
  compress: false

# 部署配置
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type:

3.3 命令行使用

查看命令行帮助


D:\> hexo help
Usage: hexo 

Commands:
  help      Get help on a command
  init      Create a new Hexo folder
  migrate   Migrate your site from other system to Hexo
  version   Display version information

Global Options:
  --config   Specify config file instead of using _config.yml
  --debug    Display all verbose messages in the terminal
  --safe     Disable all plugins and scripts
  --silent   Hide output on console

For more help, you can use `hexo help [command]` for the detailed information
or you can check the docs: http://hexo.io/docs/

命令行解释:

  • help 查看帮助信息
  • init 创建一个hexo项目
  • migrate 从其他系统向hexo迁移
  • version 查看hexo的版本
  • –config参数,指定配置文件,代替默认的_config.yml
  • –debug参数,调试模式,输出所有日志信息
  • –safe参数,安全模式,禁用所有的插件和脚本
  • –silent参数,无日志输出模式

3.4 创建新文章

接下来,我们开始新博客了,创建第一博客文章。Hexo建议通过命令行操作,当然你也可以直接在_posts目录下创建文件。

通过命令创建新文章


D:\workspace\javascript\nodejs-hexo>hexo new 新的开始
[info] File created at D:\workspace\javascript\nodejs-hexo\source\_posts\新的开始.md

在_posts目录下,就会生成文件:”新的开始.md”。

hexo-post

然后,我们编辑文件:”新的开始.md”,以markdown语法写文章,然后保存。


title: 新的开始
date: 2014-05-07 18:44:12
tags:
- 开始
- 我
- 日记
categories: 日志
---

这是**新的开始**,我用hexo创建了第一篇文章。

通过下面的命令,就可以创建新文章
```{bash}
D:\workspace\javascript\nodejs-hexo>hexo new 新的开始
[info] File created at D:\workspace\javascript\nodejs-hexo\source\_posts\新的开始.md
```

感觉非常好。

在命令行,启动服务器。


D:\workspace\javascript\nodejs-hexo>hexo server
[info] Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

通过浏览器打开, http://localhost:4000/ ,就出现了我们新写的文章。

hexo-index

同时,网页的右侧还会出现Categories(目录),Tags(标签),Tag Cloud(标签云)的显示。

3.5 文章的语法

我们在写文章时,有一些语法的要求。

语法包括3部分:

  • 基本信息:标题,发布日期,分类目录,标签,类型,固定发布链接
  • 正文:markdown语法和Swig语法(掌握一个就行)
  • 特殊标记:引用,链接,图片,代码块,iframe,youtube视频

3.5.1 基本信息

必须在文件的顶部,—的行之前的部分。如:


title: 新的开始
date: 2014-05-07 18:44:12
updated	: 2014-05-10 18:44:12
permalink: abc
tags:
- 开始
- 我
- 日记
categories:
- 日志
- 第一天

---

我们可以对刚才发的文章,做上面的修改,再看效果。

3.5.2 正文

hexo的正文要求使用markdown的语法,这里就不在多说,请自行查看markdwon的文档。

3.5.3 特殊标记

hexo对于一些有特殊标记 文字块,做了特殊的定义。

引用


# Swig语法
{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

# Markdown语法
> Every interaction is both precious and an opportunity to delight.

代码块


# Swig语法
{% codeblock .compact http://underscorejs.org/#compact Underscore.js %}
.compact([0, 1, false, 2, ‘’, 3]);
=> [1, 2, 3]
{% endcodeblock %}

# Markdown语法
```{bash}
.compact([0, 1, false, 2, ‘’, 3]);
=> [1, 2, 3]
```

链接


{% link 粉丝日志 http://blog.fens.me true 粉丝日志 %}

# Markdown语法
[粉丝日志](http://blog.fens.me)

图片,对于本地图片,需要在source目录下面新建一个目录images,然后把图片放到目录中。


# Swig语法
{% img /images/fens.me.png 400 600 这是一张图片 %}

# Markdown语法
![这是一张图片](/images/fens.me.png)

在浏览器中看到效果。

hexo-content

我们发现Swig的语法比markdown语法有更多的配置项,可以让页面更丰富,下面显示完整的基于Swig代码。


title: 新的开始
date: 2014-05-07 18:44:12
permalink: abc
tags:
- 开始
- 我
- 日记
categories:
- 日志
- 第一天

---

这是**新的开始**,我用hexo创建了第一篇文章。

通过下面的命令,就可以创建新文章
```{bash}
D:\workspace\javascript\nodejs-hexo>hexo new 新的开始
[info] File created at D:\workspace\javascript\nodejs-hexo\source\_posts\新的开始.md
```

感觉非常好。


## 引用
{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

## 代码块
{% codeblock .compact http://underscorejs.org/#compact Underscore.js %}
.compact([0, 1, false, 2, ‘’, 3]);
=> [1, 2, 3]
{% endcodeblock %}

## 链接
{% link 粉丝日志 http://blog.fens.me true 粉丝日志 %}

## 图片
{% img /images/fens.me.png 400 600 这是一张图片 %}

4. 发布到项目到github

4.1 静态化处理

写完了文章,我们就可以发布了。要说明的一点是hexo的静态博客框架,那什么是静态博客呢?静态博客,是只包含html, javascript, css文件的网站,没有动态的脚本。虽然我们是用Node进行的开发,但博客的发布后就与Node无关了。在发布之前,我们要通过一条命令,把所有的文章都做静态化处理,就是生成对应的html, javascript, css,使得所有的文章都是由静态文件组成的。

静态化命令


D:\workspace\javascript\nodejs-hexo>hexo generate
[info] Files loaded in 0.895s
[create] Public: js\script.js
[create] Public: css\fonts\fontawesome-webfont.svg
[create] Public: css\fonts\FontAwesome.otf
[create] Public: css\fonts\fontawesome-webfont.ttf
[create] Public: css\fonts\fontawesome-webfont.eot
[create] Public: css\fonts\fontawesome-webfont.woff
[create] Public: fancybox\blank.gif
[create] Public: fancybox\fancybox_loading@2x.gif
[create] Public: fancybox\fancybox_overlay.png
[create] Public: css\images\banner.jpg
[create] Public: fancybox\fancybox_sprite.png
[create] Public: fancybox\jquery.fancybox.css
[create] Public: fancybox\fancybox_loading.gif
[create] Public: fancybox\fancybox_sprite@2x.png
[create] Public: fancybox\jquery.fancybox.js
[create] Public: fancybox\jquery.fancybox.pack.js
[create] Public: fancybox\helpers\jquery.fancybox-buttons.js
[create] Public: fancybox\helpers\fancybox_buttons.png
[create] Public: fancybox\helpers\jquery.fancybox-buttons.css
[create] Public: fancybox\helpers\jquery.fancybox-media.js
[create] Public: fancybox\helpers\jquery.fancybox-thumbs.css
[create] Public: fancybox\helpers\jquery.fancybox-thumbs.js
[create] Public: archives\index.html
[create] Public: images\fens.me.png
[create] Public: archives\2014\index.html
[create] Public: archives\2014\05\index.html
[create] Public: css\style.css
[create] Public: index.html
[create] Public: categories\日志\index.html
[create] Public: categories\日志\第一天\index.html
[create] Public: 2014\05\07\abc\index.html
[create] Public: 2014\05\07\hello-world\index.html
[create] Public: tags\开始\index.html
[create] Public: tags\我\index.html
[create] Public: tags\日记\index.html
[info] 35 files generated in 0.711s

在本地目录下,会生成一个public的目录,里面包括了所有静态化的文件。

4.2 发布到github

接下来,我们把这个博客发布到github。

在github中创建一个项目nodejs-hexo,项目地址:https://github.com/bsspirit/nodejs-hexo

编辑全局配置文件:_config.yml,找到deploy的部分,设置github的项目地址。


deploy:
  type: github
  repo: git@github.com:bsspirit/nodejs-hexo.git

然后,通过命令进行部署。


D:\workspace\javascript\nodejs-hexo>hexo deploy
[info] Start deploying: github
[info] Setting up GitHub deployment...
Initialized empty Git repository in D:/workspace/javascript/nodejs-hexo/.deploy/.git/
[master (root-commit) 43873d3] First commit
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 placeholder
[info] Clearing .deploy folder...
[info] Copying files from public folder...

// 省略部分输出

Branch gh-pages set up to track remote branch gh-pages from github.
To git@github.com:bsspirit/nodejs-hexo.git
 * [new branch]      gh-pages -> gh-pages
[info] Deploy done: github

这个静态的web网站就被部署到了github,检查一下分支是gh-pages。gh-pages是github为了web项目特别设置的分支。

hexo-github

然后,点击”Settings”,找到GitHub Pages,提示“Your site is published at http://bsspirit.github.io/nodejs-hexo”,打开网页 http://bsspirit.github.io/nodejs-hexo,就是我们刚刚发布的站点。

hexo-github-page

4.3 设置域名

看起来css和js的加载路径不太对,不过没有关系。接下来,我们配置好域名,这个路径就会正确的。比如,我有一个域名是 52u.me,为了中国DNS解析,我先把域名绑定在Dnspod管理,再做跳转。

域名有两种配置方式:

    • 主域名绑定:直接绑定主域名52u.me
    • 子域名绑定:绑定子域名blog.52u.me

4.3.1 主域名绑定

在dnspod控制台,设置主机记录@,类型A,到IP 192.30.252.153。

dnspod-1

大概等几分钟会生效。判断生效,对域名执行ping或者dig命令。


D:\workspace\javascript\nodejs-hexo>ping 52u.me

正在 Ping 52u.me [192.30.252.153] 具有 32 字节的数据:
来自 192.30.252.153 的回复: 字节=32 时间=321ms TTL=48
来自 192.30.252.153 的回复: 字节=32 时间=325ms TTL=48
来自 192.30.252.153 的回复: 字节=32 时间=329ms TTL=48
来自 192.30.252.153 的回复: 字节=32 时间=326ms TTL=48

192.30.252.153 的 Ping 统计信息:
    数据包: 已发送 = 4,已接收 = 4,丢失 = 0 (0% 丢失),
往返行程的估计时间(以毫秒为单位):
    最短 = 321ms,最长 = 329ms,平均 = 325ms

在github项目中,新建一个文件CNAME,文件中写出你要绑定的域名52u.me。通过浏览器,访问http://52u.me,就打开了我们建好的博客站点。

52u.me_

4.3.2 子域名绑定

有时候,我们的主域名正在使用着,需要先新建一个博客绑定到子域名,比如: blog.52u.me。

dnspod-2

在dnspod控制台,我们要做3步设置。

        • 设置主机记录github,类型A,到IP 199.27.76.133
        • 设置主机记录bsspirit.github.io,类型CNAME,到github.52u.me.
        • 设置主机记录blog,类型CNAME,到 bsspirit.github.io

记得我们还要修改文件CNAME,改为blog.52u.me。通过浏览器,访问http://blog.52u.me,就可以打开了我们的博客站点了,而这次用的是二级域名。

由于每次执行deploy的时候,gh-pages分支所有的文件都会被覆盖,所以我们最好在source目录下创建这个CNAME文件,这样每次部署就不用动手创建了。

5. 替换皮肤

博客系统流行的原因,是因为他的个人性,而皮肤正式个性化的一种体现。

利用hexo替换皮肤,还是比较简单的,3步完成。

5.1 找到一个皮肤或者自己开发一个皮肤

打开hexo的皮肤列表页面,你可以找到很多的皮肤,网页地址: https://github.com/tommy351/hexo/wiki/Themes。

5.2. 放到themes目录下

比如,我觉得pacman(https://github.com/A-limon/pacman)这个皮肤还不错,我就可以下载皮肤到themes目录下面。

通过git命令下载皮肤


git clone https://github.com/A-limon/pacman.git themes/pacman

5.3. 在_config.yml指定皮肤

编辑文件_config.yml,找到theme一行,改成 theme: pacman

本地启动hexo服务器,打开浏览器 http://localhost:4000

hexo-theme

新皮肤的效果还不错吧,然后静态化处理,再发布到github,就完成了站点的改版。

6. 配置常用插件

6.1 Disqus评论系统

首先登陆http://disqus.com/ 网站,申请一个新网站的shortname,配置到_config.yml文件里,disqus_shortname: blog52ume

disqus

然后,你会得到一段js代码,把他复制文件 themes/pacman/layout/_partial/comment.ejs 。继续修改themes/pacman/layout/layout.ejs文件,增加对comment.ejs的引用。具体修改请详见代码。

disqus-comment

这样,评论系统就增加好了!!

6.2 RSS订阅

这个功能非常简单,因为已经有人写好了插件,我们只要安装插件就行了。


D:\workspace\javascript\nodejs-hexo>npm install hexo-generator-feed
npm WARN package.json hexo-site@2.5.5 No readme data!
npm http GET https://registry.npmjs.org/hexo-generator-feed
npm http 304 https://registry.npmjs.org/hexo-generator-feed
npm http GET https://registry.npmjs.org/ejs/0.8.5
npm http GET https://registry.npmjs.org/lodash/2.4.1
npm http 304 https://registry.npmjs.org/ejs/0.8.5
npm http 200 https://registry.npmjs.org/lodash/2.4.1
npm http GET https://registry.npmjs.org/lodash/-/lodash-2.4.1.tgz
npm http 200 https://registry.npmjs.org/lodash/-/lodash-2.4.1.tgz
hexo-generator-feed@0.1.0 node_modules\hexo-generator-feed
├── ejs@0.8.5
└── lodash@2.4.1

启动服务器,用浏览器打开 http://localhost:4000/atom.xml, 就可以看到RSS已经生效了。

6.3 Sitemap站长地图

同样是一条命令,就可以完成。


D:\workspace\javascript\nodejs-hexo>npm install hexo-generator-sitemap
npm WARN package.json hexo-site@2.5.5 No readme data!
npm http GET https://registry.npmjs.org/hexo-generator-sitemap
npm http 304 https://registry.npmjs.org/hexo-generator-sitemap
npm http GET https://registry.npmjs.org/ejs/0.8.5
npm http GET https://registry.npmjs.org/lodash/2.4.1
npm http 304 https://registry.npmjs.org/lodash/2.4.1
npm http 304 https://registry.npmjs.org/ejs/0.8.5
hexo-generator-sitemap@0.1.1 node_modules\hexo-generator-sitemap
├── ejs@0.8.5
└── lodash@2.4.1

启动服务器,用浏览器打开 http://localhost:4000/sitemap.xml, 就可以看到sitemap已经生效了。

6.4 mathjax数学公式

有时候,我们还需要一些高级功能,比如在网页上显示数学公式。

新建一个文件themes/pacman/layout/_partial/mathjax.ejs,找到mathjax的调用代码复制到文件。


<!-- mathjax config similar to math.stackexchange -->

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    }
  });
</script>

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      }
    });
</script>

<script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for(i=0; i < all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
</script>

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

在themes/pacman/layout/_partial/after_footer.ejs 的最后一行,增加对mathjax的引用,详细内容请查看源代码。

我们修改文章:source/_posts/新的开始.md

增加公式:


## 公式
$$J\_\alpha(x)=\sum _{m=0}^\infty \frac{(-1)^ m}{m! \, \Gamma (m + \alpha + 1)}{\left({\frac{x}{2}}\right)}^{2 m + \alpha }$$

启动服务器,查看效果:

math

当然,除了这些还有很多需要的功能,像Google分析,百度统计,微薄转发等,大家可以自己找找,也可以自己开发一些插件!

最后,本文的中代码已经上传的github,https://github.com/bsspirit/nodejs-hexo。 其中master分支是项目源代码,gh-pages分支是发布的站点。

Hexo框架确实如同它介绍中的话: “A fast, simple & powerful blog framework, powered by Node.js.”,Noder还等什么,赶紧搭建一个博客吧!!

转载请注明出处:
http://blog.fens.me/hexo-bootstarp-github/

This entry was posted in Javascript语言实践

分类: WEB前端开发框架 标签:

Symfony 2仅仅是框架吗?

2015年1月9日 评论已被关闭

Symfony 2仅仅是框架吗?

http://symfony.cn/articles/what-is-symfony.html

Symfony是基于MVC架构的PHP框架。作为一款免费软件,在MIT License许可下发行。

2005年10月18日,其官方网站symfony-project.org对外开放;2010年,对应2.0版本的新网站symfony.com启用;2011年7月,Symfony 2.0正式版本发布。Symfony社区的工作重心已经完成从1.x版本向2.x版本的转移。

新一代的Symfony 2,不只是开发框架,其真正的愿景是,成为解决Web开发中常见任务的标准件。一方面,各组件能单独使用,完全解耦,另一方面,在开发接口、规范上保持高度一致,从而实现高效的协作。

正因为对规范、便捷、协作和创造的追求,Symfony 2开发社区同时也成为了PSR、Composer、Doctrine以及BeHat的核心参与者。而对于团队开发中的技术管理者,采用Symfony 2,可以引入科学的规范,简单有效的依赖关系管理,主流测试框架,以及持续集成等积极的因素。

Symfony作为一种技术文化,已经对整个PHP社区产生深远的影响。Drupal,PhpBB,EzPublish等都将采用Symfony 2的核心组件,甚至完全基于Symfony 2重构。

官方网站:

http://www.symfony.com/ (2.x版本)

http://www.symfony-project.org/ (1.x版本,功能已冻结)

分类: WEB前端开发框架 标签:

日访问量2亿PV的You@#Pxxn

2015年1月9日 评论已被关闭

日访问量2亿PV的You@#Pxxn

http://symfony.cn/articles/what-is-symfony.html

先看一组数据

  • 网站2006年上线,2011年被收购
  • 2008年即达到每天1亿PV的浏览量
  • 每秒30万请求
  • 每秒推送100Gb的视频,相当于3张DVD的内容
  • 每小时生成8GB-15GB的日志

架构

  • 之前用的是Perl
  • 现在用的PHP,以FastCGI方式运行于PHP-FPM
  • HAProxy
  • ActiveMQ
  • Varnish
  • Redis
  • Nginx
  • MySQL
  • Syslog-ng
  • Symfony2

关于框架优劣之争

经常见到关于框架优劣的争论,比较性能,比较功能完备性,等等。我们的观点是,能让你获得最高开发效率的框架,就是合适的。

You@#Pxxn的例子说明,Symfony2在一个相对完善的技术架构里,完全可以支撑巨大的访问量。

PHP 框架史话

2015年1月9日 评论已被关闭

PHP 框架史话

PHP 是一种神奇的技术,可以嵌入 HTML 代码中执行。PHP 依赖这个前无古人后无来者的运行方式,成为了一门 “语言”。PHP 为 web 而生,伴随着 web 成长,她本身就是一个高度抽象的框架,所有内置函数,例如phpinfo(),本质上都是强大功能的一个接口。

在本身就是 web 框架的 PHP 之上,懒惰的程序员依然想干更少的活儿做到同样的功能,所以就有了积累下来的常用函数群。然后,伴随着 PHP 的进步,又有了常用类,常用库,然后又有了常用设计模式以实现更多的代码复用,最后,一个又一个的 PHP 框架就这样诞生了。

紧接着人们发现,在把 PHP 作为主要开发语言大规模使用以后,PHP 代码的可协作性又成了一个很大的问题,于是各种 “轻量级框架” 就开始出现,其中最著名的当属 CodeIgniter 了。实际上,稍微有一点规模的团队和稍微有两年经验的程序员都会有自己的 PHP 框架,这类微框架基本只解决一个核心问题:路由。因为只有这一个东西是对所有项目都通用的。

Laravel

同时,在追求开发效率的道路上,各路重型框架层出不穷,Zend Framework、CakePHP、Yii、Kohana、Symfony、Laravel,一个比一个吹得响亮,一个比一个复杂。当下,占有率和出镜率最高的当属 Laravel 了:在国外火了一段时间了,在国内的大潮正在兴起。

Laravel 可以极大地提高开发效率。

对 Laravel 感兴趣的可以看一下我写的系列教程:Laravel 4 系列入门教程【最适合中国人的Laravel教程】,目前阅读量和反响都还不错,评论里也积累了不少常见错误和解决办法,我也会第一时间回复大家的评论。

Laravel 取得今天如此之高的成就,并不是因为作者水平有多高,PHP 经验有多丰富。实际上 Laravel 的作者 Taylor Otwell 之前是一名 .NET 程序员,本科毕业后写了三年的 .NET,然后转向 PHP,创造了伟大的 Laravel。为什么?因为没有思路上的限制。PHP 从一堆可以直接调用的 function 发展而来,为了向下兼容保留了很多非常强大的函数,正是这些函数,让 PHP 熟手们跟不上 PHP 的发展潮流,无法正视并使用 PHP5 以来优秀的新思想、新特性。如今 PHP 已经在向一门通用面向对象语言进化,具备了 类与对象、命名空间、接口、抽象类 等很多高级特性,Taylor Otwell 正是使用了这些高级特性,才构造出了今天的 Laravel。

鸟哥 Laruence 目前正在做 PHP7JIT 组件,还在开发中的 PHP7-JIT 已经比 HHVM 有了成倍的性能优势。这也是我没有提那几个 C 扩展框架的原因:JIT 一出,C 扩展框架的修改困难的劣势将大大超过那一点点性能优势,性能优势可能都会完全消失。让我们拭目以待!

Composer 一统天下

“Composer 一统天下的时代已经到来!” ——白岩松 (:-D)

Composer 可以看成一个 PHP 的包管理器,类似 Python 的 easy_install 和 pip,Ruby 的 gem,Node.js 的 npm,是一个强大的生态系统。关于 Composer 的详细介绍和用法可以参考我写的另一篇文章:利用 Composer 一步一步构建自己的 PHP 框架(一)——基础准备

为 web 而生的 PHP 一直缺少一个 web 时代的包管理器,直至 Composer 横空出世。之前 PHP 框架的传递都是通过代码文件压缩包,多么辛酸。PHP 有一个官方的“扩展库” PEAR,但是入库标准极为严格,对代码的要求很高,而且传递代码的方式也是下载压缩包。:-(

Laravel 取得成功的另一个非常重要的原因就是依靠 Composer 社区。Laravel 采用了大量的第三方包,其中就有许多著名的 Symfony 基础组件。

到底哪个框架更好?

当下,但从开发效率和社区发展的角度讲,首推 Laravel,她也完全满足题主的几点要求。

但是强大的工具都需要长时间的学习,Laravel 学起来可能没有那么容易。当然,主要原因不在 Laravel 用了多少高级特性,而在于大多数 PHP 程序员都抱着旧 PHP 的思想不肯放手。学习 Laravel 的过程就是转变思想的过程,改变写 PHP 的姿势的过程,这个过程会比较困难,但是也能够学到很多很多。

如果广义地回答这个问题,当下最强大的框架当然是 Composer,因为她不是一个框架,是一个强大的生态系统。

关于问题中的 Yii2 和 ThinkPHP

Yii2 前几天刚刚发布,号称基于 Composer,我体验了一下,跟 CodeIgniter 3 号称的基于 Composer 是一样的:把自己发布到了 Composer 社区而已。几乎没有对其他 Composer 包的依赖,还是走的以前的老路。积重难返,止步不前。再怎么大而全也是拼不过整个社区数万个小而美的。

ThinkPHP 作为国产最流行框架我以前是很支持的,后来我因为项目要求使用了一次。当我看到 A() C() D() F() G() I() L() M() N() S() 函数的时候直接吓尿了,你知道 C() 是干啥的不?控制器 Controller?缓存 Cache?不是,人家是 Config,操作配置文件的。这样设计的代码可读性基本为零。

其他框架

Codeigniter 2 with Eloquent ORM

如果你对 CodeIgniter 比较熟悉,但是已经厌烦了繁琐的 Active Record 的话,我做了一个 Codeigniter 2 with Eloquent ORM 的项目,把 Laravel 中最强大的部分 Eloquent ORM 融合到了 CodeIgniter 2.2.0 里面。详见:给 CI 插上翅膀——在 CodeIgniter 2 中使用 Laravel Eloquent ORM

TinyLara

最后,大家也可以尝试一下我使用 Composer 构建的 Laravel 的精简版: TinyLara (官方网站:http://tinylara.com/ ),使用了 Laravel 中最强大的部分 Eloquent ORM,其他部分保持最精简,欢迎大家尝试,提出意见和建议!

给 CI 插上翅膀——在 CodeIgniter 2 中使用 Laravel Eloquent ORM

2015年1月9日 评论已被关闭

给 CI 插上翅膀——在 CodeIgniter 2 中使用 Laravel Eloquent ORM

说明

本教程示例代码见 https://github.com/johnlui/CodeIgniter-2-with-Eloquent

背景介绍

CodeIgniter 框架和 Laravel 框架基本可以看做是之前若干年和这两年的 PHP 框架霸主,使用率和出镜率最高的框架。

CI 是一个轻型框架,只提供了 路由、MVC 分离、视图加载器、Active Record 等一些基本功能,但这恰恰是其使用率高的原因:提供的东西少而精,适用于绝大多数场景。CI 的文档堪称开源软件的典范,非常之清晰、详尽,对新手非常友好,十分容易上手。

Laravel 是这两年刚刚兴起的重型全功能框架,可以极大地提高开发效率,但是 Laravel 4 的文档并没有 3 那么清晰,中文资料也非常少,很多人在学习的时候遇到了比较大的困难。例如复杂的路由系统让很多用惯了 CI 自动映射的人无所适从,文档又只有寥寥几句话,导致相当一部分人被拦在了使用框架的第一步,学习的热情也被浇灭。

我前段时间写了系列教程 Laravel 4 系列入门教程【最适合中国人的Laravel教程】,访问量和反响都还不错,需要的人可以看看。

繁琐的路由让很多人怀念 CI 的自动映射,繁重的框架基础工作(一个 Hello World 页面需要载入 150 多个文件)也让 Laravel 的性能在一些场景下不能满足要求。很多人用了一段时间后发现,Laravel 中的 Eloquent ORM 是跟 CI 比最强大的地方,于是就想把 Eloquent 移植到 CI 上,我以前也想过,无奈实力不够无从下手。现在终于知道怎么搞了,下面我们正式开始。

基础准备

PHP 版本要求 >= 5.4,这是 Eloquent 的最低要求。

下载 CodeIgniter 2.2.0,地址是 http://www.codeigniter.com/download ,下载完成后解压到某个地方,配置好 HTTP 服务软件,把网站跑起来。如果你已经看到了以下画面,就可以继续往下做了:

6aab1413966279

开始嫁接

我们使用 Composer 来载入和管理 Eloquent。Composer 会生成一个自动加载(’autoload’)文件,我们只需要 ‘require’ 这个文件,就可以使用所有通过 Composer 安装的包。现在我们要在 CodeIgniter 项目中使用 Composer,在其根目录下新建 composer.json:

{

  "require": {

    "php": ">=5.4.0",

    "illuminate/database": "*"

  },

}

然后运行 ‘composer update’,稍等片刻,Composer 体系创建完成,同时 illuminate/database 包也已经安装完成。

然后新建 ‘application/third_party/eloquent.php’:

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

use Illuminate\Database\Capsule\Manager as Capsule;

// Autoload 自动载入

require BASEPATH.'../vendor/autoload.php';

// 载入数据库配置文件

require_once APPPATH.'config/database.php';

// Eloquent ORM

$capsule = new Capsule;

$capsule->addConnection($db['eloquent']);

$capsule->bootEloquent();

这个文件将会帮我们引入 Composer 的自动加载文件,同时会帮我们初始化 Eloquent,这个文件载入了一个数据库配置文件,在 ‘application/config/database.php’ 的最后新增(注意替换数据库名称和密码):

$db['eloquent'] = [

  'driver'    => 'mysql',

  'host'      => 'localhost',

  'database'  => 'ci',

  'username'  => 'root',

  'password'  => 'password',

  'charset'   => 'utf8',

  'collation' => 'utf8_general_ci',

  'prefix'    => ''

  ];

接下来我么需要在 CI 应用启动的时候引入上面那个文件,在最外面的 ‘index.php’ 的后部增加:

/*

 * --------------------------------------------------------------------

 * LOAD Laravel Eloquent ORM

 * --------------------------------------------------------------------

 *

 */

require APPPATH.'third_party/eloquent.php';

注意,这段代码一定要放在 ‘require_once BASEPATH.’core/CodeIgniter.php’;’ 这一行的 前面

然后,开始使用 Eloquent,修改 ‘application/controllers/welcome.php’ 中的 ‘index()’ 为:

public function index()

{

  $data['article'] = Article::first();

  $this->load->view('home', $data);

}

新建 ‘application/views/home.php’ 文件:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>CI2 with Eloquent</title>

</head>

<body>

  <h1>

    <?php echo $article->title; ?>

  </h1>

  <div class="content">

    <p>

      <?php echo $article->content; ?>

    </p>

  </div>

</body>

</html>

现在让我们向数据库中填充需要使用的数据,运行 SQL 语句:

DROP TABLE IF EXISTS 'articles';

CREATE TABLE 'articles' (

  'id' int(11) unsigned NOT NULL AUTO_INCREMENT,

  'title' varchar(255) DEFAULT NULL,

  'content' longtext,

  PRIMARY KEY ('id')

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

LOCK TABLES 'articles' WRITE;

/*!40000 ALTER TABLE 'articles' DISABLE KEYS */;

INSERT INTO 'articles' ('id', 'title', 'content')

VALUES

  (1,'我是标题','<h3>我是内容呀~~</h3><p>我真的是内容,不信算了,哼~ O(∩_∩)O</p>'),

  (2,'我是标题','<h3>我是内容呀~~</h3><p>我真的是内容,不信算了,哼~ O(∩_∩)O</p>');

/*!40000 ALTER TABLE 'articles' ENABLE KEYS */;

UNLOCK TABLES;

然后建立模型,新建 ‘application/models/Article.php’ 文件:

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

/**

* Article Model

*/

class Article extends Illuminate\Database\Eloquent\Model

{

  public $timestamps = false;

}

最后,修改 ‘composer.json’ 将 models 文件夹加入自动加载:

{

  "require": {

    "php": ">=5.4.0",

    "illuminate/database": "*"

  },

  "autoload": {

    "classmap": [

      "application/models"

    ]

  }

}

运行 ‘composer dump-autoload’,刷新页面!你将看到以下画面:

76b01413970486

恭喜你!Eloquent 嫁接到 CodeIgniter 2 成功!

CodeIgniter 3 正处于 DEV 阶段,原生支持 Composer,可以直接修改 composer.json 文件,配置方式和 2 完全一致。

资源汇总

1. CodeIgniter 2 with Eloquent,GitHub 地址:https://github.com/johnlui/CodeIgniter-2-with-Eloquent

2. 利用 Composer 一步一步构建自己的 PHP 框架(四)——使用 ORM

3. Eloquent 中文文档

4. Download CodeIgniter

5. illuminate/database

Laravel vs CakePHP vs CodeIgniter 的看法(性能,开发效率,负债能力)

2015年1月8日 评论已被关闭

Laravel vs CakePHP vs CodeIgniter 的看法(性能,开发效率,负债能力)
http://segmentfault.com/q/1010000000602732
最近打算用做一个比较中型的PHP应用,想到用比应用广泛的MVC框架。
要求

1.支持命名空间
2.不支持PHP4
3.架构、性能更重要
4.长期稳定,而不是很快就会被淘汰或者解散的框架
Yii2、symfony2都太庞大,不适合。考虑到了Laravel CakePHP Kohana CI。
先说一下自己对这三款框架的看法

1) CI 2.x
官网一种放弃状态
CI框架太轻巧,很多东西都要自己做,非常陈旧
CI框架在IDE中无法进行代码跟踪,点击类名无法跳转过去

2) CakePHP 2.x
为什么非得向下兼容PHP4?弄得非得用一个蹩脚的App::use()来替代namespace!
为了兼容PHP4弄得整个架构乱七八糟
如果CakePHP放弃对PHP4的兼容,应该会有更多的人使用

3) Laravel
不支持php4,支持命名空间
网上非常多的好评,仔细看每个评测文章都是复制粘贴的感觉很枪手。

网上包括segmentfault上都有对框架的比较,但基本上是都是摘抄的转载的,而不是自己使用过后的真实体会,期待有使用过后的真实体会,而不是复制粘贴网上人云亦云的测评。

今天使用Laravel,发现文档不是官方宣传的那样丰富,而是少非常不清晰。
Route的所有方法有那些,根本就找不到这些说明。官方的文档只是几个简单的例子,根本就不详尽。

分类: WEB前端开发框架 标签:

PHP框架强烈推荐:Phalcon, CI

2015年1月8日 评论已被关闭

PHP框架强烈推荐:Phalcon, CI
http://segmentfault.com/q/1010000000631045

Laravel重的一塌糊涂、向后兼容性差不说,代码风格方面还用tab来缩进!在当今这个4空格(PSR,PEAR,ZEND)甚至是2空格(Langspec)缩进的世界中,可谓逆水行舟,作者本人的信誉也有问题,Phil多次劝过他遵循PSR,作者答应了,FIG上也有了,却一直不改…更遑论其鼓吹的“优雅”和“性能超CI”了。

Laravel的可借鉴之处例如:IoC,DI,eloquent,Artisan这些Phalcon全都有,性能还更好(能比这个框架快的PHP框架不多了,唯一能抗衡的是YAF吧,但YAF那社区,那文档,呵呵了)。

Codeigniter的3.0就快要stable了,对2.0中一些领人诟病的地方也做出了相当大的改进(例如原生支持composer,高度兼容HHVM等),而且CI的快速部署、易于拓展、接近原生语法(学了就知道多么人性,多么简洁)的特性也使得它老当益壮,一些比较不错的第三方库更新频繁,其衍生框架Bonfire也是生机勃勃。

CI的主要缺点是:

缺少IoC/DI/ORM
缺少命名空间(其实我在用laravel的1年时间里也没见多少项目有贯彻通透的)
使用了单例模式(该模式已经considered an anti-pattern!)
至于Yii/ZendFramework/CakePHP/Slim/Swole/Symfony/Swoole,这几个框架,由于我本人没有接触过,所以没有资格评论,但就印象而言,这几个框架实在是让我打不起兴趣学习。

分类: WEB前端开发框架 标签:

Laravel框架相对于其他框架比如CI、TP、Symfony等的优势是什么?

2015年1月8日 评论已被关闭

Laravel框架相对于其他框架比如CI、TP、Symfony等的优势是什么?

http://segmentfault.com/q/1010000000489103

php – Laravel框架相对于其他框架比如CI、TP、Symfony等的优势是什么? – SegmentFault

  1. 强大的rest router:用简单的回调函数就可以调用,快速绑定controller和router
  2. artisan: 命令行工具,很多手动的工作都自动了
  3. 可继承的模版,简化view的开发和管理
  4. blade模版:据说渲染速度更快,我觉得挺好用的,比纯php看着顺眼
  5. ORM
  6. migration: 管理数据库和版本控制
  7. 测试功能貌似也挺强大的,俺没用过
  8. composer也是亮点,现在新更新的项目都支持了,不太稀奇了

其他等别人补充吧,手机回复累。

补充一句话,laravel是让phper不再羡慕ruby on rails的框架

 

 

 

php – Laravel框架相对于其他框架比如CI、TP、Symfony等的优势是什么? – SegmentFault

我对比laravel和thinkphp的看法:

1)laravel 他必须先定义路由,每一条请求都得手动定义路由。而thinkphp yii他们是默认网址格式。
我觉得laravel这样会非常耗费资源,每一条请求网址都必须手动在routes.php里面绑定好,你用了不觉得繁琐吗。一条条的写,想象一下,一次性全部加载解析,运行效率觉得非常慢。

2)composer这个其实没有什么要讲的,只是一个下载安装方式不同而已。

3)对比thinkphp和yii来说,laravel真的还太年轻,官网说的聚集所有框架的最好的优点,这一点确实很吸引人,但是也会导致laravel框架不断的变,包括模板的处理方法。如果追寻的一种稳定的长期的,最好不要用laravel。

4)关于laravel artisan,其实其他的框架比如yii2 thinkphp symfony2,除了thinkphp没有,其他的两个框架都有这样类似的功能的。而且symfony2的功能比laravel的强大很多倍。

5)关于CI,我觉得他即将没落。现在PHP有规范出来了,其中的一点就是驼峰命名。而CI框架他一开头就一个CI_,而且kohana很可能取代CI框架。

6)cakephp,cakephp其实一直在模仿symfony。不过2.x版本和1.x版本已经完全不同了。国内对cakephp的认识还是停留在cakephp 1.x版本上,而且用的越来越少了。以前有很多非常火爆的框架,后来都销声匿迹的。

 

分类: WEB前端开发框架 标签:

最好的 PHP 框架是什么?为什么?

2015年1月8日 评论已被关闭

最好的 PHP 框架是什么?为什么?
http://www.zhihu.com/question/19558755/answer/23062110

——————- 更新于: 2014 . 09. 02 ——————

Laravel China is ready Laravel 中文文档 , 欢迎发起 issue 提交纰漏 和建议 –> Laravel China · GitHub

——————- 更新于: 2014 . 08. 17 ——————

PHPhub – PHP & Laravel的中文社区 一个干净的 PHP 中文社区一直是我的梦想, 这几天动手写了一个, 今天算是正式上线, 虽然还有好多功能需要优化, 欢迎大家加入, 给我点动力, 哈哈.

使用 Laravel4 编写的, 代码也是开源的 summerblue/phphub · GitHub

——————- 更新于: 2014 . 03. 06 ——————
一个比较有说服力的数据:

Laravel 是 Github 上最有名的 PHP 项目, 8627 个 star, 领先第二名的 Symfony 和 第三名的 CI 接近 1000个 star, 见这里 –> Most Star PHP Project On GitHub

ci 和 symfony 得话多少年才能达到今天的影响力, 而 Laravel 的第一个 commit 发生于 Jun 09, 2011 , 见下图:

c54d5b858d8e40cb883406e5e492de5e_b

—————- 首次发布 ———————

Laravel4 , 整个 PHP 社区都为之疯狂的框架.

Laravel4 讲究的是最佳实践, 是一个积极向上的框架, 向 牛B 的 Rails 看齐, 借鉴了很多在成熟框架已经体现出来很成功的元素:

  1. RESTful Routing ;
  2. 设计精妙的 Blade 模板引擎, 轻快, 不失灵活 ;
  3. 合理的 ORM model 层, Eloquent ORM , 借鉴于 Rails 的成功;
  4. migration 数据库版本系统 和 seeding ;
  5. 使用包管理器 Composer , 打开了一扇开往春天的门;
  6. 强调测试驱动, 整个核心经受过完整的测试, 高质量的代码;
  7. 命令行驱动, 可以做到高度自动化 (讲究效率, 代码生成器…) , 借鉴与 rails ;
  8. 合理使用 PHP 的新版本特性, 让写代码更加有乐趣, 跟上时代的步伐;
  9. 积极向上的社区, 这个很重要呀, 大家都在学习着, 创造着好的工具, 加快开发速度, 提高编程效率, 接受新知识的速度也很快.
  10. 对 php 标准化的支持 PHP-FIG — PHP Framework Interop Group

另: 以下几个链接供参考

Best PHP Frameworks for 2014
Why Laravel is Taking the PHP Community by Storm
The future of web development is Laravel

2014 我有个愿望, 希望 PHP 社区一盘散沙的局面成为过去, Laravel, Composer, PHP-Fig 才是未来, 快速开发, 遵守规范, DRY, 构建一个团结的社区, 聪明, 理智的社区.

没有一个比现在更合适的时间了, 朋友们, 把我顶起来吧, 让 PHP 的新人和老鸟都知道在 PHP 社区里面, 有这么一个好东西的存在, 也算为 PHP 社区做贡献. May God be with You.
————————————- END ————————————-

[分享]Kohana入门体验教程

2015年1月8日 评论已被关闭

[分享]Kohana入门体验教程
http://codeigniter.org.cn/forums/thread-140-1-1.html
说明:
1、文中出现一个英文字符串后面加了一个斜杠“/”的话表示它是一个文件夹。
2、如果一个英文字符串前面出现了“/”表示在网页空间的根目录下,一般文件加我就不在前面加“/”了,除非是2层以上的目录。
3、把 Kohana 的解压包放到适当的位置,我是直接放在网页空间的根目录,如果放在其他位置需要相应的修改 url,需要先让 apache 找到 kohana 的 index.php 文件。

Kohana 分两个文件夹,system/ 和 application/ ,以及一个 /index.php 文件。其中 system/ 和 /index.php 最好不要改动。
以下步骤如未特殊注明,均发生在 application/ 中。
1、在流览器中输入 localhost/index.php 可以看到默认的调试用首页(这个首页并不是指 Kohana 中的 index.php ,只是视觉效果上的首页)。
显示的文字提示了控制输出给用户首页内容的 controller 位置: application/controllers/welcome.php 。

2、在 Kohana 给出的文件 /application/controllers/welcome.php 中的 class 里面添加新的函数,函数名是即将访问的页面的名称。比如默认函数index()即相当于缺省的index.php。还可以添加其他的函数,比如添加一个函数hello():
<?php
function hello() {
echo “看到了吧,我的作用就是控制 ‘hello’ 页面需要的数据与输出外观模板的整合。<br>输出的格式就不要在我这里设置了,最好在 /application/view 下建立专门的 XXX_view.php 文件来设置。(只要你辨别的出来,随便用什么名字也可以,一般是 controller 文件中的相应函数的名字加一个后缀 _view ,方便找模板。CI下面不知道是不是这样随意,我不肯定,呵呵。)<br>你所看到的文字即内容,而你看到的换行就是外观啦。一般情况下内容和外观都不会出现在我这里,内容应该放在数据库或者其他文件中。<br>嗯,所以虽然我现在很丑,但我还是完成了数据与外观的整合,而且是很不合乎mvc规范的把数据和外观都在我所在的文件里,呵呵。”;
}
?>
复制代码

在流览器中输入 localhost/index.php/welcome/hello ,可以看到上面 echo 的内容。
url 中的 index.php 也可以除去,不过需要apache的rewrite支持。

3、修改默认主页指向为新的文件 aaa.php 。
将 /system/config/routes.php 拷贝到 /application/config/ 中。在新的 routes.php 的 _default 的值改为 aaa 。
这里的修改相当于在 apache 服务器下把一个文件的名字设置成 index.html 或者 index.php ,在进入该文件夹而未指定具体文件时再如择该文件。另外一个 Controllers 常用的函数式 _default() ,作用是在调用错误的函数(在这里具体是指函数方法)时调用的函数,一般在函数里指向 404 错误页面。
另外大家也看出来了如果 application/ 中的文件与 sysytem/ 中的文件同名,则前者具有更高的优先权。
/application/config/routes.php中设置的 _default 是以 /index.php设置的应用程序文件夹和系统文件夹[可以在 /index.php 中自主设置,不一定就是 application 和 system ]为根目录的,相对应用程序文件夹和系统文件夹路径相同的同名文件加以应用程序文件夹中的文件为优先选择对象。

4、命名 aaa.php 的 class 名字时要和文件名字相同并将首写字母写为大写,即 Aaa 。否则无法完成函数的调用。
<?php
//这里的后缀 _Controller 是必须加的,感谢版主及时指正。
class Aaa_Controller extends Controller {
function index() {
echo “我是新的主页,哦也~”;
}
function page1() {
echo “你找到我了?知道怎么察看我吧,哈哈!<br>下一步我们要使用view来添加外观了。<br>虽然数据还得放在我所在的文件里,但是我将向mvc模式迈出了极其重要的一步——把外观从我所在的文件中给分离出去!”;
}
}
?>
复制代码

通过 localhost/index.php/aaa/page1 可以访问页面 page1 。试一下哦~
class aaa 和 function page() 、funciton index() 的关系就像是文件夹与其中文件的关系。

5、嵌套模板,在 /applincation/view 中建立一个文件 page_view.php。
首先,写一个静态的html文件,page_view.php 。别问我为什么我的后缀是.php,我的内容可全都是静态html!开玩笑了,其实是 Kohana 只识别.php结尾的文件,如果要添加其他的 view 文件得对 Kohana 进行配置。

HTML复制代码
<html>
<head>
</head>
<body>
<h1>标题一号</h1>
<hr><hr>
<p>内容一号。。当然我可以在多写一些内容,但是我太懒了,,就不写了- -~</p>
</body>
</html>
复制代码

可以先打开流览器直接看一下上面那个文件的url地址,方便和后面对比。

将里面可能出现动态内容的地方换成php输出,强调一下,只是php输出,目的是将model获取、处理过的数据显示出来。

HTML复制代码
<html>
<head>
</head>
<body>
<h1><?=$title?></h1>
<hr><hr>
<p><?=$contont?></p>
</body>
</html>
复制代码

很奇怪 $title 和 $content 是怎么来的吧。嗯,因为我还没修改 controller 文件(即/application/controllers/aaa.php)并添加相关变量,所以你的奇怪可以理解,嘿嘿~
好了,下面修改一下 /application/controllers/aaa.php ,添加函数page2()进去。
<?php
class Aaa_Controller extends Controller {
function index() {
echo “我是新的主页,哦也~”;
}
function page1() {
echo “你找到我了?知道怎么察看我吧,哈哈!<br>下一步我们要使用view来添加外观了。<br>虽然数据还得放在我所在的文件里,但是我将向mvc模式迈出了极其重要的一步——把外观从我所在的文件中给分离出去!”;
}
//page2(),,I’m here!
function page2() {
$view = $this->load->view(‘page_view’); //1、先不解释 $this->load->view 的来历,反正你得习惯这种文件(或者函数的)调用方式,以后经常要用到;2、page_view 就是函数 page() 对应的模板文件的 view 文件名,也就是模板文件名了。
$view->title = “标题2号”;
$view->c;
$view->render(TRUE);
}
//End of page2()
}

?>
复制代码

现在有三个页面了,自己换着看一下。

利用 $view 的属性来传递参数虽然简单明了,但总觉得有点说不出来的别扭,数据就是数据,最好不要和 $view 控制器扯在一起。
ok,那我们就换一种方式。在 /application/controllers/aaa.php 中添加如下内容。[这一段是从CI教程里截取的,不过看另外一个帖子[http://codeigniter.org.cn/forums/thread-99-1-1.html 的四楼]说kohana控制器(controler)往视图(view)传递参数有新增的方式 $this->layout->var1 = ”;$this->layout->view(‘Welcome’); ,不过我还没用过(我也是新鸟。。)]
<?php
function page3() {
$data[‘title’] = “标题3号”;
$data[‘content’] = “内容3号。看到了吧,我是用 \$data 数组来传递数据的!<br>如你所见,我在\$this->load->view()添加了参数\$data”;
$view = $this->load->view(‘page_view’, $data);

$view->render(TRUE);
}
}
?>
复制代码

6、在模板中使用php循环,在 page_view.php 中添加如下代码:
<?php foreach($names as $name ) : ?>
<li><?=$name?></li>
<?php endforeach ?>

//也可以用下面这个方式,只是个人爱好而以,呵呵。
<?php foreache($names as $name ) { ?>
<li><?=$name?></li>
<?php } ?>
复制代码

在 /application/controllers/aaa.php 中添加一段测试数组。
<?php
$names = array(‘Adam’, ‘Bruce’, ‘Danna’);
?>
复制代码

好了,通过 localhost/index.php/aaa/page3 访问一下。是不是和静态页面中添加三个li一样?呵呵~

PS:其实这个教程是来自Kohana官方网站的,但是那位演示的兄弟开始的时候劈头就来一句“我对我的英语不好表示歉意,因为我是苏格兰人”,让人感到莫名的崩溃!演示过程中出了几个小错误,虽然是自己修复的,但也着实让人郁闷,一边看一边实践的时候我就跟丢了几次,与那位老兄无关,我下次看资料的时候一定要专心。他讲的内容大概就是这些,更多的入门内容可以看CodeIgniter 讨论中我发的另外两个来自CodeIngiter官方的视频教程,在CI的blog教程中讲得多一些,而且讲得很流畅。CI和Kohana很相似,看那个也是很有帮助的

分类: WEB前端开发框架 标签:

Laravel vs. PhalconPHP vs. Symfony 2

2015年1月8日 评论已被关闭

Laravel vs. PhalconPHP vs. Symfony 2

http://vschart.com/compare/laravel/vs/phalconphp/vs/symfony

Actions

Laravel PhalconPHP Symfony 2
Category
Preference 33% votes 35% votes 32% votes
Website laravel.​com phalconphp.​com symfony.​com
License
Features
Scaffolding Yes Yes Yes
Full text search No Yes Yes
Architecture
Development principles
Design pattern
Multilingual
Multilingual content Yes Yes Yes
System requirements
Operating system
Programming language
Framework
Database
Memory recommended 1 GB ? 256 MB
Memory minimum ? ? 130 MB
More
Description A Framework For Web Artisans High performance PHP Framework Klunge
Tag MVC MVC, Dependency Injection MVC, Dependency Injection, Namespaces
Multi-user system Yes Yes Conditional
Autofocus Yes Yes Yes
Pingback Yes Yes Conditional
Extension/Plug-in Yes Yes Yes
Image processing engin Yes Yes Yes
Interpreter Yes Yes Yes
Trackback Yes Yes Yes
Database model
Transactions Yes Yes Yes
Unicode Yes Yes Yes
Angle viewing ★★★★★ ★★★★★ ★★★★★
WYSIWYG-Editor No ? No
Multiple projects Yes ? Yes
Standard compliance Yes Yes Yes
External pages Yes Yes Yes
User statistics Yes Yes Yes
Revision control Yes Yes Yes
Atomicity Yes Yes Yes
Isolation Yes ? Yes
Horizontal scalable Yes Yes Yes
Template language
Target audience
Difficulty level
Application startup time 2 ms 1 ms ?
Version number 4.2 1.3.1 2.6.1
Adobe Flash Support Yes Yes Yes
PSR-0 compliant Yes Yes Yes
Object-Relational Mapping (ORM) Yes Yes Yes
Machine Code Generation Yes Yes Yes
Documentation level ★★★★☆ ★★★★★ ★★★★★
E-Mail protocols
Multi tasking Yes Yes Yes
RESTful Yes Yes Yes
Lines of code 5 k ? ?
Code Generation Yes Yes Yes
Dynamic typing Yes Yes Yes
Composite keys Yes Yes Yes
Programming paradigm
Comments Yes Yes Yes
Multiple categories No Yes Yes
Hierarchical menus Yes ? Yes
Scripting language support
Free to use Yes Yes Yes
Frontend
Backend
Active Yes Yes Yes
Supported VCS
Database Connection Pooling Yes Yes Yes
Separate Service Layer Yes Yes Yes
Web Flows Yes Yes Yes
Creation Date 2011 January 2012 18ᵗʰ October 2009
Community Driven Excellent Good Excellent
Wizard Yes Yes Yes
Alexa Rank 5 284 ? ?
HTML syntax Yes Yes Yes
WSDL Yes Yes Yes
Reliability ★★★★★ ★★★★★ ★★★★★
Versioning Good Good Good
Data encryption Yes Yes Yes
Custom queries Excellent Good Good
Input Widgets Yes Yes Yes
Layout Structure Template Yes Yes Yes
File Assets Yes Yes Yes
API Excellent Good Excellent
Compiled language No Yes Conditional
XML Aware Good Good Good
Client/Server code reuse
Data storage ?
Native driver
Cloud platform support
Admin Generator No Yes Yes
Function Based Index Yes ? Yes
Compiler Yes Yes Yes
Library file size 17 MB 3 MB 16.1 MB
API comprehensibility ★★★★★ ★★★★★ ★★★★★
Webmail Yes Yes Yes
Jobs Oportunities ★★★★☆ ★★★★☆ ★★★★★
Implementation flexibility 32% votes 26% votes 43% votes
Out-of-the-box functionality 31% votes 40% votes 29% votes
Bundle system Yes Yes Yes
SOA Yes Yes Yes
Annotation Support Yes Yes Yes
LDAP Yes Yes Yes
Query Cache Yes Yes Yes
Realtime Yes Yes Yes
Data Security Yes Yes Yes
Community feedback ★★★★★ ★★★★☆ ★★★★☆
Ease of use ★★★★★ ★★★★★ ★★★★☆
Malicious Injection Prevention Yes Yes Yes
Openshift Paas Support Yes ? ?
Copy, Cut and Paste Support Yes ? Yes
Realtime Server Push Yes ? No
Easy of Use Yes Yes Yes
Bitmap index Yes Yes Yes
Uncompressed Size 2 MB 2 MB ?
JVM No No No
Open Source Yes Yes Yes
Content Preview No ? Yes
Web Developer Toolbar Yes Yes Yes
IntelliSense Yes Yes Yes
XQuery Support Yes Yes Yes
Websocket Support Yes Yes Yes
Maven support No No No
Resource File Processing Yes Yes Yes
Events Support Yes ? Yes
Lambda Expressions No Yes Yes
Language Integrated Query Yes Yes Yes
Closures Yes Yes Yes
Perfomance ★★★★★ ★★★★★ ★★★★★
Database migrations Yes Yes Yes
I like it Yes Yes Yes
Asyncronous JS loading Yes Yes Yes
JavaScript Library included No No No
Debug Mode Yes Yes Yes
Static Typing Yes Yes No
Cloud-enabled Yes Yes Yes
Click & Edit in Place / WYSIWYG No ? Yes
Archive Yes Yes Yes
API Reports Yes Yes Yes
API Test Control Yes Yes Yes
Autocomplete Code Yes Yes Yes
Dependency Injection Yes Yes Yes
Personalization Yes Yes Yes
Supported from Google Yes Yes Yes
Makes you angry No No No
Easy to Learn Yes Yes Yes
Extensibility Yes Yes Yes
Unit Testing Yes Yes Yes
Ajax Yes Yes Yes
User management Yes Yes Yes
JavaScript Event Binding Yes ? ?
ORM Join Support Yes Yes Yes
Object-Oriented Views Yes Yes Yes
View reloading Yes ? ?
Object Oriented Models Yes Yes Yes
Model Conditions Yes Yes Yes
Mobile ready Yes Yes Yes
Administrator responsive? Yes Yes ?
module Yes Yes ?
PDF Support Yes Yes Yes
ACL Yes Yes Yes
Markdown Yes ? ?
Requests per second 100 2 534 ?
Operating system server
Package Manager Yes Yes Yes
Makes developer create a slew of inefficient Javascript No No ?
Easy Setup Yes Yes Yes
Jquery Yes Yes Yes
jQuery Support Yes Yes Yes
Modules/Extensions/Plugins 8 000 9 995 ?
ACL Yes Yes Yes
Stored Procedure Yes ? ?
Vertically Scalable No ? ?
Full-Stack Yes Yes Yes
User-friendly Yes ? No
SEO Yes ? No
Component Oriented Yes Yes Yes
Internationalization Yes Yes Yes
Heroku Support Yes Yes Yes
Framework specific vocabulary Yes Yes Yes
Easy to Config Yes Yes Yes
Self Server Yes Yes Yes
Will get you a job Yes Yes Yes
Is reliable and secure Yes Yes Yes
Scalability Yes Yes Yes
Ability to link to external programs and systems Yes Yes Yes
Supported by Microsoft No Yes No
XSS Yes Yes Yes
Official IDE Support No ? Yes
Amount of letters 7 ? ?
Use components elsewhere? Yes Yes Yes
Hot deployment No ? ?
Can function without AJAX Yes Yes Yes
Попаболь Yes ? ?
Dynamic Language Yes Yes Yes
Namespaces Yes Yes Yes
Sexy Yes Yes Yes
Inbuilt Captcha No Yes ?
wtf mode Yes Yes ?
CKDI – All the Cool Kids Do It Yes ? Yes
Eats humans Yes ? ?
Will make super models fall in love with you Yes ? ?
MVC Yes Yes Yes
WillGetYouLaid Yes ? ?
Developed for Human Yes Yes Yes
Arrogant Creator Yes ? No
Fucking awesome Yes Yes Yes
LIVE Yes Yes ?
ORM that doesn’t hurt No Yes ?
Actual chances of getting laid regardless Yes Yes ?
Edible No No ?
DrivesYouCrazy Yes No Yes
Is VsChart totally worthless? Yes ? ?
Yes Yes ?
Increase Stress Levels Yes No ?
SQL Injection Support Yes Yes Yes
<a href=”http://www.test.com”>test</a> Yes ? ?
Developer 126 486 1 000 002 ?
Like a Madafaka ? No Yes ?
Makes your hair fall Yes No No
Looks good on resumé Yes No ?
<script>alert(1);</script> Yes No ?
dog-vomit style of code No No Yes
Benchod Yes No ?
Works with FIRSTCLASS No Yes ?
fuckingpointless No No ?
Proves You Can Code? Yes Yes ?
Big is best Yes No ?
JOHA Yes ? ?
2 Letter Country Code ? us ?
3 Letter Country Code ? usa ?
Batch Processing ? Yes Yes
Throttling ? Yes Yes
Free for commercial use ? Yes Yes
Sexiness ? 300 100
FAL support ? Yes ?
Partial Classes ? Yes Yes
actors ? April 2014 ?
HLP ? 500 10 000
24/7 support ? Yes ?
Possibility to get laid ? Yes ?
piece of crap ? No ?
Loves Bacon ? Yes ?
Octopus ? No ?
Anus Girth ? 12 ?
Arthur loves ? Yes ?
420 Friendly? ? Yes ?
Lo usa Mascherano ? Yes ?
Inheritance ? Yes ?
:) ? Yes ?
C++ power ? Yes ?
Awesome ? No ?
Aku Ganteng ? ? Yes ?
gonna turn my brown eyes blue? ? No ?
Morele Friendly ? No ?
Janczo Friendly ? No ?
is michael gek ? Yes ?
Popularity (0% global votes) (0% global votes) (0% global votes)
Release Date ? ? July 2011
Sync file manager ? ? Basic
Backup functionality ? ? Good
Highly Available ? ? Yes
Geospatial elements ? ? Yes
CLR ? ? No
Nested Comments ? ? No
Type inference ? ? No
Android App ? ? Yes
unnecessary features ? ? Yes
Latency Compensation ? ? Yes
Rack Middleware ? ? No
+ Add row + + +
Laravel PhalconPHP Symfony 2

PHP框架:Phalcon 中文文档发布

2015年1月8日 评论已被关闭

PHP框架:Phalcon 中文文档发布
http://www.open-open.com/news/view/b1554b

一般都是直接看英文资料,大都能看得懂。但看到 Phalcon 框架如此优秀,在学习后就想和大家分享,但发现国内的人几乎没有使用的,故想翻译一下,一旦翻译才发现读懂和译出一篇好文章真的不太一样。 故前一期翻译的部分章节有点生硬,等有空的时候再回头重译吧,后面的一部分也是以英文文档为基础,但并不再是逐句翻译了。

本文档的中文地址存放在 http://phalcon.5iunix.net

09年左右,大量的框架出现,我看过的框架不下 20 种,最先看到的可能就是 php.MVC 了,这是一个按照 struts 1x 编写的,只不过同时加载的类库太多了,效率不高而且不太完善。

后来稍有名的包括 cakephp、Symfony、Akelos、Prado、Kohana 等,最近几年流行的就是 zf、yii、ci 等,当然还有国内几个比较有名的框架,如 fleaphp、thinkphp 等。

在上面的一些框架中,我比较感冒的还是 ci、yii、thinkphp 等。ci、thinkphp 够简单,速度也不错。yii 是生活在国外的华人开发,功能够全而强大,速度也不错,国内的应用也不少。

一直不太喜欢 zf,记得几年前就和同行朋友聊天的时候说,像 ZEND 公司完全可以用C语言开发出一个扩展来,这样效率会高得多,为毛非得用 PHP 开发呢,事实被我验证了,但开发扩展的不是 ZEND 公司,而是国内一个 PHP 大鸟,人称鸟哥。这个框架就是非常出名的 YAF,因此 YAF 扩展是我必装的扩展之一。同时这也是我发现的第一个C语言写的扩展框架。

但 YAF 的缺点是,功能非常不完善,在我看来只是简单实现了 MVC 结构及路由,分发等功能,像一些 ORM 之类的功能完全没有开发,作者好像也没有开发的意思:)

后来就发现了 Phalcon,一看文档就爱上了她,功能,速度等都是我想要的,我花了一周时间看文档学习她,并在一个下午的过程中,发现了文档中的三个错误并提交了这些错误:),我决定为完善它也贡献一点自己的力量。

Github 上的地址为: https://github.com/netstu/phalcondocs ,您如果发现有些地方译的有些操蛋,烦请你 clone 它,并完善她。

分类: WEB前端开发框架 标签:

centos安装phalcon教程

2015年1月8日 评论已被关闭

centos安装phalcon教程
http://zlkb.net/140.html

本教程仅供新手学习,欢迎phalcon同类一起交流…………。
环境介绍:centos 6.4 64位
组件准备:

sudo yum install php-devel pcre-devel gcc make
yum install gcc libtool make git #因为安装的是minimal的系统,所以很多默认的工具是没有的
yum install php55w-devel # 会自动安装其他的依赖包。 至于为什么是php55w-devel,而不是php-devel,
git clone git://github.com/phalcon/cphalcon.git
cd cphalcon/build
sudo ./install

#默认编译的so文件会放到:/usr/lib64/php/modules/
#进入到php的配置文件里面:/etc/php.ini和/etc/php.d/*
#这里我们其实要新增一个文件到/etc/php.d/目录
#vi /etc/php.d/phalcon.ini </code>

#内容如下:

#Enable iconv extension module
extension=phalcon.so

#然后重启

#service php-fpm restart
#service nginx restart

检查是否安装完成 :
phpprint_r(get_loaded_extensions());

如果安装失败,请按照如下方法操作:

#yum install php-devel

如果提示phpize错误,则打开 phalcon/build/install 文件,第64行,按照如下修改即可
#/usr/bin/phpize && ./configure –with-php-config=/usr/bin/php-config

分类: WEB前端开发框架 标签:

Linux(CentOS)常用命令

2015年1月8日 评论已被关闭

Linux(CentOS)常用命令
http://www.mydf.net/post/49/
通过环境变量设置代理

export http_proxy=”your-proxy-ip:port”

export https_proxy=”your-proxy-ip:port”
文件或目录的copy或移动

mv file1 file2 #相当于重命名

cp /path-to-file /new-path/ #拷贝单文件

cp -r /old-path /new-path/ #拷贝整个目录
RPM文件安装

rpm -ivh filename.rpm #最简单的安装方式
使用screen

screen -S Mysh #创建screen会话

#使用 Cltr+a d (按下Cltr并分别键入a与d)离开当前窗口

screen -r Mysh #恢复Mysh窗口

LNMP(CentOS 6.5 64位)下Phalcon框架的手动安装[note]

2015年1月8日 评论已被关闭

LNMP(CentOS 6.5 64位)下Phalcon框架的手动安装[note]
http://www.mydf.net/post/33/
Author:iSTAT
Posted:January 25, 2014
Category:Web

测试环境:LNMP为64位CentOS 6.5,Nginx 1.4.4 + PHP 5.5.8 + MySQL 5.5.28,最新的安装脚本lnmp 1.0可从lnmp.org下载。

确保LNMP已经安装好,下载Phalcon框架,并上传到/root目录下。因为是在本地测试,所以使用root登录CentOS。
#php-devel php-mysql gcc libtool已经在安装LNMP时安装在系统中了,无需再次安装
cd /root
unzip cphalcon-master.zip
cd cphalcon-master/build/64bits
#开始手动编译安装
make clean
phpize –clean
/usr/local/php/bin/phpize
./configure –with-php-config=/usr/local/php/bin/php-config
make && make install
#完成安装
进入 /usr/local/php/lib/php/extensions/no-debug-non-zts-20121212/,可以看到动态库文件phalcon.so已经生成。

在php.ini中添加

extension=phalcon.so

然后重启PHP即可

分类: WEB前端开发框架 标签: