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/

后续我会添加评论,日志等功能,敬请期待。

最后为了我的小星星,求一个苏州地区的好坑,求各位大神推荐。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GANDCRAB

GANDCRAB V5.0.4数据恢复及安全防御

(作者公众号:网安众安)今年以来,GandCrab勒索病毒频繁出现变种版本(GandCrab4.0、GandCrab5.0、GandCrab5.0.3...

6640
来自专栏SAP最佳业务实践

SAP最佳业务实践:SD–售前活动(920)-3订单

一、VA01显示参考报价创建销售订单 如果客户接受报价,则可以参考该报价来创建销售订单。然后,在报价的有效期内,系统将自动确定在报价中达成一致的价格 PR00...

3687
来自专栏云计算教程系列

如何使用ClamAV扫描漏洞

Clam AntiVirus(ClamAV)是免费而且开放源代码的杀毒软件,软件与病毒码的更新皆由社群免费发布。目前ClamAV主要是使用在由Linux、Fre...

1381
来自专栏玄魂工作室

CTF实战20 渗透测试-后渗透攻击

一般情况下Linux的本地提权要用nc反弹出来,因为Linux下提升权限后得到的是交互式shell,需反弹才能进行下一步命令的执行

1814
来自专栏云鼎实验室的专栏

WannaCry 勒索病毒用户处置指南

2017年5月12日晚,勒索软件 WannaCry 感染事件爆发,全球范围99个国家遭到大规模网络攻击,被攻击者电脑的文件被加密,被要求支付比特币以解密文件。腾...

7.3K0
来自专栏java工会

数据库分库分表事务解决方案

随着时间和业务的发展,数据库中表的数据量会越来越大,相应地,数据操作,增删改查的开销也会越来越大。因此,把其中一些大表进行拆分到多个数据库中的多张表中。 另一方...

882
来自专栏FreeBuf

漫谈攻击链:从WebShell到域控的奇妙之旅

做渗透测试时遇到的域环境经常就是要么太复杂我们搞不定,要么太简单进去就拿到域控没啥意思,这些显然都无法满足我们实践已掌握知识的刚需。同时为了给我们道格安全技术小...

1465
来自专栏QQ音乐技术团队的专栏

Android 权限机制与适配经验

本文主要分享了以下几个知识点的内容,1、Android 权限机制关键知识点;2、QQ 音乐对于权限的适配经验;3、近段时间以来遇到的一些 Android 权限方...

5021

一位非提交者的Apache CloudStack贡献

本文的内容最初由Joe Brockmeier编写,发表在Cloudstack博客上。

2015
来自专栏安恒信息

新一轮DNS钓鱼攻击已突破国内安全防线

近日,据国内领先的DNS服务提供商114DNS官网微博消息称:新一轮DNS钓鱼攻击已经突破国内安全防线,可能已经导致数百万用户感染。随后,其他安...

3006

扫码关注云+社区