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/'+imgclass="img-thumbnail" style='width:140px;height:140px;margin:5px' )
运行一下，哈哈
下面是演示网址，我部署在AZURE上：
http://kklldog.chinacloudapp.cn:8888/
后续我会添加评论，日志等功能，敬请期待。
最后为了我的小星星，求一个苏州地区的好坑，求各位大神推荐。
页:
[1]