NodejsExpress4.x Development Framework notes _ node. js

Express :? Webapplicationframeworkfor? Node. js? Express is a simple and flexible node. the jsWeb application development framework provides a series of powerful features to help you create a variety of Web and mobile device applications. This article will introduce you to the nodejsexpress4.x development framework, if you are interested, study together. Express :? Web application framework? Node. js? Express is a simple and flexible node. js Web application development framework. It provides a series of powerful features to help you create various Web and mobile device applications.

Directory

This article focuses on the development framework of Express4.x (specifically 4.10.4), which also involves Mongoose, Ejs, Bootstrap and other related content.

Create a project
Directory structure
Express4.x configuration file
Use an Ejs Template
Bootstrap interface framework
Routing
Session usage
Page prompt
Page Access Control

Development Environment:

Ubuntu

MonogoDB: v2.6.4

Nodejs: v0.11.2

Npm 2.1.10 (if nodejs is installed in version 1.2.19, this article will be upgraded to version 2.x)

1. Create a project

Go to the project directory

Mkdir workplace

Cd workplace

Global installation of express is installed in the system as a command.

Npm install-g express

View express version

Express-V

Note: The express command is not included in express4.x.

Install express-generator

Npm install express-generator-g

For detailed installation process, see prepare Nodejs Development Environment Ubuntu.

Use express commands to create a project and support ejs

Hadoop @ sven :~ /Workspace/nodeJs $ express-e nodejs-demo

Create: nodejs-demo (project name)
Create: nodejs-demo/package. json (project package information)
Create: nodejs-demo/app. js (Main Program)
Create: nodejs-demo/public (public directory)
Create: nodejs-demo/public/images
Create: nodejs-demo/public/javascripts
Create: nodejs-demo/public/stylesheets
Create: nodejs-demo/public/stylesheets/style.css
Create: nodejs-demo/routes)
Create: nodejs-demo/routes/index. js
Create: nodejs-demo/routes/users. js
Create: nodejs-demo/views (view directory, view template file, etc)
Create: nodejs-demo/views/index. ejs
Create: nodejs-demo/views/error. ejs
Create: nodejs-demo/bin
Create: nodejs-demo/bin/www (Startup File, used to start app. js)
Install dependencies:
$ Cd nodejs-demo & npm install
Run the app:
$ DEBUG = nodejs-demo./bin/www

Project created successfully.

Install the dependency as prompted:

The Code is as follows:

Cd nodejs-demo & npm install

Start the web as prompted:

The Code is as follows:

$ DEBUG = nodejs-demo./bin/www

However, we do not intend to use this method to start the program. The reason is that we need to use nodemon in the development process.
Nodemon is used to dynamically identify project Changes During Development and then dynamically load (similar to java web development in Eclipse ). This tool is essential for web development.

Install nodemon:

Npm install nodemon-g

So why do we not use the./bin/www script above?

The reason is that nodemon./bin/www is that there is no way to identify project changes. (I personally tried it. If you know it, I hope you can enlighten me)

Modify app. js:

Comment out the latest line // module. exports = app;

Replace with: app. listen (3000 );

Run the following command to start the main app. js program:

Hadoop @ sven :~ /Workspace/nodeJs/nodejs-demo $ nodemon app. js

Then modify the program to see if it will be dynamically loaded. The following message is displayed:

1 Dec 16:22:07-[nodemon] restarting due to changes...
1 Dec 16:22:07-[nodemon] starting 'node app. js'

Valid.

Test:

The local port 3000 is opened and accessed through a browser: localhost: 3000

2. directory structure

./
Drwxrwxr-x 5 hadoop 4096 December 1 15:57 ../
-Rw-r-1 hadoop 1495 December 1 16:22 app. js
-Rw-r-1 hadoop 12288 December 1 16:22. app. js. swp
Drwxr-xr-x 2 hadoop 4096 December 1 15:57 bin/
Drwxrwxr-x 9 hadoop 4096 December 1 15:58 node_modules/
-Rw-r-1 hadoop 326 15:57 package. json
Drwxr-xr-x 5 hadoop 4096 15:57 public/
Drwxr-xr-x 2 hadoop 4096 December 1 15:57 routes/
Drwxr-xr-x 2 hadoop 4096 December 1 15:57 views/

Directory introduction:

Node_modules, which stores all project dependent libraries. (Each project manages its own dependencies, which is different from Maven and Gradle)
Package. json, project dependency configuration and developer information
App. js, main program entry
Public, static files (css, js, img)
Routes, Routing File (C, controller in MVC)
Views, page files (Ejs template)
Nodejs-demo/bin/www (Startup File, used to start app. js)

Open app. js to view the content:

/*** Module dependency */var express = require ('express '), routes = require ('. /routes '), user = require ('. /routes/user'), http = require ('http'), path = require ('path'); var app = express (); // environment variable app. set ('Port', process. env. PORT | 3000); app. set ('view', _ dirname + '/view'); app. set ('view engine ', 'ejs'); app. use (express. favicon (); app. use (express. logger ('dev'); app. use (express. bodyParser (); app. use (express. methodOverride (); app. use (app. router); app. use (express. static (path. join (_ dirname, 'public'); // development mode if ('development '= app. get ('env') {app. use (express. errorHandler ();} // path parsing app. get ('/', routes. index); app. get ('/users', user. list); // start and port http. createServer (app ). listen (app. get ('Port'), function () {console. log ('express server listening on port' + app. get ('Port '));});

4. Use the Ejs Template

Let the ejs template file use the file with the extension html.

Modify: app. js

Var ejs = require ('ejs'); // introduce ejs. Reinstall dependency>
App.engine('.html ', ejs. _ express );
App. set ('view engine ', 'html'); // app. set ('view engine', 'ejs ');
Rename: views/*. ejs to views/*. html

Correct access to localhost: 3000

Rename the index. ejs and other files.

5. added the Bootstrap interface framework.

In fact, it is to copy the js and css files to the appropriate directory in the project. Includes four files:

Copy to the public/stylesheets directory

Bootstrap.min.css
Bootstrap-responsive.min.css

Copy to the public/javascripts directory

Bootstrap. min. js
Jquery-1.9.1.min.js

Next, we split the index.html page into three parts: header.html, index.html, and footer.html.

Header.html, which is the header area of the html page
Index.html, which is the content display area
Footer.html, at the bottom of the page

Header.html

 <% =: Title %>
 
 
 Index.html <% include header.html %> <% = title %>
Welcome to <% = title %>
<% Include footer.html %> footer.html