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. SAP UI5的support Assistant

    SAP UI5的support Assistant给UI5刚入门的开发人员提供了一种极便利的快速熟悉UI5代码的途径. 召唤方式: ctrl+shift+alt+p四个键同时按,在弹出的对话框里点击按 ...

  2. Hadoop错误:PipeMapRed.waitOutputThreads(): subprocess failed with code 1

    有一种原因是python文件中有语法或逻辑错误

  3. IDAPython实战项目——DES算法识别

    在CTF的逆向中我们需要的是找到加密的主函数,结合了yara的识别原理,通过对常量数组的引用的查找,一步步递归构建调用树.调用树根部就是可能的密码算法主函数. 由于这种办法需要常量分布于算法的各个步骤 ...

  4. ARP、Proxy ARP、Gratuitous ARP

    Proxy ARP 什么是Proxy ARP? 一个主机A(通常是路由器)有意应答另一个主机B的ARP请求(ARP requests).主机A通过伪装其身份,承担起将分组路由到真实目的地的责任.代理A ...

  5. 创建守护进程步骤与setsid()

    原创:http://www.cnblogs.com/mickole/p/3188321.html 一,守护进程概述 Linux Daemon(守护进程)是运行在后台的一种特殊进程.它独立于控制终端并且 ...

  6. php中float浮点型字段查询问题(数据对应不上)

    薪资表  查询员工提成时候  比如说表里面是88.8  查询出来则是89 反复调试 未果,最后查看表设计  把金额字段类型设置成float 最后换成double 解决问题!!!!

  7. linux 确定端口使用情况

    lsof -i:3533 确定端口已经在使用

  8. js 正则表达式将 p标签替换 span标签

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. TCP的半连接

    T C P提供了连接的一端在结束它的发送后还能接收来自另一端数据的能力.这就是所谓下载的半关闭.正如我们早些时候提到的只有很少的应用程序使用它.为了使用这个特性,编程接口必须为应用程序提供一种方式来说 ...

  10. linux基础知识和常用命令

    1.修改主机名 切换到root,然后执行 vim /etc/sysconfig/network,进入其中,更改hostname即可.insert进入修改,esc+:,wq保存退出. 2.用户切换 普通 ...