Koa2+Nunjucks的实例介绍

知识准备

koa入门：

• koa2使用的结构

• 什么是middleware? middleware顺序的重要性

• 整理笔记

处理URL：

• koa-router使用的结构

• koa-router借助koa-bodyparser处理post请求

• 重构：controllers文件夹下是处理不同URL函数的导出，导出的名字很重要就是这个URL；controllers.js将目标文件夹下的js文件导入，添加到router，最后将router.routes()返回（router middleware）

  在这个框架下，所有处理URL函数依葫芦画瓢放到controllers文件夹下即可

• 整理笔记

使用Nunjucks模板引擎：

• Enviroment类的对象env的创建函数和实例化
• nunjucks模板的使用：
  • 过滤器的使用
  • 继承
  • 标签添加逻辑
• 使用env.render(..)渲染出结果
• 整理笔记

koa+Nunjucks实例

view-koa源码

初识MVC

在这份示例代码中，当用户请求一个URL时，Koa将调用某个异步函数处理URL。在异步函数内部，通过Nunjucks把数据用指定的模板渲染成HTML，然后输出给浏览器，用户就可以看到渲染后的页面。盗用廖大的图说明MVC：

简单MVC.PNG

这就是传说中的MVC：Model-View-Controller

Controller负责业务逻辑，在图中是处理 / 请求的异步函数；View负责显示逻辑，包括模板和将数据替换至模板中；Model是数据，在这里是{name:'Michael'}

深入MVC及工程代码

• middleware的顺序性

  在koa入门中强调了middleware处理链顺序的重要性，下图说明了工程中middleware的顺序，其中bodyParser和为ctx添加render 函数必须在添加router middleware之前，处理静态文件请求必须在添加router middleware之前（因为其中bootstrap.css等在views中使用）

view-koa.png

• 最简单的M

  在这个工程中，传给views的只有{{title:...}}

  //controllers文件夹下index.js和signin.js
  ctx.render('signin-ok.html', {
                  title: 'Sign In OK',
                  name: 'Mr Node'
              });
  
  ctx.render('signin-failed.html', {
                  title: 'Sign In Failed'
              });
              
  ctx.render('index.html', {
              title: 'Welcome'
          });
  

• 有点麻烦的V

  V的介绍分两部分：

  • views文件夹下index.html,signin-failed.html,signin-ok.html和base.html的继承关系：

    在base.html中{% block main %} {% endblock %} 为之后继承做好准备；

    之后使用先是{% extends "base.html" %} 完成继承，然后{% block main %}... {% endblock %} 做拓展

  • templating.js中，先是创建Nunjucks Environment类的对象env，再将env的render 函数移花接木至ctx

    //给ctx绑定render函数
            ctx.render = function(view,model){
                ctx.response.type = 'text/html';
                ctx.response.body = env.render(view,Object.assign({},ctx.state||{},model||{}));
            }
    

    在app.js中的使用：

    // add nunjucks as view:
    app.use(templating('views', {
        noCache: !isProduction,
        watch: !isProduction
    }));
    

• 最复杂的C

  C的基本逻辑还是前文处理URL重构的controllers.js和controllers文件夹：

  • controllers.js负责将controllers文件夹下的js文件导出(fn addControllers)，按get 或是post 添加至router(fn addMapping)，最终返回router.routes() 即router middleware
  • controllers文件夹下是处理不同URL的js文件，其中导出对象的属性名对于URL，属性值对应异步函数
  • 在templating.js中定义在app.js中使用为ctx 设置了 render 函数，所以在处理不同URL的js文件中可以使用ctx.render(..) 将渲染后的html文件作为body返回，并且设置type

  在views中使用了bootstrap的相关静态文件，在static-files.js 中定义如何处理静态文件处理

总结和感谢

之后如果想在此基础拓展，有三点：

• .html文件准备好放在views文件夹下，可以多使用Nunjucks强大的功能，继承的使用很高效~
• controllers文件夹下处理更多的URL，使用views文件夹下的模板渲染
• bootstrap的静态文件请求处理对应其他库啊都适用的

感谢廖大的教程，很多都是摘了廖大博客中的内容，不摘的也是受廖大的启发，在看廖大的教程的时候，可以适当关注一下底下的评论，有些你遇到的问题人家也可能遇到了并且给出了解决方法。