1.环境搭建（如果你的node版本号小于v7.6.0,请自行升级）
npm i koa --save
2.简单使用
const Koa = require('koa');
// 导入
const app = new Koa();
// 创建实例
app.use(async ctx => {
ctx.body = 'Hello World';
});
// 中间件
app.listen(3000);
//监听端口
3.koa路由
npm install --save koa-router
//引入 koa模块
var Koa=require('koa');
var router = require('koa-router')();
//实例化
var app=new Koa();
router.get('/',async (ctx)=>{
ctx.body="首页";
})
app.use(router.routes()); /*启动路由*/
app.use(router.allowedMethods());
/*
* router.allowedMethods()作用： 这是官方文档的推荐用法,我们可以
* 看到 router.allowedMethods()用在了路由匹配 router.routes()之后,所以在当所有
* 路由中间件最后调用.此时根据 ctx.status 设置 response 响应头
*
*/
app.listen(3000);
动态路由
//请求方式 http://域名/product/123/456
router.get('/product/:aid/:cid',async (ctx)=>{
console.log(ctx.params); //{ aid: '123', cid: 456 } //获取动态路由的数据
ctx.body='这是商品页面';
});
get请求获取参数
/*在 koa2 中 GET 传值通过 request 接收，但是接收的方法有两种：query 和 querystring。
query：返回的是格式化好的参数对象。
querystring：返回的是请求字符串。*/
//获取get传值
//http://localhost:3000/newscontent?aid=123
router.get('/newscontent',async (ctx)=>{
//从ctx中读取get传值
console.log(ctx.query); //{ aid: '123' } 获取的是对象 用的最多的方式 **推荐
console.log(ctx.querystring); //aid=123&name=zhangsan 获取的是一个字符串
console.log(ctx.url); //获取url地址
//ctx里面的request里面获取get传值
console.log(ctx.request.url);
console.log(ctx.request.query); //{ aid: '123', name: 'zhangsan' } 对象
console.log(ctx.request.querystring); //aid=123&name=zhangsan
})
post请求获取参数(使用原生比较繁琐)
//使用原生方式
const Koa = require('koa')
const app = new Koa()
app.use( async (ctx) => {
let data = await parseData(ctx)
ctx.body = data
})
app.listen(3000, () => {
console.log('start ok')
})
function parseData(ctx) {
return new Promise((resolve, reject) => {
try {
let str = ''
ctx.req.on('data', (data) => {
str += data
})
ctx.req.addListener('end', () => {
resolve(parseUrl(str))
})
} catch (err) {
reject(err)
}
});
}
function parseUrl(url) {
let obj = {}
let arr = url.split('&')
arr.forEach((e, i) => {
let temparr = e.split('=')
obj[temparr[0]] = temparr[1]
});
return obj
}
使用中间件：koa-bodyparser，来获取post请求的参数
首先先得安装好中间件
npm install koa-bodyparser --save
安装好后，就试一试吧：
-----------------------------------------------
const Koa = require('koa')
const bodyParser = require('koa-bodyparser')
const app = new Koa()
app.use(bodyParser())
app.use( async (ctx) => {
ctx.body = ctx.request.body
})
app.listen(3000, () => {
console.log('start ok')
})
------------------------------------------------
再于原生方式作对比，是不是很简单呢，直接一个，request.body就可以获取到post请求的参数了。
koa种使用cookie
-
ctx.cookies.get(name,[optins]):读取上下文请求中的cookie。
-
ctx.cookies.set(name,value,[options])：在上下文中写入cookie。
const Koa = require('koa'); const app = new Koa();
app.use(async(ctx)=>{ if(ctx.url=== '/index'){ ctx.cookies.set( 'MyName','JSPang' ); ctx.body = 'cookie is ok'; }else{ ctx.body = 'hello world' } });
app.listen(3000,()=>{ console.log('[demo] server is starting at port 3000'); })
Cookie选项
比如我们要存储用户名，保留用户登录状态时，你可以选择7天内不用登录，也可以选择30天内不用登录。这就需要在写入是配置一些选项：
-
domain：写入cookie所在的域名
-
path：写入cookie所在的路径
-
maxAge：Cookie最大有效时长
-
expires：cookie失效时间
-
httpOnly:是否只用http请求中获得
-
overwirte：是否允许重写
const Koa = require('koa'); const app = new Koa();
app.use(async(ctx)=>{ if(ctx.url=== '/index'){ ctx.cookies.set( 'MyName','JSPang',{ domain:'127.0.0.1', // 写cookie所在的域名 path:'/index', // 写cookie所在的路径 maxAge:10006060*24, // cookie有效时长 expires:new Date('2018-12-31'), // cookie失效时间 httpOnly:false, // 是否只用于http请求中获取 overwrite:false // 是否允许重写 } ); ctx.body = 'cookie is ok'; }else{ ctx.body = 'hello world' } });
app.listen(3000,()=>{ console.log('[demo] server is starting at port 3000'); })
读取Cookie：
上边讲了写入Cookie的具体操作，我们现在试着去读取Cookie。
const Koa = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
if(ctx.url=== '/index'){
ctx.cookies.set(
'MyName','JSPang',{
domain:'127.0.0.1', // 写cookie所在的域名
path:'/index', // 写cookie所在的路径
maxAge:1000*60*60*24, // cookie有效时长
expires:new Date('2018-12-31'), // cookie失效时间
httpOnly:false, // 是否只用于http请求中获取
overwrite:false // 是否允许重写
}
);
ctx.body = 'cookie is ok';
}else{
if( ctx.cookies.get('MyName')){
ctx.body = ctx.cookies.get('MyName');
}else{
ctx.body = 'Cookie is none';
}
}
});
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
})
3.中间件
中间件就是匹配路由之前或者匹配路由完成后所做的一系列操作。
const koa = require('koa')
const koa_router = require('koa-router')
const app = new koa()
const router = new koa_router()
app.use(async (ctx, next)=>{ // 必须加next才会继续往下执行
console.log('1');
await next()
console.log('5')
})
app.use(async (ctx, next)=>{
console.log('2');
await next()
console.log('4')
})
router.get('/', async (ctx)=>{
ctx.body = "home";
console.log('3');
})
app
.use(router.routes())
.use(router.allowedMethods())
app.listen(3002)
// 12345
这段demo在访问"/"页面的最终打印结果是"12345"，这就是洋葱模型。
中间件其实是分很多类型的，比如应用级中间件，路由级中间件，错误响应的中间件，又或者是第三方中间件。
const koa = require('koa')
const koa_router = require('koa-router')
const app = new koa()
const router = new koa_router()
//app.use(async (ctx, next)=>{
// 应用级中间件
// ctx.body = "123"
// await next()
//})
router.get('/', async (ctx, next)=>{
ctx.body = "home"
await next()
}).get('/news/:aid', async (ctx)=>{
// console.log(ctx.query)
// console.log(ctx.request.query);
// console.log(ctx.url);
ctx.body = ctx.params
}).get('/',async (ctx)=>{
console.log('home');
}) app.use(async (ctx, next)=>{
console.log(new Date());
await next()
if (ctx.status === 404){
ctx.body = 'this is 404 error'
}else{
console.log('this is the last message if no wrong happened');
}
})
app.use(router.routes()).use(router.allowedMethods())
app.listen(3000)
- 应用级中间件较为好理解，上面demo中注释掉的部分即为应用级中间件，我们访问任何路由都会显示应用级中间件中的内容。
- 路由级中间件即为重复写的"/"的页面，如果没有对第一个"/"添加next方法，我们是得不到控制台中"home"的输出的，因为在走完第一个"/"后，程序已经结束了。
- 错误响应的中间件即为"if"那一段内容，如果有访问到页面，则会在最后走"else"的内容。
- 第三方的中间件，典型的就行"router"。
koa-static静态资源中间件
安装koa-static： 使用npm进行安装中间件
npm install --save koa-static
新建static文件夹 然后在static文件中放入图片，css和js文件。
使用koa-static中间件 我们新建一个demo12.js文件，引入koa-static中间件，并用app.use方法进行使用。
const Koa = require('koa')
const path = require('path')
const static = require('koa-static')
const app = new Koa()
const staticPath = './static'
app.use(static(
path.join( __dirname, staticPath)
))
app.use( async ( ctx ) => {
ctx.body = 'hello world'
})
app.listen(3000, () => {
console.log('[demo] static-use-middleware is starting at port 3000')
})
