Nodejs + express + jade make a small album for my baby

My little star was welcomed at the end of last year. From then on, there was one more important concern. The whole family is too busy. Recently, my baby is a little bigger and I am free to study the technology. This is the first post in 14 years. No more nonsense. Let's get started.

1. Install NTVS

I am the most senior. NET programmer. I still like to use VS for Development (Don't Like It). To use VS for node development, NTVS needs to be developed. Install NTVS. This is not much to mention. Someone has already introduced it. Go here to download it http://nodejstools.codeplex.com/

After installation, you can start.

2. The first hello world

Create a nodejs project:

'Stylesheet ', href ='/stylesheets/style.css ') body block content

Modify index. js

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

You can run it again. The cute Hello World appears.

'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-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') a (class = 'navbar-brand' href = '#') = 'my little start' 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 contentScript (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 is equivalent to _ layout. cshtml in asp.net mvc. Therefore, jade is equivalent to the razor view engine. Jade can simplify html writing. For example, a <div> </div> can be written as long as a div with jade. It also supports for each and other syntaxes. It is emphasized that the nested format of jade does not use tabs or spaces, and cannot be mixed.

Modify index. js

The role of this file is equivalent to the controller under asp.net mvc. Here, nodejs is used to read the image file under the baby folder and then transmitted to the index. jade view. Var fs = require ('fs'); exports. index = function (req, res) {var files = fs. readdirSync ('Public/images/baby'); res. render ('index', {title: 'My Little start', imgs: files });};

Modify index. jade

Use the data passed by index. js to generate the img Tag cyclically.

extends layoutblock 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' )

Run it. Haha.

Here is the demo URL. I deployed it on AZURE:

Http://kklldog.chinacloudapp.cn: 8888/

In the future, I will add comments, logs, and other functions, so stay tuned.

Finally, for my little stars, I would like to find a good pitfall in the Suzhou area.