当前位置:网站首页>Express framework

Express framework

2020-11-08 16:58:54 Stars, sea

Express frame

1.1 Express What is the frame

Express It's based on Node Platform web Application development framework , It offers a range of powerful features , Help you create a variety of Web application . We can use npm install express Command to download .

1.2Express Frame features

  • It provides a convenient and concise route definition (router Third party modules are from express Extracted from the framework )

  • Access to HTTP The request parameters are simplified

  • High support for template engine , Easy to render dynamic HTML page

  • It provides middleware mechanism to effectively control HTTP request

  • It has a large number of third-party middleware to extend the function

1.3 Native Node.js And Express Framework versus routing

app.on('request', (req, res) => {
    // Get the request path of the client
    let { pathname } = url.parse(req.url);
    // Judge the request path Different path addresses respond to different content
    if (pathname == '/' || pathname == 'index') {
       res.end(' Welcome to the home page ');
    } else if (pathname == '/list') {
       res.end(' Welcome to the list page ');
    } else if (pathname == '/about') {
       res.end(' Welcome to our page ')
    } else {
       res.end(' I'm sorry , The page you visited went on a trip ');
    }
});
 //  When the client uses get Access to / when 
app.get('/', (req, res) => {
    // Respond to the client
    res.send('Hello Express');
});

// When the client uses post Access to /add When routing
app.post('/add', (req, res) => {
   res.send(' Use post The way requested /add route ');
});

1.4 Native Node.js And Express Get request parameters by framework comparison

 app.on('request', (req, res) => {
   // obtain GET Parameters
   let {query} = url.parse(req.url, true);
   // obtain POST Parameters
   let postData = '';
   req.on('data', (chunk) => {
       postData += chunk;
  });
   req.on('end', () => {
       console.log(querystring.parse(postData)
  }));
});
app.get('/', (req, res) => {
   // obtain GET Parameters
   console.log(req.query);
});

app.post('/', (req, res) => {
   // obtain POST Parameters
   console.log(req.body);
})

1.5 Express First experience

Use Express Framework creation web The server is so simple , call express The function returned by the module can be .

//  introduce Express frame 
const express = require('express');
// Use the framework to create web The server
const app = express();
// When the client uses get Access to / When routing
app.get('/', (req, res) => {
    // 1.send The type of response content is detected inside the method
   // 2.send Method will automatically set http Status code
   // 3.send Method will help us set the content type and encoding of the response automatically
   // Respond to the client send Method automatically sets the request header based on the type of content
   res.send('Hello Express'); // <h2>Hello Express</h2> {say: 'hello'}
});
// Program monitoring 3000 port
app.listen(3000);

2. middleware

2.1 What is Middleware

Middleware is a bunch of methods , Can receive requests from clients 、 Can respond to requests , The request can also be passed on to the next middleware for processing .

 

 

Middleware is mainly composed of two parts , Middleware method and request processing function . The middleware method consists of Express Provide , Responsible for scanning requests , The request handling function is provided by the developer , Responsible for handling requests .

app.get(' Request path ',' Processing function ') // Receive and process get request app.post(' Request path ',' Processing function ') // Receive and process post request

Multiple middleware can be set up for the same request , Multiple processing of the same request . By default , Requests match middleware from top to bottom , Once the match is successful , Terminate match .

You can call next Method gives control of the request to the next middleware , Until the middleware that ends the request .

next, Permission control function

app.get('/request', (req,res,next) => {
req.name = " Zhang San ";
next() ;
};
app.get('/request',(req,res) => {
res.send(req.name) ;
}) ;

2.2 app.use Middleware usage

app.use Match all request methods , You can pass in the request handler directly , The representative receives all requests .

app.use((req, res, next) => {
    console.log(req.url);
    next();
});

app.use The first parameter can also pass in the request address , No matter what kind of request , As long as it is the request address, it receives the request .

 app.use('/admin', (req, res, next) => {
    console.log(req.url);
    next();
});

2.3 Middleware applications

  1. Route protection , When the client accesses the page that needs to log in , You can use middleware to determine the user login status first , If the user is not logged in , Block the request , Direct response , Prohibit users from entering the page that needs to log in .

  2. Website maintenance notice , Define the middleware that receives all requests at the top of all routes , Respond directly to the client , The website is under maintenance .

  3. Customize 404 page

//  introduce express frame 
const express = require('express');

//  Create a web server 
const app = express();

// app.use((req, res, next) => {
//     res.send(' Website maintenance ');
// })
app.use('/admin', (req, res, next) => {
    let isLogin = false;
    if (isLogin) {
        next();
    } else {
        res.send(' Please log in ');
    }
});
app.get('/admin', (req, res) => {
    res.send(' You have logged in ');
});
app.use((req, res, next) => {
    //  Respond for the client 404 Status code and prompt information 
    res.status(404).send(' The page you visited does not exist ');
});

//  Listening port 
app.listen(3000);
console.log(' Website server started successfully ');

2.4 Error handling middleware

In the process of program execution , Inevitably, there will be some mistakes that can't be prepared , For example, file read failure , Database connection failed . Error handling middleware is a place where errors are handled centrally . Can only handle synchronization code errors

app.use((err, req, res, next) => {
     res.status(500).send(' An unknown error has occurred on the server ');
 })

When a program goes wrong , call next() Method , And the error message is passed to next() Method , The error handling middleware can be triggered .

 app.get("/", (req, res, next) => {
     // Read a nonexistent file 
     fs.readFile("/file-does-not-exist", (err, data) => {
         if (err) {
            next(err);
         }
     });
});

 

//  introduce express frame 
const express = require('express');
const fs = require('fs');
//  Create a web server 
const app = express();

app.get('/index', (req, res, next) => {
    // throw  Throw out 
    // Error() Error object 
    // throw new Error(' The program has a location error ');
    fs.readFile('./01.js', (err, result) => {
        if (err != null) {
            next(err);
        } else {
            res.send(result);
        }
    });
});
//  Error handling middleware 
app.use((err, req, res, next) => {
    res.status(500).send(err.message);
})

//  Listening port 
app.listen(3000);
console.log(' Website server started successfully ');

 

2.5 Capture the error

stay node.js in , asynchronous API The error messages are obtained through the callback function , Support Promise Yes The asynchrony of the elephant API Mistakes can be made by catch Methods to capture .

If an error occurs in asynchronous function execution, how to catch the error ? try catch You can catch errors that occur during the execution of asynchronous functions and other synchronous code , But no other type of API What happened .

//  introduce express frame 
const express = require('express');
const fs = require('fs');
const promisify = require('util').promisify;
const readFile = promisify(fs.readFile);
//  Create a web server 
const app = express();

app.get('/index', async (req, res, next) => {
    try {
        await readFile('./aa.js');

    } catch (err) {
        next(err);
    }
});
//  Error handling middleware 
app.use((err, req, res, next) => {
    res.status(500).send(err.message);
})

//  Listening port 
app.listen(3000);
console.log(' Website server started successfully ');

3.Express Request processing

3.1 Building modular routing

//  introduce express frame 
const express = require('express');
//  Create routing objects 
const home = express.Router();
//  Create a server 
const app = express();
//  Match the route to the request path 
app.use('/home', home);
//  Create a secondary route 
home.get('/index', (req, res) => {
    // localhost:3000/home/index   visit 
    res.send(' Welcome to the home page of the blog ');
})

//  Listening port 
app.listen(3000);
console.log(' Server started successfully ');

3.2 GET Parameter acquisition

Express Use... In the framework req.query Can get GET Parameters , Inside the framework will be GET Parameters are converted to objects and return .

//  Receive the parameters after the question mark in the address bar 
 //  for example : http://localhost:3000/?name=zhangsan&age=30
 app.get('/', (req, res) => {
    console.log(req.query); // {"name": "zhangsan", "age": "30"}
 });

3.3POST Parameter acquisition

Express In the receiving post Request parameters need to use third-party packages body-parser.

//  introduce body-parser modular 
 const bodyParser = require('body-parser');
 //  To configure body-parser modular 
// When extended Parameter values for false when , Methods use querystring This system module processes the parameter format 
// When the parameter is true Use a name called qs The third-party module processes the request parameters ,qs Module can also convert request parameter format to object type ,
And it's more functional than querystring Powerful , But for now querystring To meet the needs , So the parameter is set to false app.use(bodyParser.urlencoded({ extended: false })); // Receiving request app.post('/add', (req, res) => { // Receive request parameters console.log(req.body); })

3.4express Routing parameters

//  introduce express frame 
const express = require('express');
//  Create a web server 
const app = express();
// http://localhost:3000/index/123/zhangsan/20
app.get('/index/:id/:name/:age', (req, res) => {
    res.send(req.params); //{"id":"123","name":"zhangsan","age":"20"}
})

//  Listening port 
app.listen(3000);
console.log(' Server started successfully ');

3.5 Processing of static resources

adopt express Built in express.satic You can easily host static files . for example img,css,Javascript Documents, etc. .

app.use (express. static('public'));

Now? ,public The files under the directory can be accessed .

4.express-art-template template engine

template engine

  • In order to make art-template Template engine can be better and Express Frame fit , Template engine official in the original art-template template engine On the basis of encapsulation express- art-template.

  • Use npm install art-template express-art-template Command to install .

//  introduce express frame 
const express = require('express');
const path = require('path');
//  Create a web server  
const app = express();
// 1. tell  express  What template engine does the framework use to render template files with what suffix 
// 1 Template suffix 
// 2 The template engine used 
app.engine('art', require('express-art-template'));
// 2. tell express What is the location of the frame template 
//  Pay attention to the first views It's a fixed parameter   yes express Configuration item name of the framework   tell express The storage location of the frame template 
//  the second views It's the folder name 
app.set('views', path.join(__dirname, 'views'));
// 3. tell express What is the default suffix for framework templates 
app.set('view engine', 'art');

app.get('/index', (req, res) => {
    //1. Splicing template path 
    //2. Splice template suffix 
    //3. Which template and which data are spliced 
    //4. The splicing result is responded to the client 
    res.render('index', {
        msg: 'message'
    });

});
app.get('/list', (req, res) => {
    res.render('list', {
        msg: 'list page'
    });
});

//  Listening port 
app.listen(3000);

app.locals object

Set the variable to app.locals Under the object , This data is available in all templates .

app.locals.users = [{
     name: ' Zhang San ',
     age: 20
 },{
     name: ' Li Si ',
     age: 20
}]

 

版权声明
本文为[Stars, sea]所创,转载请带上原文链接,感谢