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

来源:互联网 发布:淘宝怎么提高销量2016 编辑:程序博客网 时间:2024/06/07 05:18

静态文件处理

这里选择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/worldrouter.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()})
0 0