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. 利用jenkens+github实现简单的CI/CD

    一  获取github accessToken 依次点击 settings----> Developer settings --->Personal access tokens  到这里如 ...

  2. EditText编辑框

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  3. PAT Basic 1050 螺旋矩阵 (25 分)

    本题要求将给定的 N 个正整数按非递增的顺序,填入“螺旋矩阵”.所谓“螺旋矩阵”,是指从左上角第 1 个格子开始,按顺时针螺旋方向填充.要求矩阵的规模为 m 行 n 列,满足条件:m×n 等于 N:m ...

  4. 用js刷剑指offer(跳台阶)

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 牛客网链接 思路 这一题和斐波那契数列思路完全一样. 假如青蛙从第n个 ...

  5. 【转】SpringBoot自定义序列化的使用方式--WebMvcConfigurationSupport

    场景及需求: 项目接入了SpringBoot开发,现在需求是服务端接口返回的字段如果为空,那么自动转为空字符串. 例如:[     {         "id": 1,       ...

  6. aiops常用算法

    1.数据聚合/关联技术 概念聚类算法AOI分类算法K近邻/贝叶斯分类器/logistic回归(LR)/支持向量机(SVM)/随机森林(RF) 2.数据异常点检测技术独立森林算法 3.故障诊断和分析策略 ...

  7. [ 转载 ] Java基础二

    前言 关于赢在面试的Java题系列基本收集整理完成了,所有题目都是经过精心挑选的,很基础又考验求职者的基本功,应该说被面试到的几率很大.这里整理挑选出来供大家面试前拿来看一看,所有题目整理自网络,有一 ...

  8. ansible的安装和简单使用

    ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具的优点,实现了批量系统配置.批量程序部署.批量运行命令等功能.ansible是基于模块工作的,本身没有批量部署的能力.真 ...

  9. django中权限控制到按钮级别

    权限控制到按钮级别 :          1.思路 :                  由于每个按钮都能认为是一个权限,所以每个按钮都会有一个自己的路径,这些路径都在用户登录时保存在了session ...

  10. 「NOI2015」荷马史诗 (k叉huffman树/k叉合并果子)

    是个多叉huffman树,思想类比合并果子. 具体见 CrazyDave 的博客 CODE #include <bits/stdc++.h> using namespace std; ty ...