koa 框架套路-静态路由+ 动态路由

这篇博客，我打算，边写边做笔记的方式，把它写下来！

其实写笔记是最好的习惯，为啥，因为，只要你放到了**** 上，那么你走到任何一个地方，都可以看你自身的博客，而无需担心计算机坏啦，等乱起八糟的原因！不扯了，我们开始，博客写法，渐进式！

 

1， 基本路由使用！

index.js

const Koa = require('koa');
const Router = require('koa-router');


let server = new Koa();
server.listen(3000);


let router = new Router();



router.get('/', async ctx=>{
	 ctx.body ="前台";
});


router.get('/admin', async ctx=>{
	 ctx.body ="后台";
})



server.use(router.routes());

我们只添加了 连个url 处理方式，很简单，我们看下浏览器访问，我用的是 搜狗浏览器，自带截图，很牛叉

 

 

看一个前台，一个后台，下面我们就是把 这两个子路由给分出去！

 

前台子路由：

修改 我们的index.js 如下：

 

const Koa = require('koa');
const Router = require('koa-router');


let server = new Koa();
server.listen(3000);


let router = new Router();


router.use('/',require('./routers'));

router.use('/admin',require('./routers/admin'));

server.use(router.routes());

在这里我还有明确一下， 子路由的添加，用use ,访问具体的地址，用get post 或者all 

 

我们还有把上面的结构截图下，因为我用到了三个index.js

我在这里去强调下Node 的模块访问机制，当我们去访问一个目录的时候，它会默认的去找 该目录下的index.js 模块 

在Node中，一个js文件就是一个模块！

 

---

好，动态模块化，我们就搞定了！

下面我们就是加静态模块话，（其实就是静态资源的访问！），我们用到的是koa-static

我们打算将static路由加到跟路由下，这样的话，方便配置：

我们不要着急慢慢写！

1， 引入koa-static 

2,将静态路由挂在到根 动态路由下

router.use('/',require('./routers'));

router.use('/admin',require('./routers/admin'));


// 在这里添加静态路由
router.all(/((\.jpg)|(\.png)|(\.gif))$/i, static('./static', {
    maxage: 3*86400*1000
  }));
  router.all(/((\.js)|(\.jsx))$/i, static('./static', {
    maxage: 10*86400*1000
  }));
  router.all(/(\.css)$/i, static('./static', {
    maxage:2*86400*1000
  }));
  router.all(/((\.html)|(\.htm))$/i, static('./static', {
    maxage: 2*86400*1000
  }));
  router.all('*', static('./static', {
    maxage: 2*86400*1000
  }));


server.use(router.routes());

我们在动态路由的后面添加静态路由

 

我们访问结果：

 

 

---

前面呢，我们已经搭建好了路由，包括动态路由+ 静态路由都搞定了，下面我们继续搭建我们的基本服务器

上面的路由写法还是得继续改进，所以我们要把 静态路由抽取出去！

这个抽取很简单，我们就是把上面静态路由的东西都写成一个模块！

static.js

const static=require('koa-static');

module.exports=function (router, options){
  options=options||{};
  options.image=options.image||30;
  options.script=options.script||1;
  options.styles=options.styles||30;
  options.html=options.html||30;
  options.other=options.other||7;

  router.all(/((\.jpg)|(\.png)|(\.gif))$/i, static('./static', {
    maxage: options.image*86400*1000
  }));
  router.all(/((\.js)|(\.jsx))$/i, static('./static', {
    maxage: options.script*86400*1000
  }));
  router.all(/(\.css)$/i, static('./static', {
    maxage: options.styles*86400*1000
  }));
  router.all(/((\.html)|(\.htm))$/i, static('./static', {
    maxage: options.html*86400*1000
  }));
  router.all('*', static('./static', {
    maxage: options.other*86400*1000
  }));
};

 

下面就是使用这个模块了！

 

好，静态路由，动态路由，完全搞定

---