前端知识点回顾——koa和模板引擎

Posted 2022-01-12 simpul

koa

基于Node.js的web框架，koa1只兼容ES5，koa2兼容ES6及以后。

const Koa = requier("koa");
const koa = new Koa();

//koa.use注册中间件（一个用来处理请求/修饰向服务器发起的请求的异步函数,参数为ctx和next）
//每一个请求都会从上往下执行，当一个中间件调用 next() 则该函数暂停并将控制传递给定义的下一个中间件。当在下游没有更多的中间件执行后，堆栈将展开并且每个中间件恢复执行其上游行为。
koa.use(async (ctx, next)=>  //ctx上下文，是对request和response对象的一个封装
    console.log(0);
    await next();  //将控制权传递给下一个中间件
    console.log(3);
);
koa.use(async (ctx, next)=>
    await next();
    console.log(2);
)；
koa.use(async (ctx, next)=>
    console.log(1);  //当控制权传递到最后一个中间件后，又会像冒泡一样往上返回控制权
)；
//0 1 2 3
koa.listen(3000);  //监听于3000端口

koa-router模块

koa-router是处理路由的模块，和koa它也是中间件模块，在它上面注册的中间件也会有控制权的传递和冒泡一样返回控制权的行为。

const Koa = requier("koa");
const Router = requier("koa-router");
const koa = new Koa();
const router = new Router();

//将router模块实例注册到koa实例上
koa.use(router.routes())
    .use(router.allowedMethods());

koa-router对路由的处理：router.method(url, 中间件1, 中间件2, ...)

//接上例
const fs = requier("fs");
router.get("/", async ctx=>  //来自跟路由的get请求会执行这个中间件
    ctx.body = fs.readFileSync("index.html", "utf-8");  //ctx.body 响应主体
)；
router.get("/demo", async ctx=>
    ctx.body = fs.readFileSync("demo.html", "utf-8");
)

router.post("/data", async ctx=>
    //处理post请求
)

建议将路由实例独立成一个模块，中间件独立成另一个模块，模块化处理。

中间件：

//middle.js
const fs = require("fs");
module.exports = 
    "root" : async (ctx) => 
        ctx.body = fs.readFileSync("index.html", "utf8");
    ,
    "demo" : async (ctx) => 
        ctx.body = fs.readFileSync("demo.html", "utf8");
    

router实例:

//router.js
const Router = require("koa-router");
const router = new Router();
const dispose = require("./middle");

router.get("/", dispose.root);
router.get("/demo", dispose.demo);

module.exports = router;

最后再加上常用功能的模块，注册到koa实例上面去：

const Koa = require("koa");
const router = require("./router");
const static = requier("koa-static");  //管理静态资源（css，js，img文件等），指定静态资源的根目录，这样在html引入文件的路径中可用根目录“/”表示指定的静态资源的根目录
const join = requier("path");  //合并路径
const koaBody = require("koa-body");  //可以通过ctx.request.body获得请求主体
const cors = requier("@koa/cors");  //设置允许跨域的模块

const koa = new Koa();
koa.use(static(join(__dirname, "static")))  //指定文件所处目录下的static文件夹为静态资源位置
    .use(koaBody())
    .use(cors());

koa.use(router.routes())
    .use(router.allowedMethods())
    .listen(3000, ()=>
    console.log("开始监听3000端口");
)

---

模板引擎

模板引擎便于在中间件处理渲染页面（配合ctx.render方法）时给页面传参，让页面根据参数的不同而呈现不同的内容。

const Koa = require("koa");
const views = require("koa-views");  //管理模板引擎
const join = require("path");
const koa = new Koa();

koa.use(views(join(__dirname + '/views'), 
    extension: "pug"  //使用pug模板引擎
));
koa.use(async ctx=>
    await ctx.render("index",   //将views目录下的index.pug内容渲染到页面中去
        bool: 1  //往index.pug里传参
    );
).listen(3000, ()=>
    console.log("start to listen at 3000 port");
)

pug模板遵循严格的缩进，具体语法见：https://pug.bootcss.com/api/getting-started.html

// index.pug
doctype html
html
    head
        meta(charset="UTF-8")
        title simple
    body
        div.box#wrap wrap内容
        div(class = bool ? "simple" : "complicated") 啦啦啦
        input( type='checkbox',name='agreement',checked )