koa框架会用也会写—(koa-view、koa-static)

Bertha 。 2022-04-23 02:36 319阅读 0赞

## Koa中常用的中间件： ##

*  koa-session：让无状态的http拥有状态，基于cookie实现的后台保存信息的session
 *  koa-mysql:封装了需要用到的SQL语句
 *  koa-mysql-session：当不想让session存储到内存，而想让session存储到mysql数据库中时使用
 *  koa-router：后台会接受到各种请求的url，路由会根据不同的url来使用不同的处理逻辑。
 *  koa-view：请求html页面时，后台会用模板引擎渲染数据到模板上，然后返回给后台
 *  koa-static：请求img、js、css等文件时，不需要其他逻辑，只需要读取文件
 *  koa-better-body：post上传文件时，解析请求体

## koa系列文章： ##

*  [koa框架会用也会写—(koa的实现)][koa_koa]
 *  [koa框架会用也会写—(koa-router)][koa_koa-router]
 *  [koa框架会用也会写—(koa-view、koa-static)][koa_koa-view_koa-static]
 *  [koa框架会用也会写—(koa-bodyparser、koa-better-body)][koa_koa-bodyparser_koa-better-body]

## 静态资源和动态资源 ##

在网络请求中，请求往往分成两种类型，一种是静态资源，直接从服务器的文件存储中读取，一种是动态资源，一般需要先从数据库获取数据，然后经过一定的处理，最后返回给客户端。

*  koa-static：用来处理静态资源的访问，因为它不涉及其他的处理过程，只是单纯的读取文件，所以单独抽离出来。
 *  koa-view是用来将数据和模板结合渲染html页面时采用的，渲染模板的逻辑都市一样的，所以也单独抽离出来。

## koa-static ##

*  判断请求的文件是否存在，如果存在读取文件返回
 *  如果请求的文件不存在，则默认查看当前文件下是否有index.html,如果存在返回当前文件下的index.html

根据上面的思想，所以实现简单版的static,可以将static单独存在一个js文件按中，然后require进来，这样使用和koa一样：

## koa-view ##

### koa-view使用 ###

以ejs模板为例，假设要渲染的模板是：

//template.html
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <%arr.forEach(a=>{%>
        <li><%=a%></li>
      <%})%>
    </body>
    </html>
    复制代码

渲染页面的逻辑：

### ejs渲染的原理 ###

koa中会设置采用渲染模板的方式，一般会采用ejs模板引擎渲染页面：

*  匹配<%=xx%>将其变成$\{xx\}
 *  匹配<%xxxx%>将xxxx中的内容拼接起来变成一个函数字符串
 *  然后通过new Function函数字符串生成一个函数执行数据就会返回渲染后的字符串

//简化渲染模板便于理解，去掉其他标签，真实渲染时，这些标签时存在的
    <body>
      <%arr.forEach(a=>{%>
        <li><%=a%></li>
      <%})%>
    </body>
    复制代码

ejs中的render函数，简化版本：

### koa-view的原理 ###

渲染页面的逻辑：

## 结语 ##

koa-router中间件的原理基本就介绍完了，后面一起学习kao的其他中间件：

*  [koa框架会用也会写—(koa-bodyparser、koa-better-body)][koa_koa-bodyparser_koa-better-body]

转载：https://juejin.im/post/5baefe335188255c6a0449c8

[koa_koa]: https://juejin.im/post/5bab0c415188255c8473b123
[koa_koa-router]: https://juejin.im/post/5bad90b8f265da0aac6fe9ee
[koa_koa-view_koa-static]: https://juejin.im/post/5baefe335188255c6a0449c8
[koa_koa-bodyparser_koa-better-body]: https://juejin.im/post/5baf63a8f265da0acf0af160