前端知识点回顾——koa和模板引擎
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和模板引擎的更多相关文章
- 前端知识点回顾——HTML,CSS篇
前端知识点回顾篇--是我当初刚转行为了面试而将自己学过的前端知识整理成的一份笔记,个人目的性很强,仅供参考. doctype 有什么用 doctype是一种标准通用标记语言的文档类型声明,目的是告诉标 ...
- 前端数据渲染及mustache模板引擎的简单实现
早期数据渲染的几种方式 在模板引擎没有诞生之前,为了用JS把数据渲染到页面上,诞生了一系列数据渲染的方式. 最最基础的,莫过于直接使用DOM接口创建所有节点. <div id="roo ...
- 前端学PHP之自定义模板引擎
前面的话 在大多数的项目组中,开发一个Web程序都会出现这样的流程:计划文档提交之后,前端工程师制作了网站的外观模型,然后把它交给后端工程师,它们使用后端代码实现程序逻辑,同时使用外观模型做成基本架构 ...
- 前端学PHP之Smarty模板引擎
前面的话 对PHP来说,有很多模板引擎可供选择,但Smarty是一个使用PHP编写出来的,是业界最著名.功能最强大的一种PHP模板引擎.Smarty像PHP一样拥有丰富的函数库,从统计字数到自动缩进. ...
- koa art-template模板引擎的使用
art-template 模板引擎介绍 art-template 是一个简约.超快的模板引擎. 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行 性能,并且同 ...
- 前端知识点回顾之重点篇——ES6的Promise对象
Promise Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异 ...
- 前端知识点回顾之重点篇——JavaScript异步机制
JavaScript异步机制 来源:https://www.cnblogs.com/zhaodongyu/p/3922961.html JavaScript是单线程异步执行的,单线程意味着代码在任务队 ...
- 前端知识点回顾之重点篇——CSS中flex布局
flex布局 来源: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 采用 Flex 布局的元素 ...
- 前端知识点回顾——Reactjs
React.js 编写react需要安装的三个开发环境下的模块 babel 解析JSX react 实现ui用户界面 react-dom 处理dom JSX:在JavaScript里面写html代码( ...
随机推荐
- Eclipse中如何创建一个完整的Maven-Web项目
Maven Web项目搭建 1.首先确保本地开发环境搭建完毕(jdk,maven). 2.打开Eclipse,新建Maven项目.选择Maven Project选项. 3.将第一项:Create a ...
- hashCode 及hashcode与equals的区别
1.hashCode是jdk根据对象的地址或者字符串或者数字算出来的int类型的数值 详细了解请 参考 [1] public int hashCode()返回该对象的哈希码值.支持此方法是为了提高哈 ...
- Linux常用命令及文件管理
Linux上的文件管理类命令都有哪些,其常用的使用方法及其相关示例演示. 目录解释: .代表此层目录: .. 代表父目录:-代表前一个目录:~代表是家目录. (1)ls命令(显示) -a:列出所有文 ...
- java.lang.IllegalStateException: Cannot initialize context because there is already a root application context present
@Controller@ComponentScan@Configuration@EnableScheduling@EnableAutoConfiguration(exclude={DataSource ...
- python3 准备
一.前言 1.Python是著名的“龟叔”Guido van Rossum发明的 2.python分为python2和python3两大版本,python2渐渐被淘汰,建议使用python3 3.py ...
- MYSQL参数说明
[mysqld] character_set_server=utf8 #慢日志时间 long_query_time=1 #开启慢日志 slow_query_log=TRUE #慢日志位置 slow_q ...
- python c++ 混合编程中python调用c++string返回类型的函数,python中返回为数字的解决办法
本随笔解决 Python使用ctypes 调用c++dll 字符串返回类型函数,在python中显示为数字:原文解决方案见so: https://stackoverflow.com/questions ...
- python协程初步---一个迭代器的实现
一般认为迭代器就是实现了两个方法__iter__和__next__ 先创建这样一个类 from collections import Iterable from collections import ...
- 5、获取Class中的字段
5.获取Class中的字段 5.1 getField(String name) 只获取共有的字段 返回一个 Field对象,它反映此表示的类或接口的指定公共成员字段 类对象. /** * 获取字节码文 ...
- Air Raid POJ - 1422 【有向无环图(DAG)的最小路径覆盖【最小不相交路径覆盖】 模板题】
Consider a town where all the streets are one-way and each street leads from one intersection to ano ...