1.安装
npm i koa
2.简单使用
const Koa = require('koa')
const app = new Koa()
app.use( async ( ctx ) => {
ctx.body = 'hello koa2'
})
app.listen(3000)
3.koa的脚手架
npm i -g koa-generator
3.1 创建koa2项目
koa2 xxx(文件名)
image.png
3.2 四种启动方式
image.png1.npm start
该启动命令也是我们创建项目后使用的启动命令。
注意:该命令启动的项目,更改服务端接口后服务不会自启动。
2.npm run dev
该启动命令启动项目后,更改服务端接口后服务会自启动。
npm run dev启动项目后用的是nodemon,是监听。
4.koa2中间件
通俗的讲:中间件就是匹配路由之前或者匹配路由完成做的一系列的操作,我们就可以把它叫做中间件。
在express中间件(Middleware) 是一个函数,它可以访问请求对象(request object (req)), 响应对象(response object (res)), 和 web 应用中处理请求-响应循环流程中的中间件,一般被命名为 next 的变量。在Koa中中间件和express有点类似。
中间件的功能包括:
执行任何代码。
修改请求和响应对象。
终结请求-响应循环。
调用堆栈中的下一个中间件。
如果我的get、post回调函数中,没有next参数,那么就匹配上第一个路由,就不会往下匹配了。如果想往下匹配的话,那么需要写next()
4.1 应用级中间件
const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
app.use(async (ctx,next)=>{
console.log(new Date());
await next();
})
router.get('/', function (ctx, next) {
ctx.body="Hello koa";
})
router.get('/news',(ctx,next)=>{
ctx.body="新闻页面"
});
app.use(router.routes()); //作用:启动路由
app.use(router.allowedMethods()); //作用: 当请求出错时的处理逻辑
app.listen(3000,()=>{
console.log('starting at port 3000');
});
4.2 路由中间件
router.get('/', async(ctx, next)=>{
console.log(1)
next()
})
router.get('/', function (ctx) {
ctx.body="Hello koa";
})
4.3 错误处理中间件
app.use(async (ctx,next)=> {
next();
if(ctx.status==404){
ctx.status = 404;
ctx.body="这是一个404页面"
}
});
4.4 第三方中间件
const static = require('koa-static');
const staticPath = './static';
app.use(static(
path.join( __dirname, staticPath)
))
const bodyParser = require('koa-bodyparser');
app.use(bodyParser());
5.koa路由
路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP 方法(GET、POST 等)组成的,涉及到应用如何响应客户端对某个网站节点的访问。
通俗的讲:路由就是根据不同的URL地址,加载不同的页面实现不同的功能。
Koa中的路由和Express有所不同,在Express中直接引入Express就可以配置路由,但是在Koa中我们需要安装对应的koa-router路由模块来实现。
安装: npm install --save koa-router
const Koa = require('koa');
const router = require('koa-router')(); //注意:引入的方式
const app = new Koa();
router.get('/', function (ctx, next) {
ctx.body="Hello koa";
})
router.get('/news,(ctx,next)=>{
ctx.body="新闻page"
});
app.use(router.routes()); //作用:启动路由
app.use(router.allowedMethods()); // 作用: 这是官方文档的推荐用法,我们可以看到router.allowedMethods()用在了路由匹配router.routes()之后,所以在当所有路由中间件最后调用.此时根据ctx.status设置response响应头
app.listen(3000,()=>{
console.log('starting at port 3000');
});
5.1 GET请求获取数据
在ko2a中,获取GET请求数据源头是koa中request对象中的query方法或querystring方法,query返回是格式化好的参数对象,querystring返回的是请求字符串,由于ctx对request的API有直接引用的方式,所以获取GET请求数据有两个途径。
1.是从上下文中直接获取
请求对象ctx.query,返回如 { a:1, b:2 }
请求字符串 ctx.querystring,返回如 a=1&b=2
2.是从上下文的request对象中获取
请求对象ctx.request.query,返回如 { a:1, b:2 }
请求字符串 ctx.request.querystring,返回如 a=1&b=2
5.2 POST请求获取数据
对于POST请求的处理,koa2没有封装获取参数的方法,需要通过解析上下文context中的原生node.js请求对象req,将POST表单数据解析成query string(例如:a=1&b=2&c=3),再将query string 解析成JSON格式(例如:{"a":"1", "b":"2", "c":"3"})
注意:ctx.request是context经过封装的请求对象,ctx.req是context提供的node.js原生HTTP请求对象,同理ctx.response是context经过封装的响应对象,ctx.res是context提供的node.js原生HTTP请求对象。
5.3 koa-bodyparser模块
安装:npm install --save koa-bodyparser
通过ctx.request.body获取post提交的数据
var Koa = require('koa');
var bodyParser = require('koa-bodyparser');
var app = new Koa();
app.use(bodyParser());
app.use(async ctx => {
ctx.body = ctx.request.body;
});
6.koa-static静态资源中间件
一个http请求访问web服务静态资源,一般响应结果有三种情况
访问文本,例如js,css,png,jpg,gif
访问静态目录
找不到资源,抛出404错误
koa-static主要是用于访问静态资源
安装:npm install --save koa-static
const static = require('koa-static');
app.use(static(
path.join( __dirname, 'public')
))
这个时候静态资源就可以被koa中间件解析了
7.Koa2中 Cookie的使用
-cookie 是存储于访问者的计算机中的变量。可以让我们用同一个浏览器访问同一个域名的时候共享数据。
-HTTP是无状态协议。简单地说,当你浏览了一个页面,然后转到同一个网站的另一个页面,服务器无法认识到这是同一个浏览器在访问同一个网站。每一次的访问,都是没有任何关系的。
-Cookie是一个简单到爆的想法:当访问一个页面的时候,服务器在下行HTTP报文中,命令浏览器存储一个字符串; 浏览器再访问同一个域的时候,将把这个字符串携带到上行HTTP请求中。第一次访问一个服务器,不可能携带cookie。 必须是服务器得到这次请求,在下行响应报头中,携带cookie信息,此后每一次浏览器往这个服务器发出的请求,都会携带这个cookie。
7.1 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 一个布尔值,表示是否覆盖以前设置的同名的 cookie (默认是 false). 如果是 true, 在同一个请求中设置相同名称的所有 Cookie(不管路径或域)是否在设置此Cookie 时从 Set-Cookie 标头中过滤掉。
7.2 Koa中获取Cookie的值
ctx.cookies.get('name');
7.3 Koa中设置中文Cookie
console.log(new Buffer('hello, world!').toString('base64'));// 转换成base64字符串:aGVsbG8sIHdvcmxkIQ==
console.log(new Buffer('aGVsbG8sIHdvcmxkIQ==', 'base64').toString());// 还原base64字符串:hello, world!
8.Koa2中Session
session是另一种记录客户状态的机制,不同的是Cookie保存在客户端浏览器中,而session保存在服务器上。
当浏览器访问服务器并发送第一次请求时,服务器端会创建一个session对象,生成一个类似于key,value的键值对, 然后将key(cookie)返回到浏览器(客户)端,浏览器下次再访问时,携带key(cookie),找到对应的session(value)。 客户的信息都保存在session中
8.1 koa-session的使用
安装:npm install koa-session --save
8.2 引入koa-session
const session = require('koa-session');
8.3 设置官方文档提供的中间件
app.keys = ['some secret hurr'];
const CONFIG = {
key: 'koa:sess', //cookie key (default is koa:sess)
maxAge: 86400000, // cookie的过期时间 maxAge in ms (default is 1 days)
overwrite: true, //是否可以overwrite (默认default true)
httpOnly: true, //cookie是否只有服务器端可以访问 httpOnly or not (default true)
signed: true, //签名默认true
rolling: false, //在每次请求时强行设置cookie,这将重置cookie过期时间(默认:false)
renew: false, //(boolean) renew session when session is nearly expired,
};
app.use(session(CONFIG, app));
8.4 使用
设置值 ctx.session.username = "张三";
获取值 ctx.session.username
9.Koa中Cookie和Session区别
1、cookie数据存放在客户的浏览器上,session数据放在服务器上。
2、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能
考虑到减轻服务器性能方面,应当使用COOKIE。
4、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。
10.Koa2上传图片模块koa-multer
koa-multer是一个 node.js 中间件,用于处理 multipart/form-data 类型的表单数据,它主要用于上传文件。它是写在 busboy 之上非常高效。
注意: Multer 不会处理任何非 multipart/form-data 类型的表单数据,意思就是我们要上传图片必须在form表单上面加 multipart/form-data
安装:npm install --save koa-multer
10.1 引入配置koa-multer模块
const multer = require('koa-multer');
//配置
var storage = multer.diskStorage({
//文件保存路径
destination: function (req, file, cb) {
cb(null, 'public/uploads/') //注意路径必须存在
},
//修改文件名称
filename: function (req, file, cb) {
var fileFormat = (file.originalname).split(".");
cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]);
}
})
//加载配置
var upload = multer({ storage: storage })
10.2 使用koa-multer
router.post('/doAdd', upload.single('face'), async (ctx, next) => {
ctx.body = {
filename: ctx.req.file.filename,//返回文件名
body:ctx.req.body
}
});
10.3 使用koa-multer 上传多个图片
前台表单:后台:
router.post('/doAdd', upload.fields([{ name: 'pic', maxCount: 1 }, { name: 'aaa', maxCount: 1 }]),async (ctx)=>{
console.log(ctx.req.files);
})
注意Form表单加上enctype="multipart/form-data"
11. koa2分页
11.1 数据库分页查询数据的原理算法
规则:规定每页20条数据的查询方式
查询第一页(page=1):
db.表名.find().skip(0).limit(20)
查询第二页(page=2):
db.表名.find().skip(20).limit(20)
查询第三页(page=3):
db.表名.find().skip(40).limit(20)
总结:分页查询的sql语句
db.表名.find().skip((page-1)*pageSize).limit(pageSize)
11.2 数据库分页方法封装
find方法封装
db.collection(collectionName).find(json1,{fields:attr}).skip(slipNum).limit(pageSize);
count方法封装
var result= db.collection(collectionName).count(json);
result.then(function(data){
resolve(data);
})
12.koa2如何允许跨域
12.1 安装 koa2-cors
npm install --save koa2-cors
12.2 引入 koa2-cors 并且配置中间件
var Koa = require('koa');
var cors = require('koa2-cors');
var app = new Koa();
app.use(cors());
13.Koa2设置全局变量
有时候我们需要设置一些全局的变量,在各个路由模块中使用,下面我们看看那Koa2如何设置全局变量,以及Koa2中如何和设置全局模板数据
Koa中设置全局变量可以通过 ctx.state.变量名 来设置 如下:
router.use(async (ctx,next)=>{
//全局的G变量
ctx.state.G={
url:'http://www.itying.com',
userinfo:ctx.session.userinfo,
prevPage:ctx.request.headers['referer'] /*上一页的地址*/
}
})
在路由中获取全局变量也是通过 ctx.state.变量名 来获取
我们通过 ctx.state.变量 设置的全局变量可以直接在模板用使用哦
如上代码: 如果在其他模块中使用变量 直接通过 ctx.state.G.url来调用
如果在模板中使用直接通过 <%=url%> 来获取
14.Koa2 RESTful Api接口
14.1 一个好的Koa2 RESTful Api接口设计必须考虑以下几点
1.协议:建议使用更安全的https协议
2.域名:尽量部署在专属域名下面,比如https://a.itying.com https://api.itying.com
3.应该将api的版本号放入URl中:
(1)比如: https://a.itying.com/api1/newslist https://a.itying.com/api2/newslist
(2)比如: https://a1.itying.com https://a2.itying.com
4.路径:在RESTful架构中,每个网址代表一种资源(resource),所以网址中建议不能有动词,只能有名词,而且所用的名词往往与数据库的表格名对应。一般来说,数据库中的表都是同种记录的"集合"(collection),所以API中的名词也应该使用复数。
5.http请求数据的方式:(7个HTTP方法:GET/POST/PUT/DELETE/PATCH/HEAD/OPTIONS)
GET(SELECT):从服务器取出资源(一项或多项)。
POST(CREATE):在服务器新建一个资源。
PUT(UPDATE):在服务器更新资源(客户端提供改变后的完整资源)。
DELETE(DELETE):从服务器删除资源。
还有三个不常用的HTTP请求方式。
HEAD:获取资源的元数据。
OPTIONS:获取信息,关于资源的哪些属性是客户端可以改变的。
PATCH(UPDATE):在服务器更新资源(客户端提供改变的属性)。
6、过滤方式、请求数据方式、返回数据、安全。
14.2 Koa2 RESTful Api接口 (get post put delete) 代码演示
router.get('/catelist',async (ctx)=>{
var result=await DB.find('articlecate',{})
//console.log(result);
ctx.body={
result:result
};
})
//增加购物车数据
router.post('/addCart',async (ctx)=>{
//接收客户端提交的数据 、主要做的操作就是增加数据
console.log(ctx.request.body);
ctx.body={
"success":true,
"message":'增加数据成功'
};
})
//修改用餐人数的接口
router.put('/editPeopleInfo',async (ctx)=>{
//接收客户端提交的数据 、主要做的操作就是修改数据
console.log(ctx.request.body);
ctx.body={
"success":true,
"message":'修改数据成功'
};
})
//用于删除数据源
router.delete('/deleteCart',async (ctx)=>{
//接收客户端提交的数据 、主要做的操作就是删除数据的操作
console.log(ctx.query);
ctx.body={
"success":true,
"message":'删除数据成功'
};
})
15.koa2 网站开启gzip压缩
15.1 安装koa-compress中间件
cnpm install koa-compress --save
15.2 配置koa-compress中间件
const koa = require('koa');
const compress = require('koa-compress');
const app = koa();
const options = { threshold: 2048 };
app.use(compress(options));
网友评论