Five road koa learning

Previous article, we introduce a bit koa used ejs template and page rendering, this article we look at the data and submit koa post koa-bodyparser middleware.

In the front page, you will inevitably use the form post request form and submit the data to the back end, let's look at how koa is to get to the front post by request pass over the data.

We then went on to write the contents of one of our projects, we first look at how native NodeJs post is to obtain the requested data, let's write some form in index.ejs in the form:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="/add" method="post">
    用户名: <input type="text" name="username"/>
    <br/>
    <br/>
    密　码: <input type="password" name="password"/>
    <br/>
    <br/>
    <button type="submit">提交</button>
</form>
</body>
</html>

We form the post request form the username and password to the rear end of the two data, the effect of the following page:

Next we look at app.js

// introduced koa module 
const = Koa the require ( 'koa' ); 
const Router = the require ( 'koa-Router' ); 
const views = the require ( 'koa-views' ); 

// instantiate 
const App = new new Koa () ; 
const Router = new new Router (); 

// configuration template engine middleware 
app.use (views ( 'views' , { 
    Extension: 'EJS' 
})); 

router.get ( '/', the async (CTX) => { 
    the await ctx.render ( 'index' , {}); 
}); 

router.post ( '/ the Add', the async (CTX) => {
    getData = function () {
        return new Promise(function (resolve, reject) {
            try {
                let str = '';
                ctx.req.on('data', function (chunk) {
                    str += chunk;
                });
                ctx.req.on('end', function (chunk) {
                    resolve(str)
                })
            } catch (err) {
                reject(err)
            }
        })
    };
    let data = await getData();
    ctx.body = data;
});

//启动路由
app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

In the original content, we have added a router.post ( "/ add",) route, which "/ add" and index.ejs in the form of action consistent form, we will get through asynchronous data by the str + data to a mosaic, an error message is returned if the acquired data errors, and finally return information to the page.

Now we start the project, in the input page index.ejs enter admin and 123456 respectively, and then click the button button, results are as follows:

From the above results display page that we have successfully completed to receive post data and splicing returned to the front page.

The above node natively still looks very troublesome, let's look at the koa-bodyparser post data acquisition module.

You must first download the package:

npm install koa-bodyparser --save

Then we will app.js read as follows:

// introduced koa module 
const = Koa the require ( 'koa' ); 
const Router = the require ( 'koa-Router' ); 
const views = the require ( 'koa-views' ); 
const bodyParser = the require ( 'koa-bodyparser' ) ; 

// instantiate 
const App = new new Koa (); 
const Router = new new Router (); 

// configuration template engine middleware 
app.use (views ( 'views' , { 
    Extension: 'EJS' 
})); 

// koa-bodyparser disposed intermediate 
app.use (bodyParser ()); 

router.get ( '/', the async (CTX) => { 
    the await ctx.render ('index', {});
});

router.post('/add', async (ctx) => {
    let data = ctx.request.body;
    ctx.body = data;
});

//启动路由
app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

We first introduced in the head koa-bodyparser module, and then add app.use (bodyParser ()) middleware, then you can to get our data through ctx.request.body.

Now we start the project, in the input page index.ejs enter admin and 654321 respectively, and then click the button button, results are as follows:

Page output from the above results we can see that we not only get to the post of the requested data, and data is also automatically turned into json format data.

Content from: https://www.cnblogs.com/weijiutao/p/10696161.html

Five road koa learning

Guess you like