Initial attempt to Express&jade Rapid construction station

has been looking at web development-related books, a week to read the "Node Development Guide," a book, because prior to understand some of the relevant knowledge of node, so the basic knowledge before learning faster, to develop practice this chapter, but found that a lot of content can not follow the practice. Because of the rapid development of node in recent years, the Web development Framework Express must also be updated more frequently, and the version differs greatly from the version. So, there must be a lot of code in the book will not be able to run, but the general framework is still there, want to practice or to control the official documents.

1. Create an Express project

According to the introduction of the official documentation, follow the steps of the express station to roughly write:

1. NPM Install Express installation Express
2. NPM Install express-generator-g installs Express app Builder
3. Express MyApp build Express project directory and basic boot code
4. Debug=myapp npm start app (Mac or Linux), set Debug=myapp & npm start app (Windows)
5. Browser Access http://localhost:3000

The deployment of a project is completed quickly through the steps above, so the next step is to fill in the content, and the framework is developed so quickly, but it ignores a lot of important details.

Open the MyApp folder and you will see the following directory structure for the project:

. ├──app.js├──bin│   └──www├──package.json├──public│   ├──images│   ├──javascripts│   └──stylesheets│       └──style.css├──routes│   ├──index.js│   └──users.js└──views    ├──error.jade    ├──index.jade    └──layout.jade

Know some of the relevant knowledge of node, it is known that node is a dynamic Web page to implement the site, as in other languages like Java, PHP, to implement dynamic pages in the HTML template to insert program code, so there are JSP, PHP and ASP and other technologies. There are many template engines implemented through JavaScript, Jade is one of them, why choose it, because express default is it, anyway is new contact, then it.

2. Jade Template engine

Because of the newly-learned, there is no experience to talk about, the basic usage of the official website can be. This type of language basically looked at 80% or 90%, followed by a skilled use of it.

• Jade Template Syntax Documentation by Example
• jade--HTML template Engine from node. JS-News-Segmentfault

3. Look back at App.js

View engine Setupapp.set (' views ', Path.join (__dirname, ' views ')); App.set (' View engine ', ' Jade ');

This is where you set up the Jade template engine and the view directory.

4. Writing Routing Rules

Write a routing rule, open the Routes/index.js file, add 4 routing rules, and represent 4 different pages.

/* GET home page. */router.get ('/', function (req, res, next) {  res.render (' index ', {title: ' Home Page '}); * GET Detail page. */router.get ('/detail/:id ', function (req, res, next) {  res.render (' detail ', {title: ' Detail Page '}); * GET Admin page. */router.get ('/admin ', function (req, res, next) {  res.render (' admin ', {title: ' admin Page '}); * GET List page. */router.get ('/list ', function (req, res, next) {  res.render (' list ', {title: ' List Page '});

5. Look at the Jade template view file

Open Views/layout.jade

DOCTYPE htmlhtml  head    title= title    link (rel= ' stylesheet ', href= '/stylesheets/style.css ')  body    block Content

Read the basic of the jade grammar can be seen that this is a basic page, and then open Views/index.jade.

Extends Layoutblock content  h1= title  p Welcome to #{title}

In a routing rule, the title variable is used here, which is the dynamic page. NPM start app, Access http://localhost:3000 get page like.

6. Create the detail, List, admin page in turn

Depending on the access path specified by the routing rules, Access is given in turn, and a different dynamic page is obtained.

