使用Koa2进行Web开发静态文件与路由

Posted 2023-02-17 水上由岐

静态文件处理

这里选择koa-static作为处理静态文件的中间件

const Koa = require('koa');
const app = new Koa();
const  serve = require("koa-static");
app.use(serve(__dirname+ "/static/html", extensions: ['html']));
app.listen(3000);

static模块的使用也比较简单，规划好静态文件存放的路径，使用app.use挂载在应用上即可。
上面的代码中，__dirname+ “/static/html” 表示静态文件存放的路径，当接收到请求后，会在该路径下进行查找，serve还可以接收一个对象，表示查找文件的后缀名。

路由处理

在express中，路由处理的中间件是绑定在内部的，因此可以使用如下的代码

app.get(“/”,function(req,res)
    //TODO
)

在KOA中，由于移除了不必要的中间件，路由的处理同样要借助第三方模块来实现，这里使用koa-router
和express中注册路由的写法相同，router对象分别使用get和post方法来处理get和post请求。

下面是一个使用koa-router的例子

var Koa = require('koa');
var bodyParser = require('koa-bodyparser');
const router = require('koa-router')();
var app = new Koa();
app.use(bodyParser());
app.use(router.routes());
router.get('/', async (ctx, next) => 
    ctx.response.body = 
       '<h1>Index</h1> <form action="/login" method="post"> ' 
        +
        '<p>Name: <input name="name"></p>' 
        +
        ' <p>Password: <input name="password" type="password"></p> ' 
        +
        '<p><input type="submit" value="Submit"></p>' 
        +
        ' </form>';
);

router.post('/login', async (ctx, next) => 
    let
        name = ctx.request.body.name || '',
        password = ctx.request.body.password || '';

    console.log(ctx.request);
    if (name === 'koa' && password === '12345') 
        ctx.body = "Success"
     else 
        ctx.body = "Login error"

    
);

上面的代码中，我们定义了两个路由,接收到get请求后向前端渲染一个form表单用于登陆，当用户点击submit提交后，router接收到post请求后使用ctx.request.body
对象来解析表单中的字段，但实际上将post的请求打印出来
console.log(ctx.request);
会发现resquest对象并没有body这一字段，思考post请求的原理即可明白，由于表单提交可能划分为多个包进行传输，因此放在request对象中显然是不合理的，程序可以使用ctx.request.body来解析表单字段，是因为使用了koa-bodyparser这一模块的原因，至于该模块内部是如何实现的，读者可以自行参阅源码

method: ‘POST’,
url: ‘/login’,
host:
‘localhost:3000’,
connection: ‘keep-alive’,
‘content-length’: ‘29’,
‘cache-control’: ‘max-age=0’,
origin: ‘http://localhost:3000‘,
‘upgrade-insecure-requests’: ‘1’,
‘user-agent’: ‘Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133
Safari/537.36’,
‘content-type’: ‘application/x-www-form-urlencoded’,
accept: ‘text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8’,
referer: ‘http://localhost:3000/login‘,
‘accept-encoding’: ‘gzip, deflate, br’,
‘accept-language’: ‘zh-CN,zh;q=0.8,en;q=0.6,ja;q=0.4’,
cookie: ‘_ga=GA1.1.910420953.1491570843’

因为router也是中间件，因此要使用app.use()来挂在app对象中，值得注意的是，bodypaser要在router之前加载才能生效。

koa-router同样支持定义定义多种形式的路由，下面是官网的例子

router.get('/:category/:title', function (ctx, next) 
  console.log(ctx.params);
  // =>  category: 'programming', title: 'how-to-node' 
);
router.get(/^\\/(.*)(?:\\/|$)/, ...);
 // match all path, e.g., /hello, /hello/world
router.get(/^\\/app(?:\\/|$)/, ...); 
// match all path that start with "/app", e.g., /app/hello, /app/hello/world

在上面的代码中:category和:title实际上起到了get参数的作用，这种restful风格的地址传递相比使用？category=.. &title=的形式更加简洁，要获取这种形式的参数，可以使用ctx.params对象。

router.get("/delete/blog/:blogId",async(ctx,next)=>
    await  dbAPI.deleteBlogId(ctx.params.blogId);
    await next()
)