koa2使用&&中间件&&angular2的koa托管

文章导航

1，koa2使用；

2，写中间件；

3，koa2路由配置angular2;

一。先上代码,一篇，看完koa2中大多基础方法：

const Koa=require('koa');
const app=new Koa();
    //middleWare:
const Router=require('koa-router');
const mount=require('koa-mount');
const staticCache=require('koa-static-cache');
const session=require('koa-session');
cosnt bodyParser=require('koa-bodyParser');
const send=require('koa-send');
const convert=require('koa-convert');
const co=require('co');

//使用bodyParser和session（following）:
app.use(bodyParser());
app.keys=['mykeys'];
const sessionConfig={
      key:'myKey',   //cookie中的key命名为myKey。可以不定义使用默认值。
 }
app.use(convert(session(sessionConfig,app)));
app.use(co.wrap(function* (ctx,next){
     //自己定义了一个路由，接受url为 /myTest时，返回信息（following）：
     if(ctx.path==='myTest'){
     //为其配备GET，POST方法（following）：
         switch(ctx.method){
            case 'GET':
                ctx.session.views=++ctx.session.views||0;
                ctx.body=ctx.session.views;
            case 'POST':
                ctx.body=JSON.stringify(ctx.bodyParser);
           }
      }
     yield next();
}))

//使用路由中间件（following）：
const router=new Router();
const childRouter=new Router();
childRouter.get(
     '/',
     (ctx,next)=>{
         ctx.body='Child Content';
         return next();
     },
     (ctx,next)=>{
         ctx.body+='Attach Content';
      }
)
    //可以通过next，连用。也可以仅如下使用（following）：
router.get('/', (ctx,next)=>{
      ctx.body='hello';
})
   //将两个路由拼起来（following）：
router.use(
   '/child',
   childRouter.routes(),
   childRouter.allowedMethods()
)

app.use(mount( '/routerPath', router.routes()  ));
app.use(mount( '/routerPath', router.allowedMethods()));
  //(above)又将router，局限在‘routerPath’路径。
app.use(mount(
   '/static',
   convert(staticCache(
        __dirname+'/static',
        {age:12000,usePrecompiledGzip:true}
            //(above)在static下，托管目录为static的静态文件，设置cache-age=1200;并允许使用预先压缩好的gzip
      ));
))

//你也可以使用send，来单独发送一个文件(following):
app.use (mount('/jquery.min.js', (ctx,next)=>{
     ctx.set( ' Content-Type','text/html');
     ctx.set( ' Content-Encoding', ' gzip');
     return send(ctx,'./js/jquery.min.js');  //jquery.min.js是gzip文件。
}))
//或者自己写一个简易(不判断content-type)的具备koa-static功能的(following)：
const fs=require('fs');
app.use( mount('/myStatic',(ctx,next)=>{
      let readStream=fs.createReadStream('./static'+ctx.path);
      ctx.body=readStream;
}))
//(above)通过ctx.path获得/myStatic下的相对url。
// 在Http模块下readStream.pipe(res);   而koa中ctx.body会自动处理流。

app.listen(3000);

　

二，自己写一个中间件；

比如我们只想对cookie进行加密和解密使用：

myCookie.js:

const co=require('co');
const crypto=require('crypto');
const encrypt=function(val,key,method='aes192'){
      let cipher=crypto.createCipher(method,key);
      cipher.update(val,'utf8','hex');
      return cipher.final('hex');
}
const decrypt=function(val,key,method='aes192'){
      let deCipher=crypto.createDeCipher(method,key);
      deCipher.update(val,'hex','utf8');
      return cipher.final('utf8');
}

module.exports=function(key,method='aes192'){
      return co.wrap(function* (ctx,next){
            let originalSet=ctx.cookies.set.bind(ctx.cookies);
            let originalGet=ctx.cookies.get.bind(ctx.cookies);
            //重新定义cookies.set具备加密功能:
            ctx.cookies.set=function(...args){
                  try{
                         args[1]=encrypt(args[1],key,method);
                         originalSet(...args);
                  }catch(e){console.log(e)}
            }
            //重新定义cookies.get具备解密功能:
            ctx.cookies.get=function(...args){
                   try{
                         args[1]=decrypt(args[1],key,method);
                         originalGet(...args);
                   }catch(e){console.log(e)};
             }
            //增加一个清除cookie的功能：
            ctx.cookies.clear=function(name){
                   if(!name) return;
                   let d= new Date();
                   d.setTime(d.getTime()-1);
                   ctx.cookies.set(name, ' ' ,{expires:d});
           }
           yield next();  //最后别忘了yield next;
      } )
}

在app.js中使用：

const myCookie=require('./myCookie.js')('mykey');
app.use(myCookie);
app.keys=['mykey2'];
app.use((ctx)=>{
  ctx.cookies.set('name', 'Jnew ',{signed:true});
  ctx.cookies.clear('preName');
})

与普通ctx.cookies.set相同的用法，但是存入的cookie却是经过加密的。

signed:true时的解释：

　　　　The cookie will still be visible, but it has a signature, so it can detect if the client modified the cookie.

　　　　It works by creating a HMAC of the value (current cookie), and base64 encoded it. When the cookie gets read, it recalculates the signature and makes sure that it matches the signature attached to it.

　　　　If it does not match, then it will give an error.

　　　　If you want to hide the contents of the cookie as well, you should encrypt it instead (or just stores it in the server side session). I'm not sure if there is middleware for that already out there or not.

server side session:

　　PS：使用redis内存数据库是一个比较好的解决方法。可是耗性能。就像我不用动态compress，而只是静态托管已压缩好的文件一样。很早前就想过，将MVC这样的构架从服务器中解脱出来，放在前端进行处理，毕竟服务器渲染HTML也是耗性能的。然后自己兴致勃勃地写了一个简单的基于socket的前端模块加载器，然后发现已经有了react 和后来angular2这样的东西。毕竟我只是野路子的医学生，那时又不爱逛社区。闭门造车真是可怕。。。- -！

三，托管Angular2前端路由：

frontEndComponent.js

const fs=require('fs');
const send=require('koa-send');

module.exports=function(path){
   return async(ctx,next)=>{
      let fileExist=await function(){
              return new Promose((resolve,reject)=>{
                     fs.access(path+ctx.path,err=>{
                        if(!!err||ctx.path==='/'){
                              resolve(false);
                         }else{
                               resolve(true);
                         }
                     })
              })
      }();
      if (fileExist){   // typeof fileExist  :boolean  ..不是promise
           await send(ctx,path+ctx.path);
      }else{
           await send(ctx,path+'/index.html');
      }
   }
}

不能直接托管于static下，因为浏览器中输入地址时，前端路由会失效。根据地址判断，服务器中对应的文件是否存在，不存在则返回index.html。该例使用async/await语法。需要babel编译。

　app.js:

var frontEndComponent=require('./frontEndComponent');
var mount=require('koa-mount');
app.use(mount('/example-router',frontEndComponent('./dist')));
app.use((ctx)=>{
   ctx.body='empty';
})
app.listen(3000);

　　后端将example-router这个地址及其子地址，分配给'/dist'目录下的前端组件来管理。

注意：index.html  中  <base href='/example-router/'>;

　　我已经托管到npm，可以直接使用这个包：

　　
npm install koa-angular-proxy