Webstorm Create a Web project for Nodejs + Express + Jade

Webstorm Create a Web project for Nodejs + Express + Jade

Before a simple understanding of Nodejs, think with Nodejs to make a website is too troublesome, to own the HTML string back, this can do the site?

Recently saw the use of jade template to develop, feel very novel, so try A, also understand some features, is a new start.

1, first download webstorm, Baidu a bit, there is a green version.

2, download Express module and Jade module, not detailed said. Then create a new project and select the Nodejs Express app

Then click Create, a small chestnut that can be run is born.

Let's take a look at how Express and Jade love each other.

1 var express = require (' Express '); 2 var app = Express (); 3//View engine Setup4 app.set (' views ', Path.join (__dirname, ' VI EWS ')); 5 App.set (' View engine ', ' Jade ');

The first line of code loads the Express module, then executes, assigns the value to the app variable

The four-line code sets the physical path of the attempt

The five lines of code set the view engine to Jade

Then look at the routing-related settings

var routes = require ('./routes/index '); App.use ('/', routes);

These two lines of code set the default first page of the route, that is, access address: localhost:3000/How to handle the request

The next step is to see how the Index.js in the Routes folder handles this request.

1 var express = require (' Express '); 2 var router = Express. Router (); 3 4/* GET home page. */5 router.get ('/', function (req, res, next) {6   res.render (' index ', {title: ' Express ', Time: ' 2015-11-18 '}); 7}); 8 9 Module.exports = router;

A very simple line of code, mainly looking at lines fifth and sixth, when the route intercepts the localhost:3000 get request, renders the page according to the Index.jade template and passes the parameters: Title and Time

In the view, there are two templates to note: Index.jade and Layout.jade

Index.jade Code:

1 extends LAYOUT2 3 block content4   h1= title5   p (id= ' pid ') Welcome to #{title}6   Div (class= ' contentdiv ') #{ Time}7     Div asdfasdf

Layout.jade Code:

1 doctype html2 HTML3   head4     title= title5     link (rel= ' stylesheet ', href= '/stylesheets/style.css ') 6   BODY7     block Content

Layout is the equivalent of a master page, defining some common parts of the information, such as header information, the content is partially empty, so that the child page to customize, using block content syntax to define the custom area

Index use

Extends layout

To use a master page, use a keyword followed by a space, and then display the content with a normal string

For example: H1=title, write a H1 tag to the page, the content is index.js pass over the title parameter

The nested use of tags is reflected in the indentation:

The basic process is almost there.

But a small problem is that router's module definition is

1 module.exports = router;

To return,

So what's the difference between module.exports and exports?

Baidu a bit, and did an experiment, made the following conclusions.

Module.exports is defined as follows:

1 Module.exports = exports = {};

1. The content that the module eventually returns to the caller, or the content that is public is module.exports

2, when directly to module.exports specified value, no matter how you change exports object, Module.exports will not change. Because exports still points to {}, and module.exports already points to the new object

3. When you do not assign a value to module.exports in the page, but only specify the attribute for exports, for example: Exports.name = "Zhang San",

Then the last module.exports will also have the name attribute, i.e. Module.exports.name = "Zhang San"

4, if the Module.exports specified properties, Module.exports.name = "Zhang San",

It also assigns a property to exports, Exports.age = 22,

Then the last module.exports will also have an age attribute, i.e.: Module.exports.age = 22

Webstorm Create a Web project for Nodejs + Express + Jade