手把手教你使用koa2

简介

koa是由express的原班人马打造的web框架。但是相对于express，koa的性能要更高，因为koa通过使用aysnc函数，帮你丢弃回调函数，并有力的增强了错误处理。而且koa没有绑定任何中间件，二十提供了一套优雅的方法，帮助你快死而愉快地编写服务端应用程序。

与express的区别

**koa与express对比图**
框架	推荐版本	是否自带中间件	js语法	特性
express	4.x	是	es5	回调嵌套
koa2	2.x	否	es7	async/await+Promise

安装

koa依赖的node>v7.6.0

npm i koa -D

要在 node < 7.6 版本的 Koa 中使用 async 方法, 我们推荐使用 babel's require hook.

创建hello world应用程序,在文件中创建server.js,文件内的代码如下

const Koa = require('koa');

const app = new Koa();

app.use(async ctx => {

  ctx.body = 'Hello World';

});

app.listen(3000);

在终端中启动

node server.js

服务启动之后,在浏览器中输入localhost:3000,就会看到页面显示的是hello world的字样

路由

因为koa本身是不带任何中间件的,所以使用路由的话,我们需要安装koa的路由才行

npm i koa-router -D

使用

const Koa=require('koa');

const Router=require('koa-router');

let app=new Koa();

server.listen(8080);

let router=new Router();

router.get('/news', async (ctx, next)=>{

  ctx.body='hello world';

  await next();

});

app.use(router.routes());

启动服务后在浏览器地址栏打开:localhost:3000/news

请求方式

既然是服务端语言,做项目的时候,前后端通信肯定是少不了请求方式处理的

get请求

const koa = require('koa');

const Router = require('koa-router');

let server = new koa();

server.listen(2000, () => {

    console.log('port 2000 is running');

})

// 创建路由

let router = new Router();

// koa里面习惯于用async await ,有next方法,但是非常的少用

router.get('/a', async ctx => {

    //相当于 express的send

    ctx.body = 'aaa';

    console.log(ctx.body)

})

// 最后需要把路由添加到服务器上

server.use(router.routes())

post请求

post请求的话,需要使用到 koa-better-body模块

安装

npm i koa-better-body

我们这里使用文件上传作为例子,在文件目录下新建一个static文件夹,并且在static文件夹里面建一个upload文件夹

const koa=require('koa');

const body=require('koa-better-body');

const app=new koa();

app.listen(3000,()=>{

    console.log('server is running...');

})

app.use(body({

    uploadDir:'./static/upload'

}))

app.use(async ctx=>{

   //文件和post数据

  console.log(ctx.request.fields);

    ctx.body='数据提交成功啦'

})

html文件中的表单使用的post请求

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <form action="http://localhost:3000/upload" method="post" enctype="multipart/form-data">

    <div>

        用户名:<input type="text" name="username">

    </div>

    <div>

        密码:<input type="password" name="password">

    </div>

    <div>

        文件:<input type="file" name="file">

    </div>

    <div>

        <input type="submit" value="提交">

    </div>

    </form>

</body>

</html>

注意点:1 . 因为这边是文件上传,所以用到的是post请求,entype一定要写成multipart/form-data

　　　 2. 上传完成后在upload文件夹里面能看到你刚刚上传的文件,后缀名可能是不一定是你上传的文件的后缀名,这不是上传失败,这是正常的后缀名是给人看的,不是给机器看的

传递参数

koa传参有两种方式 urlencodeded 和 params两种方式

query	params
顺序灵活	顺序写死
可以省略	不能省略,否则会报not found
不利于SEO	利于SEO
http://aaa.com/user?a=12&b=5	http://aaa.com/user/12/5

