First try Express & jade

A preliminary attempt to build a website quickly using Express & jade has recently been reading books related to Web development. I have read the Node development guide in one week. I have learned some Node-related knowledge before, as a result, I learned a lot about the basic knowledge. when I started to develop and practice this chapter, I found that a lot of content could not be followed. In recent years, Node development has been too fast, and its Web development framework Express must be updated frequently, and the version and version are significantly different. Therefore, there must be a lot of code in the book that cannot be run now, but the general framework is still there. to practice it, you must compare it with the official documentation.

1. generate an Express project

According to the introduction to the official documentation, follow the steps for creating an Express website:

1. Npm install express
2. Npm install express-generator-g install express application generator
3. Express myapp generates the express project directory and basic startup code
4. DEBUG = myapp npm start application (Mac or Linux); set DEBUG = myapp & npm start application (Windows)
5. Access http: // localhost: 3000 through a browser

After completing the deployment of a project through the above steps, you need to enter the content in it. The framework development is so fast, but many important details are ignored.

Open the myapp folder and you will see the directory structure of the project as follows:

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

If you know something about Node, you will know that Node implements websites through dynamic web pages, just like Java and PHP in other languages, to implement dynamic pages, you need to insert the program code in the HTML template, so you have JSP, PHP, ASP, and other technologies. There are many Template engines implemented through JavaScript, and Jade is one of them. why should we choose it? because Express is the default one, and it is also new.

2. Jade template engine

There is no experience to talk about because of the new study. you can refer to the official website for basic usage. This type of language is basically 8% once, and the next step is to use it skillfully.

• Jade Template Syntax Documentation by Example
• Jade-source from Node. js's HTML template engine-News-SegmentFault

3. Check out app. js.

// view engine setupapp.set('views', path.join(__dirname, 'views'));app.set('view engine', 'jade');

Here is where the Jade template engine and view directory are set.

4. write routing rules

Write routing rules, open the routes/index. js file, and add four routing rules, representing four 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. check the jade template view file.

Open views/layout. jade

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

After reading the basics of jade syntax, we can see 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 a dynamic page. Run npm start to start the application and access http: // localhost: 3000 to obtain the page, as shown in.

6. create the detail, list, and admin pages in sequence.

According to the access paths specified by the routing rules, access them one by one to obtain different dynamic pages.