Node. js express from entry to cainiao (1) -- Hello world! + Ejs template + background parameter transfer to foreground + distribution View

 

The only reason for writing this series is that cainiao, like bloggers, can't remember how express is used, but will assume that cainiao are familiar with JavaScript and node. basic JS usage and ASP. net MVC. I will try to add some knowledge points in the example that correspond to ASP. NET MVC.

You can move to https://github.com/visionmedia/expressto download the source code. The example is in examples under the root directory. Before compiling, remember to enter NPM install in the root directory to initialize the runtime environment.

For the express method used in the example, go to http://expressjs.com/api.html, where the expressapi

 

1. Hello world!

Why are there fewer entry points? Hello World

View code

 1   VaR Express = require ('HTTP: // www.cnblogs.com /'); //  Import express package 2   3   VaR APP = Express (); //  Create an express instance  4   5   //  Routing  6   //  The following method responds to the GET request with the default "/"  7   //  Are req and res very familiar?  8 App. Get ('/',Function  (Req, Res ){  9 Res. Send ('Hello world' );  10   });  11   12 App. Listen (3000 ); //  Set the port number for listening to HTTP requests  13 Console. Log ('express started on port 3000 ');

Access www. localhost: 3000.com to view the string "Hello World!" directly returned by the server !" (Similar to return content ("Hello world! "))

 

2. Upload parameters to the foreground + distributed view in the ejs template + background

You can return a string directly from the server. How can you display a nice HTML page? Don't worry. The following is a common view template ejs for Express. After reading the example below, you should learn how to return HTML pages, how to pass parameters to the front-end HTML pages, and how to write HTML pages-distributed View

Usage

Background NodeCode

View code

 1   VaR Express = require ('HTTP: // www.cnblogs.com /' );  2   3   VaR APP = module. Exports = Express ();  4   5   // Register an ejs template as an HTML page. To put it simply, it is the template page with the original. ejs suffix. The current suffix name can be // .html  6 App.engine('.html ', require ('ejs' ). _ Express );  7   8   //  The suffix of the video template is .html, avoiding the embarrassment of res. Render ("xx.html") every time.  9 App. Set ('view engine ', 'html' );  10   11   //  Set the template file folder __dirname as a global variable, indicating the website root directory  12 App. Set ('view', _ dirname + '/view' );  13   14   VaR Users = [  15 {Name: 'tobi ', email: 'tobi @ learnboost.com' },  16 {Name: 'loki', email: 'loki @ learnboost.com' },  17 {Name: 'Jane ', email: 'Jane @ learnboost.com' }  18   ]; 19   20 App. Get ('/', Function  (Req, Res ){  21     //  Parameters are passed to the page template. Strings and objects can be passed. Note the format.  22 Res. Render ('users' ,{  23   Users: users,  24 Title: "ejs example" ,  25 Header: "Some users" 26  });  27   });  28   29   If (! Module. Parent ){  30 App. Listen (3000 );  31 Console. Log ('express app started on port 3000' );  32 }

Front-end HTML code

View code

 1  // User.html  2   3   <%  Include header.html  %>  4   5   <  H1  > Users </  H1  >  6   < Ul  ID  = "Users"  >  7     <%  Users. foreach (  Function  (User ){  %>  8       <  Li  > <%  =  User. Name  %>   & Lt;  <%  =  User. Email  %>  & Gt;  </  Li  > 9     <%  })  %>  10   </  Ul  >  11   12   <%  Include footer.html  %>  13   14  // Header.html  15   <!  Doctype html  >  16   <  Html  Lang  = "En"  >  17   <  Head  >  18     < Meta  Charset  = "UTF-8"  >  19     <  Title  >   <%  =  Title  %>   </  Title  >  20    <  Style  Type  = "Text/CSS"  >  21   Body  {  22   Padding  :  50px  ;  23  Font  :  13px Helvetica, Arial, sans-serif  ;  24       }  25     </  Style  >  26   </  Head  >  27  <  Body  >  28   29   // Footer.html  30   </  Body  >  31   </  Html  > 

Those familiar with MVC must have seen that this is not the same as MVC! The route (router) finds the corresponding processing method. In the method (Controller), either return the string (return content () Directly or pass the data to the view engine (return view ()), data is displayed by the view engine.

But take a closer look, it is not MVC, because the current code structure is not clear and there is no hierarchy yet. In the next article, we will see the establishment of express MVC.

 

The operating system used in this series is Ubuntu, the node version is 0.10.0, The Express version is 3.2.0, And the ejs version is 0.8.3. Currently, the latest version is basically