Nodejs frame Express ready to log in

Directory:

1. Install the template
2. Static resources
3. Add a View
4. Render View
5. URL redirection

Template engine

Starting with this lesson we're going to use the Express framework to implement a simple user login feature, so let's start by preparing the relevant resources.

Using the Express framework in Nodejs, which defaults to the Ejs and jade rendering templates, today we take the Ejs template as an example of the underlying functionality of template rendering page templates.

1. Ejs Template Installation Method

NPM Install Ejs

2. After the directory is installed, how to invoke it, as follows:

// Specifies the suffix of the render template file named Ejsapp.set (' View engine ', ' Ejs ');

3. The default Ejs template only supports rendering to Ejs as the extension of the file, it may be used when the code is not written in a very uncomfortable way or want to write in the form of HTML, what to do, then we have to modify the template engine, will also use the engine function Express.

4. Engine registers the function of the template engines, processing the specified suffix file.

// Modify the template file suffix named htmlapp.set (' View engine ', ' html ' ); // Run the Ejs module app.engine ('. html ', require (' Ejs '). __express); // Two underline

"__express", a public property of the Ejs module that represents the file name extension to render.

Static resources

Due to environmental constraints, we do not use static resources here, but the actual development we will certainly use, the specific use of the rules are listed below, can be consulted.

If you want to load the static file (CSS, JS, img) in the Web page, you need to specify a directory for static files, and when the browser makes a non-HTML file request, the server will go to this directory to find the relevant files.

1. Add a directory under the project directory that holds the static files to public.

2. In the public directory in the addition of three to store JS, CSS, img directory, the corresponding name is JavaScripts, stylesheets, images.

3. You can then put the relevant files in the appropriate directory.

4. For example, the browser issues a style sheet request like this:

<href= "/stylesheets/bootstrap.min.css"  rel= "stylesheet" Media = "Screen" >

The server side looks for the bootstrap.min.css file in the public/stylesheets/directory.

With a static directory file, we also have to tell it the static file path in the startup file, which needs to be specified as follows:

App.use (express.static (Require (' path '). Join (__dirname, ' public '));

ps:express.static--Specifies the lookup directory for the static file.

Using the use function to call the middleware to specify express static access to the directory, ' public ' is the total directory we created to hold static files.

Add a View

OK, let's add the page template, we'll create a new directory to store the template file separately, and here we'll put it on the root path.

The following is the beginning of the new index.html, login.html, home.html three pages.

1. index.html page reference content is as follows:

<Divstyle= "height:400px;width:550px;margin:50px auto;margin-left:auto;border:solid 1px;background:rgb (246, 246, 253);">    <Divstyle= "margin-left:35px;">        <H1>Home</H1>        <formAction="#"role= "form"style= "margin-top:90px;margin-left:60px;">            <H1>Welcome to the homepage!</H1>            <Divstyle= "margin-top:145px;">                <inputtype= "button"value= "Login">            </Div>        </form>    </Div></Div>

2. login.html page reference content is as follows:

...<title>User Login</title><MetaCharSet= "Utf-8"><Scriptsrc= "Http://code.jquery.com/jquery-2.1.1.min.js"></Script>... <Divstyle= "height:300px;width:350px;margin:100px auto;margin-left:auto;border:solid 1px;background:rgb (246, 246, 253);"> 　　 <Divstyle= "width:200px;margin:auto;margin-top:50px;"> 　　　　 <H1>User Login</H1> 　　　　 <formAction="#"role= "form"Method= "POST"> 　　　　　　 <inputID= "username"type= "text"name= "username"style= "margin:20px 0px;"> 　　　　　　 <inputID= "Password"type= "Password"name= "Password"> 　　　　　　 <Divstyle= "margin-top:30px;margin-left:125px;"> 　　　　　　　　 <inputtype= "button"value= "Login"> 　　　　　　 </Div> 　　　　 </form> 　　 </Div></Div>

3. home.html page reference content is as follows:

<Divstyle= "height:400px;width:550px;margin:50px auto;margin-left:auto;border:solid 1px;background:rgb (246, 246, 253);"> 　　 <Divstyle= "margin-left:45px;"> 　　　　 <H1>Home</H1> 　　　　 <formAction="#"role= "form"style= "margin-top:90px;"> 　　　　　　 <H1>Landing Success!</H1> 　　　　　　 <Divstyle= "margin-top:145px;"> 　　　　　　　　 <inputtype= "button"value= "Exit"> 　　　　　　 </Div> 　　　　 </form> 　　 </Div></Div>

accessing views

How do we access the page template, which will use the Res object's render function.

1. Render the page template with the render function.

2. Format: Res.render (view, [locals], callback);

3. The parameter view is the file name of the template callback is used to process the returned rendered string, options, callback can be omitted, when the template is rendered [locals] (JSON format) for its template to pass the variable value, in the template can call the passed variable, We'll tell you how to use it later, or you can use it yourself to see how it works.

4. For example, to render the index.html page we just added, we can write the following in App.js:

var express = require (' Express '); var app = Express (); var path = require (' path '); App.set (' views '' view engine ', ' HTML'. html ', require ( ' Ejs ' ). __express); App.get (function(req, res) {Res.render (' index ');}); App.listen (80);

After running in the test address we can see the rendered index page, try to try other pages can also render success?

4. As with static files, we also want to set the views stored in the directory, as follows:

// set the view variable, which means the directory app.set (' views ', __dirname);

With the Web template and the specified directory, you can access them below.

REDIRECT Basic usage

The redirect method allows URL redirection, jumps to the specified URL, and can specify status, which defaults to 302 mode.

Format: Res.redirect ([status], URL);

Example 1: Use a full URL to jump to an entirely different domain name.

Res.redirect ("http://www.hubwiz.com");

Example 2: Jump to the specified page, such as the landing page, as follows:

Res.redirect ("login");

After we start to implement the login function, first try redirect redirect, jump to our site how? Reference: http://www.hubwiz.com/course/544db33888dba01ef09d0682/This article link: http://www.cnblogs.com/jasonnode/p/4487510.html

Nodejs frame Express ready to log in