nodejs+express+jade給我baby做個小相冊

去年年底迎來了my little star。從此人生多了一個最重要的牽掛。生了寶寶全家人都太忙了。最近寶寶稍微大點了，終於有空可以研究下技術了。這是14年第一帖。廢話不多了。開始吧

1.安裝NTVS

最為一個資深.NET程序員我還是喜歡用VS來開發（不喜勿噴），使用VS開發node需要開發NTVS。安裝NTVS，這個不多說了，已經有人介紹過了。去這里下載吧http://nodejstools.codeplex.com/

裝好后就可以開始了。

2.第一個hello world

新建一個nodejs項目：

運行一下提示找不到模塊，這是因為少了express，jade，stylus三個模塊。

我們使用npm下載下來。

安裝express

cd到程序目錄，然后npm install express 完成后安裝另外2個。

這里其實本來可以使用圖形化的npm來安裝。只是最近npm的服務器有點抽風，始終加載不進來，於是我直接使用npm命令來加載。

另外npm的服務器有的時候很慢，可以切換到cnpm的服務器上：

npm set registry=http://r.cnpmjs.org/

速度還行。

 

再次運行一下，擦，還是報錯。

這是因為原先的模板使用doctype 5的標簽導致，因為這個標簽已經過時了，改用doctype html。

修改layout.jade

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
　　block content

修改index.js

*
 * GET home page.
 */

exports.index = function(req, res){
  res.render('index', { title: 'Hello World!' });
};

再次運行終於可以了。可愛的Hello World出現了。

3.bootstrap相冊

下面開始做相冊：

前端我使用bootstrap來做，bootstrap這種神器就是為我們這種不懂美工的程序猿而生的。

下載bootstrap，把css,跟js放到public文件夾下面。在public文件夾下面新建一個baby文件夾，里面放要顯示的圖片。

修改layout.jade

doctype html
html
    head
        title= title
        link(rel='stylesheet', href='/stylesheets/style.css')
        link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
        link(rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css")
        link(rel="stylesheet" href="/stylesheets/bootstrap-image-gallery.min.css")
    body(style='background:black')
        div(class="navbar navbar-inverse navbar-fixed-top" )
            div(class='container')
                div(class='navbar-header')
                    button(class='navbar-toggle collapsed' data-toggle="collapse" data-target=".navbar-collapse")
                        span(class='sr-only')='Toggle navigation'
                        span(class='icon-bar')
                        span(class='icon-bar')
                        span(class='icon-bar')
                    a(class='navbar-brand' href='#')='My little star'
                div(class='collapse navbar-collapse' style='height: 1px;')
                    ul(class='nav navbar-nav')
                        li
                            a(href='#')='Home'
                        li
                            a(href='#')='About'
            div( style='background-image: url(/images/top_bg3.jpg);background-position: center 0;background-size: cover;height:200px' )

        block content
        script(src='http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js')
        script(src='/bootstrap.js')
        script(src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js")
        script(src="/bootstrap-image-gallery.min.js")

layout.jade相當於asp.net mvc里面的_layout.cshtml。那么jade就相當於razor視圖引擎。jade可以簡化html的書寫比如一個<div></div>用jade寫只要div就可以了。它也支持for each等語法。這里強調一點，jade的嵌套格式不要么使用tab要么使用空格，不能混着用。

修改index.js

這個文件的作用相當於asp.net mvc下的controller，這里使用nodejs讀取baby文件夾下的image文件然后傳遞到index.jade視圖上。

var fs = require('fs');
exports.index = function(req, res){
   
 var files = fs.readdirSync('public/images/baby');
  res.render('index', { title: 'My Little Star',imgs:files });
};

修改index.jade

使用index.js傳遞過來的數據，循環生成img標簽。

extends layout
block content
    div(style='height:210px')
        for img in imgs
            a(href='images/baby/'+img title=img data-gallery)
                img(src='images/baby/'+img  class="img-thumbnail" style='width:140px;height:140px;margin:5px' )

運行一下，哈哈

下面是演示網址，我部署在AZURE上：

http://kklldog.chinacloudapp.cn:8888/

后續我會添加評論，日志等功能，敬請期待。

最后為了我的小星星，求一個蘇州地區的好坑，求各位大神推薦。