tutorial de koa
1. Instalación
Antes de desarrollar koa2, se requiere que la versión de nodejs sea superior a la v7.6. Debido a que nodejs7.6 es totalmente compatible con async/await, puede ser totalmente compatible con koa2
Sintaxis de instalación: npm install koa --save-dev
Antes de usar, primera inicialización de npm init
2. Fácil de usar
var koa= require( ‘koa’);
var app= new koa();
//中间件，express中的req，res参数变成了ctx
app.use(async(ctx)=>{
ctx.body=”你好koa2.x”
})
app.listen(3000);
Tres, ruta koa
3.1 Implementación básica
El enrutamiento en koa es diferente del express, necesitamos instalar el módulo de enrutamiento koa-router correspondiente para lograr
npm install koa-router --save-dev
importa:
var koa =require('koa');
var router=require('koa-router')();
var app=new koa();
//ctx 上下文context， 包含了request和response等信息
router.get('/', async (ctx) => {
ctx.body=’首页’//相当于res.end( )
}).get('/news', async (ctx) => {
//可以连续使用,也可以分开用
ctx.body='这是一个新闻页面'
})
app.use(router.routes())//启动路由
app.use(router.allowedMethods())
//作用：这是官方文档的推荐用法，
//我们可以看到router.allowedMethods()用在了路由匹配router.routes()之后，
//所以在当所有路由中间件最后调用，此时根据ctx.status设置响应头
app.listen(3000)
3.2 ¿ Cómo obtener parámetros obteniendo valor ?
Método 1: (recomendado)
ctx.query // imprime {aid: '123'} para obtener un objeto (el método más utilizado)
ctx.querystring // Aid=123&name=zhangsan para obtener una cadena
Método 2: podemos obtener el valor obtenido de la solicitud en ctx
ctx.request.requery // {aid: '123'}
ctx.quest.querystring // Aid=123&name=zhangsan
3.3 Enrutamiento dinámico
router.get('/newscontent/:aid', async (ctx) => {
console.log(ctx.params) // { aid : ‘123’}
ctx.body = '新闻详情'
})
El enrutamiento dinámico puede pasar múltiples valores
router.get('/newscontent/:aid/:cid', async (ctx) => {
console.log(ctx.params) //{aid:’123’ , cid: ‘456’}
ctx.body = '新闻详情'
})
Cuatro, middleware koa
4.1 El middleware utiliza
funciones de middleware:
ejecutar cualquier código
modificar objetos de solicitud y respuesta
finalizar el ciclo de solicitud-respuesta
llamar al siguiente middleware en la pila
Si no hay un parámetro siguiente en las funciones de devolución de llamada get y post, el nombre coincidirá con la primera ruta y no coincidirá con abajo. Si desea hacer coincidir, debe escribir next()
4.2 Definición de middleware a nivel de aplicación
: es operar un determinado requisito antes de hacer coincidir todas las rutas.
const Koa = require('koa');
const router = require('koa-router')();
const app = new Koa();
// 中间件，匹配任何路由，也就是在匹配任何路由之前调用它
app.use(async(ctx,next)=>{
ctx.body="中间件"
console.log(new Date())
await next() // 当前路由匹配完成以后继续向下匹配,不写就不会向下匹配
})
router.get('/', async (ctx) => {
ctx.body = '首页'
})
router.get('/news', async (ctx) => {
ctx.body = '新闻'
})
app.use(router.routes()); //启动路由
app.use(router.allowedMethods())
app.listen(3000)
4.3 Middleware de enrutamiento
Definición: Realizar algún tipo de operación antes de hacer coincidir una ruta específica
router.get('/news', async (ctx，next) => {
//匹配到news路由后继续向下匹配路由
console.log(“新闻中间件”)
await next()
})
router.get('/news', async (ctx) => {
ctx.body = '新闻'
})
4.4 Manejo de errores Middleware
El middleware y las rutas Express tienen una secuencia, pero koa no tiene orden, incluso si se coloca al final de la ruta, el middleware se ejecutará primero
Ejemplo: página 404
app.use(async(ctx,next)=>{
console.log('这是一个中间件01')
await next()
if(ctx.status==404){
ctx.status=404;
ctx.body="这是一个404页面"
}else{
console.log('正常')
}
})
router.get('/', async (ctx) => {
ctx.body = '首页'
})
Resultado de impresión: Este es un middleware 01 -> Inicio -> Normal
Orden de ejecución, primero imprimir: este es un middleware 01, luego ejecute la ruta en next (), después de ejecutar la ruta y devolver el resultado, regrese a la aplicación.use el middleware y ejecute el juicio if.
· En este momento hablaremos sobre el modo de ejecución de koa.
app.use(async(ctx,next)=>{
console.log('中间件01')
await next()
console.log('1')
})
app.use(async(ctx,next)=>{
console.log('中间件02')
await next()
console.log('2')
})
app.use(async(ctx,next)=>{
console.log('中间件03')
await next()
console.log('3')
})
router.get('/', async (ctx) => {
ctx.body = '首页'
})
router.get('/news', async (ctx) => {
console.log('匹配到新闻页面')
ctx.body = '新闻'
})
Resultados de:
Middleware 01 -> Middleware 02 -> Middleware 03 -> Coincidir con la página de noticias -> 3 -> 2 -> 1
Koa es como una cebolla: primero ejecuta la solicitud, luego ejecuta la respuesta (de afuera hacia adentro, luego de adentro hacia afuera)
Como se muestra en la imagen:
4.5 Middleware de terceros
Cinco, motor de plantillas ejs
5.1 Instalar koa-views ejs
npm instalar koa-views --save
npm install ejs --save
5.2 usar
const Koa = require('koa');
const views =require('koa-views')
const router = require('koa-router')();
const app = new Koa();
// app.use(views(__dirname + '/views', {map: {html: 'ejs'}})) 这种方式文件名得写index.html
app.use(views(__dirname+'/views', {
extension: 'ejs' })) 这种写index.ejs
router.get('/', async (ctx) => {
let title=”hello world
let arr=[‘刚刚’，‘他娃儿噶’，‘大幅度’]
await ctx.render('index',{
//别忘了加 await
title:title，
arr:arr
})
})
parte html
<h1>这是一个ejs的模板引擎</h1>
<h2><%= title %></h2>
<ul>
<% for(var i=0; i<arr.length; i++){
%>
<li><%= arr[i] %></li>
<% }%>
</ul>
5.3 Puede introducir el encabezado y pie de página públicos
para crear un nuevo archivo header.ejs
soy un encabezado publico
Luego, introduzca la parte de nodejs de datos vinculantes 5.4 a través de <%- include('public/header.ejs') -%>router.get('/', async (ctx) => {
let content = '<h3>我是数据</h3>'
await ctx.render('index',{
content:content
})
})
parte ejs
<%=content%>
Pero este resultado es
soy datos
, no se puede analizarEtiqueta
En este momento necesitamos usar <%- %>
<%-content%> Esto es suficiente
5.5 Juicio condicional
router.get('/', async (ctx) => {
let number=123
await ctx.render('index',{
number:number
})
})
parte ejs
<% if(number>20){%>
<p>大于20</p>
<%} else {%>
<p>小于20</p>
<%}%>
5.6 Cómo configurar datos públicos
· ¿Qué debo hacer si todas las páginas necesitan los mismos datos?
Por supuesto, también puedes escribir una página por página, pero si hay docenas o cientos de páginas, será demasiado problemático, en este momento podemos definirlo en el ctx.state del middleware.
Ejemplo: por ejemplo, cada página necesita datos de información de usuario
Podemos hacer esto
parte de nodejs
app.use(anync (ctx,next) =>{
ctx.state.userInfo=”我是公共数据”
await next()
})
llamada ejs
<%=información de usuario%>
Seis, envío de datos de koa post
6.1 nodejs implementa de forma nativa
la parte ejs de recibir datos de solicitud de formulario
<form action="/doAdd" method="post">
<label for="">用户名：</label>
<input type="text" name="username">
<br>
<label for="">密码：</label>
<input type="password" name="password">
<br>
<button type="submit">确定</button>
</form>
parte de nodejs
const Koa = require('koa');
const views =require('koa-views')
const router = require('koa-router')();
const common =require('./module/common.js')
const app = new Koa();
app.use(views(__dirname+'/views', {
extension: 'ejs' }))
router.get('/', async (ctx) => {
await ctx.render('index.ejs')
})
router.post('/doAdd', async (ctx) => {
var data= await common.getPostData(ctx)
console.log(data)
ctx.body=data;
})
app.use(router.routes()); //启动路由
app.use(router.allowedMethods())
app.listen(3000)
Creamos una nueva carpeta de módulo y creamos un nuevo common.js en ella.
Recibir datos solicitados por el cliente a través del código nativo del nodo.
Una función getPostData está encapsulada en common.js
El código se muestra a continuación.
exports.getPostData=function(ctx){
return new Promise(function(resolve,reject){
try{
var str='';
ctx.req.on('data',function(chunk){
str+=chunk;
})
ctx.req.on('end',function(chunk){
resolve(str)
})
}catch(err){
reject(err)
}
})
}
6.2 koa-bodyparser obtiene los datos enviados mediante el formulario
①Instalar primero
npm instala koa-bodyparser --save
② importar
const bodyParser = require('koa-bodyparser')
③ Configurar el middleware koa-bodyparser
app.use(bodyParser())
④ Obtenga los datos enviados por el formulario
El
código ctx.request.body es el siguiente
router.post('/doAdd', async (ctx) => { var datos = ctx.request.body ctx.body=data; })
Siete, middleware de recursos estáticos koa-static
¿Por qué usarlo?
Al igual que un archivo css, no es válido si solo se importa con un enlace. En este momento, koa-static se usa para procesar recursos estáticos.
① Instalación
npm instala koa-static --save
② importación
const static = require('koa-static')
③ Configuración, puede configurar múltiples
app.use(static(__dirname+'/static'))
Primero vaya a static para buscar, si lo encuentra, devuelva el archivo correspondiente, si no lo encuentra, luego next()
Nota: Cuando se importe el enlace, no escriba la carpeta externa
Por ejemplo: No está permitido escribir así.
Solo escríbelo asíDel mismo modo, no es necesario escribir estática al importar imágenes.
Ocho, motor de plantillas art-template (ver sitio web oficial)
art-template es un motor de plantillas minimalista y ultrarrápido.
Utiliza tecnología de declaración previa de alcance para optimizar la velocidad de representación de la plantilla, a fin de obtener un rendimiento de ejecución cercano al límite de JavaScript, y es compatible con NodeJS y navegadores al mismo tiempo.
Utilice dos formas de escritura: ①similar a ejs ②similar a angular
render(app, { root: path.join(__dirname, 'view'), //ver extname: '.art', //suffix debug: process.env.NODE_ENV !== 'production' //si habilitar la depuración });
Nueve, el uso de cookies en koa.
9.1 Introducción a las cookies
Una cookie es una variable almacenada en la computadora del visitante.
El protocolo http no tiene estado
· El papel de las cookies
① Guardar información del usuario
② Historial del navegador
③ Adivina tu función favorita
④ Inicia sesión gratis durante 10 días
⑤ Transferencia de datos entre varias páginas
⑥ cookie implementa la función de carrito de compras
9.2 Establecer el valor de la cookie en koa
ctx.cookies.set(nombre,valor,[opciones])
Establecer la configuración del valor del nombre en la cookie a través de opciones
parámetros de cookies
· Implementar el uso compartido de cookies entre varias páginas.
router.get('/', async (ctx) => {
ctx.cookies.set('userinfo','zhangsan',{
maxAge:60*1000*60， //多长时间以后过期
path:’/news’，//特定路径才能访问
domain:’.baidu.com’,
// 表示 a. baidu.com b.baidu.com 可以共享cookie的数据，
//正常情况下不要设置，默认就是当前域下面的所有页面都可以访问
httpOnly:true ,
//true表示这个cookie只有服务器端可以访问（在页面中通过js访问不到），
//false表示服务端和都可以访问
})
await ctx.render('index.ejs')
})
router.get('/news', async (ctx) => {
var cookdata = ctx.cookies.get('userinfo')
ctx.body = cookdata;
})
9.3 El error de las cookies en koa
· Si el valor de la cookie se establece en chino, se informará un error
router.get('/', async (ctx) => {
ctx.cookies.set('userinfo',‘张三’,{
//会报错
maxAge:60*1000*60
}）
}）
Solución:
Utilice el búfer para convertir caracteres chinos en caracteres base64 y finalmente restaure base64 a caracteres chinos
router.get('/', async (ctx) => {
var userinfo = new Buffer(‘张三’).toString(‘base64’)
ctx.cookies.set('userinfo',userinfo ,{
maxAge:60*1000*60
})
await ctx.render('index.ejs')
})
router.get('/news', async (ctx) => {
var cookdata = ctx.cookies.get('userinfo')
var userinfo = new Buffer(cookdata ,’base64’).toString()
ctx.body = userinfo;
})