koa2学习

koa

前端学习

发布日期: 2018-11-03

搭建环境

新建一个文件夹如koa2文件夹

cd koa2
npm init -y
npm install --save koa

在文件夹新建一个app.js,输入以下代码

const Koa = require('koa')
connst app = new Koa()
app.use( async ( ctx ) => {
  ctx.body = 'hello koa2'
})
app.listen(3000)
console.log('[demo] start-quick is starting at port 3000')

然后在命令行输入

node app.js

或者执行npm start,npm start命令会让npm执行定义在package.json文件中的start对应命令：

"scripts": {
    "start": "node app.js"
}

Get请求的接收

query和querystring区别

在koa2中GET请求通过request接收，但是接受的方法有两种：query和querystring。
1.query：返回的是格式化好的参数对象。
2.querystring：返回的是请求字符串。
看如下例子的输出结果
demo01.js

const Koa = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
    let url =ctx.url;
    let request =ctx.request;
    let req_query = request.query;
    let req_querystring = request.querystring;
    ctx.body={
        url,
        req_query,
        req_querystring
    }
});
app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
});

编写好后，在终端中使用node demo1.js启动服务。启动一切正常可在浏览器中使用http://127.0.0.1:3000?user=wutao&age=18 来进行访问。我们在网页中可以得到一串JSON字符串.

{"url":"/?user=wutao&age=18","req_query":{"user":"wutao","age":"18"},"req_querystring":"user=wutao&age=18"}

直接从ctx中获取Get请求

demo02.js

const Koa = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
    let url =ctx.url;
    //从request中获取GET请求
    let request =ctx.request;
    let req_query = request.query;
    let req_querystring = request.querystring;
    //从上下文中直接获取
    let ctx_query = ctx.query;
    let ctx_querystring = ctx.querystring;
    ctx.body={
        url,
        req_query,
        req_querystring,
        ctx_query,
        ctx_querystring
    }
});
app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
});

post请求接收

获取Post请求的步骤：

1.解析上下文ctx中的原生nodex.js对象req。
2.将POST表单数据解析成query string-字符串.(例如:user=wutao&age=18)
3.将字符串转换成JSON格式。

ctx.method 得到请求类型

demo03.js

const Koa = require('koa');
const app = new Koa();
app.use(async(ctx) => {
     //当请求时GET请求时，显示表单让用户填写
     if(ctx.url === '/' && ctx.method === 'GET'){
         let html =`
            <h1>Koa2 request post demo</h1>
            <form method="POST"  action="/">
                <p>userName</p>
                <input name="userName" /> <br/>
                <p>age</p>
                <input name="age" /> <br/>
                <p>webSite</p>
                <input name='webSite' /><br/>
                <button type="submit">submit</button>
            </form>
        `;
        ctx.body = html;
     }else if(ctx.url === '/' && ctx.method === 'POST'){
         ctx.body = '接受数据了'
     }else{
         //其它请求显示404页面
        ctx.body='<h1>404!</h1>';
     }
} )
app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
})

解析Node原生POST参数

function parsePostData(ctx){
    return new Promise((resolve,reject)=>{
        try{
            let postdata="";
            ctx.req.on('data',(data)=>{
                postdata += data
            })
            ctx.req.addListener("end",function(){
                resolve(postdata);
            })
        }catch(error){
            reject(error);
        }
    })
}

然后在上demo03.js接收POST请求的处理方法里，修改代码如下。

else if(ctx.url==='/' && ctx.method==='POST'){
    let pastData=await parsePostData(ctx);
    ctx.body=pastData;
}

POST字符串解析JSON对象

上面得到的post参数是一个字符串，接下来将这个字符串封装成json对象

function parseQueryStr(queryStr){
    let queryData={};
    let queryStrList = queryStr.split('&');
    for( let [index,queryStr] of queryStrList.entries() ){
        let itemList = queryStr.split('=');
        console.log(itemList);
        queryData[itemList[0]] = decodeURIComponent(itemList[1]);
    } 
    return queryData
}

将demo03.js的 parsePostData做些修改

function parsePostData(ctx){
    return new Promise((resolve,reject)=>{
        try{
            let postdata="";
            ctx.req.on('data',(data)=>{
                postdata += data
            })
            ctx.req.addListener("end",function(){
                let parseData = parseQueryStr( postdata )
                resolve(parseData);
            })
        }catch(error){
            reject(error);
        }
    });
}

