分享 0 基础怎样开始学习做网站 (Ruby on Rails)?

cqcn1991 · 2015年09月02日 · 最后由 cqcn1991 回复于 2018年02月13日 · 9851 次阅读
本帖已被管理员设置为精华贴

原文:http://www.douban.com/note/512945304/ ,欢迎建议 这是参加 Rails Girls 之后写的,实际上,也不是关于 Rails 的。用这个标题,是为了让‘“需要”这篇文章的人,发现这个内容。毕竟,0 基础的人,是不会知道自己应该先了解 HTML,CSS 和 JS 的

================================================== 目标读者:完全 0 基础的人,Rails Girls

大多数教学,都太有条理了。先讲概念,HTML 是什么,CSS 是什么,HTTP 请求是什么....但是一次性听到这么多陌生的概念,很容易晕的。过于抽象了,所以试着写一篇 based-on experience, not concept 的介绍,来帮助大家入门 Rails

Rails 是做什么的?做网站的,你知道什么是网站(比如淘宝,知乎),Rails 能做这些,就行了

1. 网站->网页->按钮 我们要做的是什么?是网站,那么以知乎为例好了

QQ拼音截图未命名.png

这样一个网站,是怎么和“代码”,Rails 联系起来的呢? 这个太复杂了,我们不如只看他的首页(上图) 就拿这个页面来说,他是有 3 部分构成的,HTML,CSS,JS。不过这样说,依然没有什么用 我们只拿出其中的一个按钮,来解释这个概念

QQ拼音截图未命名1.png

我应该怎么来写代码,来实现这个按钮? 这个时候,就要用到 HTML 了,代码如此:

<button class="sign-button submit" type="submit">注册知乎</button>

写好以后,生成的就是按钮了(如图)

QQ拼音截图未命名2.png

"靠,可是这也差得太远了吧?这两个怎么能是一个东西呢!!",你可能会想 但是他的功能,是不是都是一样的呢?(都是“点击”) 这个时候,就用到 CSS 了。(不要在意代码具体什么意思,知道这是 CSS 就行了)

QQ拼音截图未命名3.png

(至于 JS,可以以后再说) 上面想说的就是,我们看到的网页,都是用 HTML,CSS,JS 写的:HTML 来说明这个内容是什么,CSS 来让这个内容变好看(How it looks)。这里说的是按钮,其实,网页上的所有这些文字,标题等等都是这样,都是 HTML+CSS+JS 写的,如下图的头像,链接等等

QQ拼音截图未命名4.png

再举个例子,上面的指向某个问题的链接 纯粹的 HTML,以及加上 CSS 来改变他的样子之后

QQ拼音截图未命名5.png QQ拼音截图未命名6.png

小结一下,上面介绍了什么是 HTML,CSS

2. 难道要重复写很多遍吗? 再看知乎里面的“发现”页面,一条一条的“回答” 这些“回答“的结构,都是相似的。那是不是,我们的代码就要这样一条一条的写下去呢...?

QQ拼音截图未命名7.png

显然,这太麻烦了,所以要用到循环,也就是用编程语言(e.g. Ruby)来做 (e.g for loop ) 或者,想根据用户登录/未登录的状态,来调整页面的内容

QQ拼音截图未命名8.png QQ拼音截图未命名9.png

这里,知乎对于未登录的用户,会有登录的按钮;登录的用户,则显示消息,头像等等。这就用到了编程的东西(if else 判断)

[if else, for loop,这些应该还能理解吧?]

3. 怎么实现注册功能? 上面,我们讲到了看到的网站是如何由代码构成的 不过,写到这里,你可能还在想,这不拖拖拽拽就行了吗?e.g. Dreamwaver, front page 等软件 确实如此。

不过,我们怎么实现“用户注册”的功能呢? 这个时候,就不仅仅是”循环“、”判断“了。显然,这时候,要涉及到更多更为复杂的逻辑 这个时候,就要用到 Rail 了,我们要用他来实现——注册、登录的功能,发帖的功能,提问的功能,点赞的功能等等等

