Koa2.x学习
开发思路和 express 差不多,最大的特点就是可以避免异步嵌套
学习网站：http://www.itying.com/koa
安装框架
cnpm install koa --save
简单使用
//1.引入 Koa
const koa = require('koa')
const app = new koa()
//2.配置中间件 (可以先当做路由)
app.use(async (ctx)=>{
ctx.body = 'hello koa2'
})
//3.监听端口
app.listen(3000)
Koa 路由、get传值、动态路由
- koa 路由
- koa 路由 get 传值
- koa 动态路由
Koa 路由
路由：根据不同的 URL 地址，加载不同的页面，实现不同的功能
Koa 中的路由和 Express 有所不同，在 Express 中直接引入 Express 就可以配置路由
Koa 中我门需要安装对应的 koa-router 路由模块来实现
cnpm install --save koa-router
// 引入 koa 模块
const Koa = require('koa')
// 引入 koa 路由
const Router = require('koa-router')
// 引入并实例化路由
const router = require('koa-router')()
// 实例化 koa
const app = new Koa()
const router = new Router()
// 配置路由 ctx --> context (上下文) 包含了 require 和 response 等信息
router.get('/', async (ctx)=>{
ctx.body = '首页' //返回数据 res.send()
}).get('/news', async (ctx)=>{
ctx.body = '新闻页'
})
// 启动路由
app.use(router.routes())
app.use(router.allowedMethods())
/**
* router.allowedMethods()用在了路由匹配 router.routes()之后,
* 所以在所有中间件最后调用,此时根据 ctx.status 设置 response 响应头
*/
// 监听端口
app.listen(3000)
get传值
// 获取 get 传值
// http://127.0.0.1:3000/news?id=123
router.get('/newsIten', async (ctx)=>{
// 1.从 ctx 中获取 get 传值
conaole.log(ctx.url) // /news?id=123
console.log(ctx.query) // {id: '123'} 推荐
console.log(ctx.querystring) // id=123
// 2.从 ctx.require 获取
console.log(ctx.require.url) // /news?id=123
console.log(ctx.require.query) // {id: '123'}
console.log(ctx.rewuire.querystring) // id=123
})
动态路由
// 动态传值
// /news/:aid/cid -> 传两个值
router.get('/news/:aid',(ctx)=>{
// http://12
// 获取传值
console.log(ctx.params) // {aid:'123'}
})
koa 中间件
- 什么是 Koa 的中间件
- Koa 应用可使用如下几种中间件
- Koa 中间件的执行顺序
什么是 Koa 的中间件
通俗的讲：中间件就是匹配路由之前或者匹配路由完成做的一系列操作，我们就可以把它叫做中间件
中间件的功能包括：
- 执行任何代码
- 修改请求和响应对象
- 终结请求 - 响应循环
- 调用堆栈中的下一个中间件
Koa 应用可使用如下几种中间件
- 应用级中间件
- 路由级中间件
- 错误处理中间件
- 第三方中间件
应用级中间件
// 匹配任何路由
app.use( async (ctx,next)=>{
console.log("这是一个中间件")
await next() // 继续向下匹配
})
路由级中间件
// 匹配到 news 路由以后继续向下匹配路由
router.get('/news', async (ctx,next)=>{
console.log("这是一个新闻路由中间件")
await next()
})
router.get('/news', async (ctx)=>{
ctx.body = "这是一个新闻页面"
})
错误处理中间件
// www.baidu.com/xxx
app.uses( async (ctx,next)=>{
console.log('这是一个错误处理中间件')
await next() --> 执行完该语句, 寻找对应路由执行
if(ctx.status == 404){
/** 没有找到页面 */
ctx.status = 404
ctx.body = '这是一个404页面'
}else{
console.log(ctx.url)
}
})
Koa ejs 模板引擎
- 安装 koa-views 和 ejs
// 安装 koa-views
cnpm install koa-views --save
// 安装 ejs
cnpm install ejs --save
- 引入 koa-views 配置中间件 ---> 第三方中间件
const views = require('koa-views')
//app.use(views('views',{map:{html:'ejs'}})) --> 后缀名 .html
app.use(views('views',{
// 应用 ejs 模板引擎
extension:'ejs' // --> 后缀名 .ejs
}))
- 渲染模板引擎
router.get('/', async (ctx)=>{
await ctx.render('index',{})
})
// 在 ejs 中引入模块
<%- include("./public/head.ejs") %>
// 在路由的每个 render 里面都要渲染一个公共的数据
// 所有的 ejs 都能用该数据
ctx.state = { // 放在中间件里
session:this.session,
title:'app'
}
app.use( async (ctx,next)=>{
ctx.state.userInfo = "张三"
await next()
})
koa post 提交数据 koa-bodyparser 中间件的使用
- 原生 Nodejs 获取 post 提交数据
- koa 中 koa-body-parser 中间件的使用
原生 Nodejs 获取 post 提交数据
const parsePostData = (ctx)=>{
return new promise((resolve,reject)=>{
try{
let postdata = ''
ctx.req.on('data',(data)=>{
postdata += data
})
ctx.req.on('end',()=>{
resolve(postdata)
})
}.catch(error){
reject(error)
}
})
}
koa 中 koa-body-parser 中间件的使用
安装 koa-bodyparser
cnpm install koa-bodyparser --save
安装 引入配置中间件
const app = require('koa')() const bodyParser = rewuire('koa-bodyparser') // 配置中间件 app.use(bodyParser()) app.use( async ctx=>{ ctx.body = ctx.request.body //{username:"lisi"} })
koa-static 静态资源中间件
安装 koa-static
cnpm install koa-static --save
引入配置中间件
const static = require('koa-static') // 配置中间件 --> 可以配置多个 app.use(static(__dirname + './static')) // 在 static 目录下查找 // http://127.0.0.1:3000/css/base.css // 首先去 static 目录找, 如果能找到返回对应文件,找不到 next()
koa art-template 模板引擎
- 常见模板引擎的性能对比
- 在 Koa 中使用 art-template 模板引擎
- art-template 模板引擎语法
常见模板引擎的性能对比
适用于 koa 的模板引擎选择非常多，比如 jade、ejs、nunjucks、art-template等
art-template 是一个简约、超快的模板引擎
它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 javaScript 极限的运行性能，并且同时支持 nodejs 和浏览器
art-template 智齿 ejs 的语法，也可以用自己的类似 angular 的数据绑定的语法
在 Koa 中使用 art-template 模板引擎
安装
cnpm install art-template --save cnpm install koa-art-template --save
引入、配置
const render = require('koa-art-template') render(app,{ root:path.join(__dirname,'views'), //位置 extname:'.html', //后缀名 debug:process.env.NODE_ENV !== 'production' // 是否开启调试模式 })
使用
app.use(async (ctx)=>{ await ctx.render('user') })
art-template 模板引擎语法
文档：http://aui.github.io/art-template/zh-cn/docs/syntax.html
Koa 中 Cookie 的使用
Cookie 简介
cookie是存储于访问者的计算机中的变量，可以让我们用一个浏览器访问同一个域名的时候共享数据。
具体功能
- 保存用户信息
- 浏览器历史记录
- 猜你喜欢的功能
- 10 天免登陆
- 多个页面之间的数据传到
- 实现购物车的功能
使用Cookie
Koa 中设置 Cookie 的值
ctx.cookies.set(name,value,[options])
- 通过 options 设置 cookie name 的 value
| options 名称 | options 值 |
|---|---|
| maxAge | 一个数字表示从 Date.now() 得到的毫秒数 |
| expires | cookie 过期的Date |
| path | cookie 路径，默认是 '/' |
| domain | cookie域名 |
| secure | 安全 cookie ,默认 false,设置成 true 表示只有 https 可以访问 |
| httpOnly | 是否只是服务器可访问 cookie，默认是true |
| overwrite | 是否覆盖 |
Koa 中获取 Cookie 的值
ctx.cookies.get('name')
ctx.cookies.set('key','value',{
maxAge:1000*60*60
})
// 另外的路由
let userInfo = ctx.cookies.get('key')
// koa 中没法直接设置中文的 cookie
let userinfo = new Buffer("张三").toString('base64')
let user = new Buffer(userinfo,'base64').toString()
Koa Session 的使用
- Session 简单介绍
- Session 的工作流程
- koa-session 的使用
- Cookie 和 Session 区别
Session 简单介绍
session 是另一种记录客户状态的机制，不同的是 Cookie 保存在客户端浏览器中，
而 session 保存在服务器上。session 比 cookie更安全一些
Session 的工作流程
当浏览器访问服务器并发送第一次请求时，服务器端会创建一个session对象，生成一个类似于 key,value 的键值对；然后将 key(cookie) 返回到浏览器（客户）端，浏览器下次再访问时，携带key(cookie)，找到对应的 session （value），客户的信息都保存在 session 中
koa-session 的使用
安装 express-session
npm install koa-session --save
引入 express-session
const session = require('koa-session')
配置 session 中间件
app.keys = ['some secret hurr'] // cookie 的签名 const CONFIG = { key:'koa:sess', // 默认 maxAge:86400000, // 过期时间 overwrite:true, //默认 httpOnly:true, // true 表示只有服务器端可以获取 cookie signed:true, // 默认 rolling:false // 在每次请求时强行设置 cookie,这将重置 cookie 过期时间(默认 false) renew:true } app.use(session(CONFIG,app))
使用
// 一个路由中 设置session ctx.session.userinfo = "张三" // 另一个路由 获取session console.log(ctx.session.userinfo)
END
网友评论