【Koa2】get、post 以及静态资源中间件

最新推荐文章于 2023-01-18 13:18:36 发布

Milk595

最新推荐文章于 2023-01-18 13:18:36 发布

阅读量388

点赞数

分类专栏： Koa 文章标签：中间件 node.js 前端

本文链接：https://blog.csdn.net/weixin_43352901/article/details/108189855

版权

Koa 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

get、post

Koa 路由get 传值

在koa2 中GET传值通过request接收，但是接收的方法有两种：query 和querystring。

query：返回的是格式化好的参数对象。
querystring：返回的是请求字符串。

参看获取get请求参数的代码：

/* app.js */
const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();

router.get('/',(ctx,next) => {
    ctx.body = 'Hello koa';
})
router.get('/newscontent',(ctx,next) => {
    let url = ctx.url;
    // 从request中获取GET请求
    let request = ctx.request;
    let req_query = request.query;
    let req_querystring = request.querystring;
    // 从上下文中直接获取
    let ctx_query = ctx.query;
    let ctx_querystring = ctx.querystring;
    ctx.body = {
        url,
        req_query,
        req_querystring,
        ctx_query,
        ctx_querystring
    }
})

Koa动态路由

router.get('/product/:aid', async(ctx) => {
    console.log(ctx.params); // {aid: '123'} // 获取动态路由的数据
    ctx.body = '这是商品页面';
});

Koa 路由获取post提交的数据

通过get请求：http://localhost:3000/user，打开登陆页面
在这里插入图片描述
登陆验证发送请求并提交数据：http://localhost:3000/user/login

router.post(‘/uri’)用于配置POST路由，通过koa-bodyparser中间件，用来解析POST请求通过表单提交的数据，让我们很方便的获取解析的POST数据

原生获取post:

function parsePostData(ctx) {
    return new Promise((resolve, reject) => {
        try{
            let postdata = "";
            ctx.req.on('data',(data) => {
                postdata += data;
        })
            ctx.req.on("end", function() {
                resolve(postdata);
        })
        }catch(error) [
            reject(error);
        }
    })
}

koa-bodyparser中间件使用：

代码示例

var koa = require('koa');
var bodyParser = require('koa-bodyparser');

var app = new Koa();
app.use(bodyParser()); // 加载中间件

app.use(async ctx => {
    ctx.body = ctx.request.body;
})

/* 表单页面，提交地址为/user/login */
router.get('/user', async(ctx,next) => {
    ctx.body = `
        <form action="/user/login" method="post">
            <input name="name" type="text" placeholder="请输入用户名:joyitsai">
            <br/>
            <input name="password" type="password" placehodler="请输入密码: 123456">
            <br/>
            <button>GoGo</button>
            </form>
    `
});

/* router.post() 配置post路由 */
router.post('/user/login',async(ctx,next) => {
    /* ctx.request.body为解析post数据对象 
       {name:'joyitsai', password:'123456'}
    */
    let {name, password} = ctx.request.body;
    if(name == 'joyitsai' && password == '123456') {
        ctx.body = `Hello ${name}`;
    }else{
        ctx.body = '账号信息错误'
    }
})

Koa静态资源中间件

1.静态资源和动态资源的概念

静态资源：一般客户端发送请求到web服务器，web服务器从内存在取到相应的文件，返回给客户端，客户端解析并渲染显示出来。
动态资源：一般客户端请求的动态资源，先将请求交于web容器，web容器连接数据库，数据库处理数据之后，将内容交给web服务器，web服务器返回给客户端解析渲染处理。

2.静态资源和动态资源的区别

a.静态资源一般都是设计好的html页面，而动态资源依靠设计好的程序来实现按照需求的动态响应；
b.静态资源的交互性差，动态资源可以根据需求自由实现；
c.在服务器的运行状态不同，静态资源不需要与数据库参于程序处理，动态可能需要多个数据库的参与运算。

项目开发时，一般都需要在模版里引用静态资源。

创建完express、koa等项目时，会自动创建 www/public 目录，该目录下专门用来存放 JS、CSS、图片等静态资源。

app.use(require('koa-static')(__dirname + '/public'))

只有指定的静态目录中的静态资源可以访问
在这里插入图片描述

3.在模板中使用静态资源

<!DOCTYPE html>
<html>
    <head>
        <title><%= title %></title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>
    <body>
        <h1><%= title %></h1>
        <p>EJS Welcome to <%= title %></p>
    </body>
</html>

Milk595

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Koa2】get、post 以及静态资源中间件

get、postKoa 路由get 传值在koa2 中GET传值通过request接收，但是接收的方法有两种：query 和querystring。query：返回的是格式化好的参数对象。querystring：返回的是请求字符串。参看获取get请求参数的代码：/* app.js */const Koa = require('koa');const Router = require('koa-router');const app = new Koa();const router =
复制链接

扫一扫