params 的实现方式 (http://localhost:3000/news/736273725)

const koa=require('koa');

const Router=require('koa-router');

const app=new koa();

const router=new Router();

app.listen(3000);

router.get('/news/:id',async (ctx,next)=>{

    let {id}=ctx.params

    ctx.body=id;

})

app.use(router.routes())

query传参(http://localhost:3000/users?username=Cynthia&address=%E5%B9%BF%E5%B7%9E)

const koa=require('koa');

const Router=require('koa-router');

const app=new koa();

const router=new Router();

app.listen(3000);

router.get('/news/:id',async (ctx,next)=>{

    let {id}=ctx.params

    ctx.body=id;

    next()

})

router.get('/users/',async ctx=>{

let {username,address}=ctx.query;

ctx.body=`${username}你好,你的地址是${address}`

})

app.use(router.routes());

上下文Context

Koa Context 将 node 的 request 和 response 对象封装到单个对象中，为编写 Web 应用程序和 API 提供了许多有用的方法。这些操作在 HTTP 服务器开发中频繁使用，它们被添加到此级别而不是更高级别的框架，这将强制中间件重新实现此通用功能。

app.context相当于是ctx的原型(prototype).

常用:在使用数据库的时候,可以把数据库的对象添加到app.context上

const koa=require('koa');

const Router=require('koa-router');

const app=new koa();

// 添加数据库到全局

app.context.db=require('./libs/database');

// 因为所有的请求都会走这一步,所以在这边添加错误处理能提高性能

app.use(async (ctx, next)=>{

    try{

      await next();

    }catch(e){

      ctx.body='错了';

    }

  });

  const router=new Router();

  router.get('/a',async ctx=>{

    //  ctx.db.query(`SELECT * FROM user_table`,(err,data)=>{

    //     if(err) return  err;

    //     console.log(data);

    //  })

    //  console.log(query)

    console.log(ctx.db);

    ctx.body='weqwe'

})

// 所有路由都会经过这里,所以在这边进行错误处理

router.all('',async ctx=>{

    try{

        await next();

    }catch(e){

        ctx.body='没有该路由'

    }

})

app.use(router.routes());

app.listen(3000);

处理cookie

处理cookie的话,koa里面已经封装好了,所以不需要我们引入中间件

const koa=require('koa');

const app=new koa();

app.listen(3000);

// cookie是koa框架自带的

app.keys=[

'32312312312',

'fffkorieihrhewr289423',

'd3243wqdwewe2342323e',

'iweuweubnbejwb09039123',

'32323dssdsadsjadks2312'

]

app.use(async ctx=>{

// 设置cookie

// ctx.cookies.set('user','yue',{signed:true});

console.log(ctx.cookies.get('user',{signed:true}))

})

管理静态资源

前面已经说到过koa不带任何中间件,所以要管理静态资源的话,需要安装koa-static

const koa=require('koa');

const Router=require('koa-router');

const static=require('koa-static');

const app=new koa();

let router=new Router();

router.get('/user',async ctx=>{

    ctx.body='用户'

})

app.use(router.routes());

app.listen(3000,()=>{

    console.log('server is running....')

})

app.use(static('./static',{

    maxAge:86400*1000,// 设置缓存时间

    index:'1.html'// 根目录的时候打开这个文件

}))

在项目中,因为不同的文件,我们需要设置缓存的时间不一样,我们可以进行下面的操作

const Koa = require('koa');

const Router = require('koa-router');

const static = require('koa-static');

const app = new Koa();

app.listen(3000);

let router = new Router();

router.get('/user', async ctx => {

    ctx = '用户'

})

app.use(router.routes());

let staticRouter = new Router();

staticRouter.all(/(\.jpg|\.png|\.gif)$/i, static('./static', {

    maxAge: 60 * 86400 * 1000

}));

staticRouter.all(/(\.css)$/i, static('./static', {

    maxage: 1 * 86400 * 1000

}));

staticRouter.all(/(\.html|\.htm|\.shtml)$/i, static('./static', {

    maxage: 20 * 86400 * 1000

}));

staticRouter.all('', static('./static', {

    maxage: 30 * 86400 * 1000

}));

app.use(staticRouter.routes());

session

安装koa-seesion

const koa=require('koa');

const session=require('koa-session');

const app=new koa();

app.listen(3000,()=>{

    console.log('port is running...')

})

app.keys=[

    'eehuehuwehwue',

    'eweyweywewyqeuw',

    'dhsjdhasdasjd',

    'sdsadasdsa'

]

app.use(session({

    maxAge:60*20*1000,// 有效期

    renew:true // 自动续期

},app))

app.use(async ctx=>{

 if(!ctx.session['view']){

    ctx.session['view']=1;

 }

 ctx.session['view']++

 ctx.body=`欢迎你第${ctx.session.view}次来访`

})