Sails 實作筆記

何謂 sails.js


[sails](http://balderdashy.github.io/sails/) 其實就跟 `Rails` ,`ASP.NET MVC` 類似,是一個 MVC 的 Web 框架。目標是協助您快速的用 nodejs 開發出企業等級的網站(註:由於開發團隊仍在開發中,所以要採用前請先審慎評估XDD)。所以就跟其他框架一樣,他讓我們不用再重新造輪子,整合一般網站開發常用的功能,並且重點是支援許多 nodejs 特有的強項,特別是在開發聊天室這類的應用程式更顯得出效能。本篇文章僅僅透過實作一些基礎,讓我們快速的感受一下 sails 。

安裝 sails.js


            $ npm -g install sails  // -g:安裝到系統路徑

# 建立專案
            $ sails new [project_name]
            $ sails new [project_name] --linker // 使用 linker 用來整和壓縮 css 和 js 的套件
            $ sails new [project_name] --template=jade // 預設樣板引擎是 `ejs` 可以換成 `jade`

# 安裝相依套件
            $ cd [project_name]
            $ npm install
            $ npm install jade --save  // 安裝 jade 並且更新 package.json

# 啓動測試網站
    $ sails lift

依照指示說明在瀏覽器輸入 `http://localhost:1337` 就可以看到預設畫面。

初識路由和目錄結構


路由設定在 `config/routes.js` ,打開該檔案我們會看到如下程式碼:
            module.exports.routes = {
                '/' : {
                    view: 'home/index'
                }
            }





嘗試編輯


將 `view: 'home/index'` 改成 `view: 'static/index'` 。然後我們在 `views` 目錄底下建立一個 `static` 目錄,接著在裡面再建立一個 `index.ejs` 或 `index.jade` 。隨便輸入一些資料,例如
            h2 Hello, This is our page using Jade

或者

            <h2>Hello, This is our page using EJS</h2>

注意:這邊我們先不做太多解釋與設定,純粹先實作讓大家感受一下 Sails 這個框架。如果使用 jade 請記得整個 view 應該是這樣:

            extends ../layout

            block body
                h2 Hello, This is our page using Jade

接著我們使用 sails lift 指令來觀看我們的修改。

加入 bootstrap


到目前為止我們只有使用到 view ,我們來嘗試組織一下專案加入 bootstrap。到 bootstrap3 官網下載 zip 並且把 `bootstrap.css` 放到 `assets/styles/` 目錄底下。

編輯 views/static/index.jadeviews/static/index.ejs 加入

            extends ../layout

            block body
                div.container
                    div.jumbotron
                    h1 activityOverlord
                    h2 ...tracking app activity better than the NSA since 1899.
                    a(href='/user/new', class='btn btn-lg btn-success') Sign up now!

或者

            <div class="container">
                <div class="jumbotron">
                    <h1>activityOverlord</h1>
                    <h2>...tracking app activity better than the NSA since 1899.</h2>
                    <a href="/user/new" class="btn btn-lg btn-success">Sign up now!</a>
                </div>
            </div>

# 修改 Layout
在 `Sails` 裡面跟其他 MVC 框架一樣預設都幫您提出一個 `layout` 樣板,而每個 view 則會嵌入到 `layout` 的 body 中。例如 jade 是 `block body` , `ejs` 是 `<%- body %>` 。如此一來相同的部分我們就可以放入 `layout` 之後如果需要修改,就只要修改一次。
# layout.jade 如下
            !!!
            html
                head
                    title= title

                    // Viewport mobile tag for sensible mobile support
                    meta(name="viewport",content="width=device-width, initial-scale=1, maximum-scale=1")

                    link(rel="stylesheet",href="/styles/bootstrap.css")
                    link(rel="stylesheet",href="/styles/custom.css")
                    block styles


                body
                    div.navbar.navbar-inverse.navbar-fixed-top
                        div.container
                            a.navbar-brand(href="/") Activity Overload  

                    block body

                    div.container
                        hr
                        footer.footer.pull-right
                            div
                                a(href="http://sailsjs.com/") Sails.js
                            div tutorial by irl nathan, with a bunch of help from cody, gabe, heather, mike, scott and zoli
                    // A few key dependencies, linked in order

                    // Bring in the socket.io client
                    script(type="text/javascript", src="/js/socket.io.js")

                    // then beef it up with some convenience logic for talking to Sails.js'
                    script(type="text/javascript", src="/js/sails.io.js")

                    // listen on socket.io for incoming messages
                    script(type="text/javascript", src="/js/app.js")

其他 ejs 範例可以透過 [ActivityOverloadd範例](https://github.com/irlnathan/activityoverlord) 下載 原文影片教學在此 [連結](http://irlnathan.github.io/sailscasts/blog/archives/),這篇文章讓我們先感受一下使用 Sails.js 這個 nodejs 框架使用起來的感覺。後續會補上教學。
作者

andyyou(YOU,ZONGYAN)

發表於

2013-09-29

更新於

2016-12-19

許可協議