V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
cqcn1991
V2EX  ›  分享创造

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

  •  
  •   cqcn1991 ·
    cqcn1991 · 2015-09-16 21:02:45 +08:00 · 3064 次点击
    这是一个创建于 3356 天前的主题,其中的信息可能已经有所发展或是发生改变。

    原文: http://www.douban.com/note/512945304/ ,欢迎建议

    这是参加 Rails Girls 之后写的,之前想发这边和 Ruby China ,不过感觉这里工程师大概占 90%了(剩下 10%是 HR ),倒没有太多初学者会来看,所以一直没发

    实际上,也不是 0 基础的教程。原标题为 Rails in Plain Language ,即用浅显的语言,告诉准备学习 Rails 的同学们, 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,(JS )
    [如果有任何问题,可以直接提问]

    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 ,来自己做网站呢?

    不过我先写这么多吧,如果有足够的人需要的话,再继续写吧

    10 条回复    2015-09-22 18:24:26 +08:00
    yiciyuansky
        1
    yiciyuansky  
       2015-09-16 21:42:23 +08:00 via Android
    公益内容,先支持。
    Robias
        2
    Robias  
       2015-09-16 21:58:30 +08:00
    写得不错,简单易懂。

    只不过打算学 python ,要是有关于 python 这样的教程,我想我会很感兴趣的。
    cxbig
        3
    cxbig  
       2015-09-17 06:28:53 +08:00
    我觉得这样的文章出发点是好的,但是适应群体和平台是个问题。
    真正零基础的人看这样的文章不见得看得进去,主题是 ror ,但是不断的跳开主题讲 html 和 css ,太容易分心,让人找不到头绪。
    对于没有基础的人,可能还是要搞个论坛什么当面交流。带新手的话结对编程会是个不错的途径。
    XianZaiZhuCe
        4
    XianZaiZhuCe  
       2015-09-17 09:09:05 +08:00
    这,不太适合 v 站吧? html css js 都不懂的人跑来 v 站干什么?
    vpncup
        5
    vpncup  
       2015-09-17 17:29:00 +08:00
    有心人
    msg7086
        6
    msg7086  
       2015-09-18 01:57:22 +08:00
    @XianZaiZhuCe 你这一句话,把一群 HR 姐姐给赶跑了。
    chengzhoukun
        7
    chengzhoukun  
       2015-09-21 01:40:34 +08:00
    @XianZaiZhuCe 还有设计师
    anym0us
        8
    anym0us  
       2015-09-21 09:38:31 +08:00
    必须支持一个
    jayzhong
        9
    jayzhong  
       2015-09-22 16:36:26 +08:00
    非常好
    cqcn1991
        10
    cqcn1991  
    OP
       2015-09-22 18:24:26 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1143 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 18:38 · PVG 02:38 · LAX 10:38 · JFK 13:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.