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 )

前端知识点回顾——koa和模板引擎的更多相关文章

  1. 前端知识点回顾——HTML,CSS篇

    前端知识点回顾篇--是我当初刚转行为了面试而将自己学过的前端知识整理成的一份笔记,个人目的性很强,仅供参考. doctype 有什么用 doctype是一种标准通用标记语言的文档类型声明,目的是告诉标 ...

  2. 前端数据渲染及mustache模板引擎的简单实现

    早期数据渲染的几种方式 在模板引擎没有诞生之前,为了用JS把数据渲染到页面上,诞生了一系列数据渲染的方式. 最最基础的,莫过于直接使用DOM接口创建所有节点. <div id="roo ...

  3. 前端学PHP之自定义模板引擎

    前面的话 在大多数的项目组中,开发一个Web程序都会出现这样的流程:计划文档提交之后,前端工程师制作了网站的外观模型,然后把它交给后端工程师,它们使用后端代码实现程序逻辑,同时使用外观模型做成基本架构 ...

  4. 前端学PHP之Smarty模板引擎

    前面的话 对PHP来说,有很多模板引擎可供选择,但Smarty是一个使用PHP编写出来的,是业界最著名.功能最强大的一种PHP模板引擎.Smarty像PHP一样拥有丰富的函数库,从统计字数到自动缩进. ...

  5. koa art-template模板引擎的使用

    art-template 模板引擎介绍 art-template 是一个简约.超快的模板引擎. 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行 性能,并且同 ...

  6. 前端知识点回顾之重点篇——ES6的Promise对象

    Promise Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异 ...

  7. 前端知识点回顾之重点篇——JavaScript异步机制

    JavaScript异步机制 来源:https://www.cnblogs.com/zhaodongyu/p/3922961.html JavaScript是单线程异步执行的,单线程意味着代码在任务队 ...

  8. 前端知识点回顾之重点篇——CSS中flex布局

    flex布局 来源: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 采用 Flex 布局的元素 ...

  9. 前端知识点回顾——Reactjs

    React.js 编写react需要安装的三个开发环境下的模块 babel 解析JSX react 实现ui用户界面 react-dom 处理dom JSX:在JavaScript里面写html代码( ...

随机推荐

  1. c#界面卡死处理方法

    方法一: 设置属性: Control.CheckForIllegalCrossThreadCalls = false; 开启一个新线程 Thread th = new Thread(() => ...

  2. socket技术详解

    https://blog.csdn.net/weixin_39634961/article/details/80236161 socket编程是网络常用的编程,我们通过在网络中创建socket关键字来 ...

  3. 企业级自动化运维工具应用实战ansible

    公司计划在年底做一次大型市场促销活动,全面冲刺下交易额,为明年的上市做准备.公司要求各业务组对年底大促做准备,运维部要求所有业务容量进行三倍的扩容,并搭建出多套环境可以共开发和测试人员做测试,运维老大 ...

  4. Linux命令——shutdown、halt、poweroff、reboot、cal、date

    shutdown shutdown在关机的时候会通知所有用户 shutdown –r now 现在重启 shutdown now 现在关机 shutdown +5 过5分钟关机 shutdown –c ...

  5. Django drf:认证及组件、token、局部钩子源码分析

    一.drf认证功能 二.token讲解 三.局部钩子源码分析 一.drf认证功能 1.认证简介: 只有认证通过的用户才能访问指定的url地址,比如:查询课程信息,需要登录之后才能查看,没有登录则不能查 ...

  6. vs2010 glfw glew glad glm 配置

    OpenGL: Configuring GLFW and GLEW in Visual C++ Express Posted by Dimitri | Aug 14th, 2013 | Filed u ...

  7. c线程使用锁控制并发

    // // Created by gxf on 2019/12/16. // #include <stdlib.h> #include <stdio.h> #include & ...

  8. 说一下 synchronized 底层实现原理?(未完成)

    说一下 synchronized 底层实现原理?(未完成)

  9. zend studio 13.6.1中文乱码的解决办法

    进入窗口--->首选项--->常规--->工作空间 window=>preference=>General=>workspace 照图设置后重启软件即可

  10. Ubuntu死机解决方法汇总

    为什么不建议强制关机 如果长按电源按键强制关机,有可能损坏硬件或者丢失数据,甚至导致磁盘坏道! 其实, 大部分时候的死机是假死, 不是真死... 有时候鼠标还能动呢. 还有一个原因: 对于平时忠贞不二 ...