koa-bodyparser中间件

koa-bodyparser中间件可以把koa2上下文的formData数据解析到ctx.request.body中。

安装中间价

npm install --save koa-bodyparser@3

引入

安装完成后，需要在代码中引入并使用。我们在代码顶部用require进行引入。

const bodyParser = require('koa-bodyparser');

然后进行使用，如果不使用是没办法调用的，使用代码如下。

app.use(bodyParser());

demo04.js代码如下

const Koa  = require('koa');
const app = new Koa();
const bodyParser = require('koa-bodyparser');
app.use(bodyParser());
app.use(async(ctx)=>{
    if(ctx.url==='/' && ctx.method==='GET'){
        //显示表单页面
        let html=`
            <h1>wutao Koa2 request POST</h1>
            <form method="POST" action="/">
                <p>userName</p>
                <input name="userName" /><br/>
                <p>age</p>
                <input name="age" /><br/>
                <p>website</p>
                <input name="webSite" /><br/>
                <button type="submit">submit</button>
            </form>
        `;
        ctx.body=html;
    }else if(ctx.url==='/' && ctx.method==='POST'){
         let postData= ctx.request.body;
         ctx.body=postData;
    }else{
        ctx.body='<h1>404!</h1>';
    }
});
app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
});

Koa-router中间件

安装koa-router中间件

npm install --save koa-router

demo案例

demo05.js

const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
router.get('/', function (ctx, next) {
    ctx.body="Hello wutao";
});
app
  .use(router.routes())
  .use(router.allowedMethods());
  app.listen(3000,()=>{
      console.log('starting at port 3000');
  });

多页面配置

const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
router.get('/', function (ctx, next) {
    ctx.body="Hello wutao";
})
.get('/todo',(ctx,next)=>{
    ctx.body="Todo page"
});
app
  .use(router.routes())
  .use(router.allowedMethods());
  app.listen(3000,()=>{
      console.log('starting at port 3000');
  });

koa2使用cookie

1.ctx.cookies.get(name,[optins]):读取上下文请求中的cookie。
2.ctx.cookies.set(name,value,[options])：在上下文中写入cookie

写入Cookie操作

demo06.js

const Koa  = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
    if(ctx.url=== '/index'){
        ctx.cookies.set(
            'MyName','wutao'
        );
        ctx.body = 'cookie is ok';
    }else{
        ctx.body = 'hello world'
    }
});
app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
})

写好后预览，打开F12可以在Application中找到Cookies选项。就可以找到我们写入的name和value了。

Cookie选项

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','wutao',{
                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{
        ctx.body = 'hello world'
    }
});
app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
})

读取Cookie：

const Koa  = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
    if(ctx.url=== '/index'){
        ctx.cookies.set(
            'MyName','wutao',{
                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');
})

Koa2的模板（ejs)

安装中间件

npm install --save koa-views
npm install --save ejs

编写ejs

新建一个view的文件夹，并在它下面新建index.ejs文件。
views/index.ejs

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>http://wutao.com/wp-admin/post.php?post=2760&action=edit#
</head>
<body>
    <h1><%= title %></h1>
    <p>EJS Welcome to <%= title %></p>
</body>
</html>

编写koa文件

const Koa = require('koa')
const views = require('koa-views')
const path = require('path')
const app = new Koa()
// 加载模板引擎
app.use(views(path.join(__dirname, './view'), {
  extension: 'ejs'
}))
app.use( async ( ctx ) => {
  let title = 'hello koa2'
  await ctx.render('index', {
    title
  })
})
app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
})

koa-static静态资源中间件

安装koa-static

npm install --save koa-static

新建static文件夹然后在static文件中放入图片，css和js文件

demlo06.js

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')
})

koa

charles使用

下载 charles 工具charles 破解版链接:https://pan.baidu.com/s/1ps9VZC495UQKLjxPrsSU7w 密码:uqfo 电脑安装证书Help => SSL Proxying =>

2018-11-08 前端调试工具

debug

nginx学习

环境购买阿里云 ECS.我用的操作系统是 CentOS 7.4 64 位版本。然后建立远程链接 ssh root@公网ip 用 yum 安装必要程序yum -y install gcc gcc-c++ autoconf pcre-devel

2018-11-01 前端学习

nginx