当前位置: 首页>NodeJS>nodejs+express+jade给我baby做个小相册

nodejs+express+jade给我baby做个小相册

时间:2015-07-10 13:15 来源:网络整理 作者:KKWL 点击:
去年年底迎来了my little star。从此人生多了一个最重要的牵挂。生了宝宝全家人都太忙了。最近宝宝稍微大点了,终于有空可以研究下技术了。这是14年第一帖。废话不多了。开始吧 1

去年年底迎来了my little star。从此人生多了一个最重要的牵挂。生了宝宝全家人都太忙了。最近宝宝稍微大点了,终于有空可以研究下技术了。这是14年第一帖。废话不多了。开始吧

1.安装NTVS

最为一个资深.NET程序员我还是喜欢用VS来开发(不喜勿喷),使用VS开发node需要开发NTVS。安装NTVS,这个不多说了,已经有人介绍过了。去这里下载吧

装好后就可以开始了。

2.第一个hello world

新建一个nodejs项目:

image

运行一下提示找不到模块,这是因为少了express,jade,stylus三个模块。

wps_clip_image-4897

我们使用npm下载下来。

安装express

cd到程序目录,然后npm install express 完成后安装另外2个。

wps_clip_image-5080

这里其实本来可以使用图形化的npm来安装。只是最近npm的服务器有点抽风,始终加载不进来,于是我直接使用npm命令来加载。

另外npm的服务器有的时候很慢,可以切换到cnpm的服务器上:

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

速度还行。

wps_clip_image-5298

 

再次运行一下,擦,还是报错。

wps_clip_image-5504

这是因为原先的模板使用doctype 5的标签导致,因为这个标签已经过时了,改用doctype html。

修改layout.jade

doctype htmlhtml 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出现了。

wps_clip_image-6138

3.bootstrap相册

下面开始做相册:

前端我使用bootstrap来做,bootstrap这种神器就是为我们这种不懂美工的程序猿而生的。

下载bootstrap,把css,跟js放到public文件夹下面。在public文件夹下面新建一个baby文件夹,里面放要显示的图片。

修改layout.jade

doctype htmlhtml 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

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------