所以,Rails 就是用来实现这些“功能的”。这里不再举例子了,因为太复杂,只提几个问题,让大家思考一下,拿论坛发帖子来说: 我们怎么实现“创建”一个帖子的功能?又怎么“修改”,怎么“删除”? 这下,应该能感到这些功能的复杂了。不过,现在依然不用深究,只要知道 Rails 是用来处理这些复杂逻辑的东西,就行了 (此外,我们有这么多用户的数据,帖子的数据,点赞的数据,就又牵扯到数据库了)

4. 小结 到这里,我们主要介绍了: 什么是 HTML + CSS +JS(显示网页) 什么是 Ruby on Rails(复杂的逻辑功能) 前面的,就是我们所说的前端,后者,就是常称的后端

如果你下次还有疑问的话,不妨顺着这个思路理一理: “网页是由什么构成的?” “怎么实现注册的过程?” “网站上有这么多数据,怎么保存?”

“可是我想要设计一个很漂亮的网站诶.....”,那个是设计师做的 对于一个网页来说,设计师决定这个按钮的颜色,阴影,怎样才好看 而前端工程师(HTML CSS JS),来负责用代码实现这些东西(写具体的代码) 比如设计师说,希望这个按钮是蓝色的,那么工程师就根据这个要求写具体的代码:

button {color:blue}

对于小的 startup 来说,可能最开始就直接写代码做完了,不会有专职的设计师

5. 那么,我接下来该怎么学习 Rails 呢? 好了,写到这里,应该基本了解什么是 Rails 了(其实主要介绍的是前端),接下来的问题可能就是:那我应该怎么学会 Rails,来自己做网站呢? 不过我先懒得写了,如果有足够的人需要的话,再继续写吧

关注一下,文章很长!

楼主写得不错

不过据我的经验,这样混搭起来给初学者讲的效果很差,一般而言讲 HTML 就光讲 HTML,讲 Rails 就光讲 Rails,不要并发,才能有一定的效果。

#2 楼 @blacktulip 我没啥经验...本意只是个引子,比如 Rails Girls 的开场介绍。因为之后就能有教练给你介绍,所以有什么问题,都可以得到及时解答。也可以说就是让你“提出问题”:什么是 HTML?什么是 CSS?这样子好奇和求知的状态,似乎更好点。

4 楼 已删除

在成长的各个阶段都需要像这样的人写些与大家分享的东西出来,支持,加油。

写的还蛮有条理的

重新捡起多年前的 Demo,有一种莫名的亲切感!

请问楼主为何选择知乎~?

#8 楼 @simlegate 知乎不是用 Rails 写的。但是知乎这个网站,大多数人都比较熟悉,选择一个熟悉的例子我觉得比较好

自己以前也是因为类似的文章入门的。物是人非..........

知乎也是用 ruby 写的吗

#12 楼 @shiralwz 不是。原来是 Python。现在好像改成 Java 了?

希望可以继续写下去。

要写得像《Ruby 元编程》这样深入浅出还真是不容易

楼主用的什么 IDE 啊 可以 直接看效果?

#17 楼 @david_inner 这里不是用的 ide,用的是 codepen

支持!

我觉得楼主讲得特别好,我是连 html 都不懂的零基础,感觉看完豁然开朗,真希望楼主多讲一些这样的入门知识,因为对我们而言感觉编程是好复杂的各种天书一样的字母和符号,最悲催的是,我们不懂得那些符号和成品之间的关系。非常感谢楼主,很有帮助!!

然后呢,楼主赚了多少钱?

imwildcat 回复

??? 我是大穷逼啊

不过我确实一直在想怎么赚钱,也一直没做到,是自己一直一来努力的一个方向吧

需要 登录 后方可回复, 如果你还没有账号请 注册新账号