全栈里程碑一:elips-core

240 阅读3分钟

文档知识来源:抖音 “哲玄前端”,《大前端全栈实践课》

loader顺序

1.loader文件目录
elips-core
    |
    | loader
        |
        | config.js
        | controller.js
        | extend.js
        | middleware.js
        | router-schema.js
        | router.js
        | service
    | app
        | 
        | controller
            |
            | base.ja
            | project.js
            | view.js
        | extend
            | logger.js
        | middleware
            | api-params-verify.js
            | api-sign-verify.js
            | err-handler.js
        | public
            |
            | output
                |
                | entry.page1.tpl
                | entry.page2.tpl
            | static
                |
                | logo,png
                | normailze.css
        | router
            |
            | project.js
            | view.js
        | router-schema
            |
            | project.js
        | service
            | base.js
            | paoject.js
        | middleware.js
     | config
         | 
         | config.beta,js
         | config.local.js
         | config.prod.js
index.js
2.分析每个文件用处

(1)index.js (与elips-core同级),项目启动的入口

(2) elips-core下的index.js,项目的配置,也就是这里引入了loader(loader文件下的每一个)

(3)loader下的每个文件,都属于公共的配置类型,作用也就是拿到app里对应文件夹下的每个文件,进行挂载;

loader

(4)app下的每个文件,对应着loader下的文件,这里的每个文件作用都不同;

project:api请求的一系列操作;

view:页面请求的一系列操作

base:每个模块对应的基础配置;

api-params-verify:api参数校验;

api-sign-verify:api签名有效期校验;

err-handler:错误校验;

middleware:全局中间件的文件

3.结合页面请求,分析loader的一个顺序的过程
  • npm run dev

先进行了config---

  • 当页面输入之后,请求页面,渲染内容;

---middleware(监控页面请求的成功或失败)----router,页面路由请求,一个公共的位置--- controller,拿到后面的参数,具体页面请求的页面---service---成功则渲染页面

  • 点击请求api接口,拿到get请求数据,校验签名有效期,参数校验,成功后返回200,不成功返回错误

----调用api接口--middleware(先监控成功或者失败)--校验签名有效期----校验参数routerSchema ----成功之后-----controller---service拿到数据---返回200

综上,顺序可能是,config---middleware---routerSchema ---controller--service---extend---router

【config其实是最基础的

middleware, controller, routerSchema 运行时依赖 service 的能力

extend 在用来创建数据库连接等

router 初始化的时候需要依赖 middleware, routerSchema, controller】

洋葱圈模型

从外到里,然后再从里到外,先进后出

在 Koa 中,每个中间件都会接收两个参数:ctxnextctx 是一个封装了 Node.js 原生请求和响应对象的上下文对象,而 next 是一个将控制权转交给下一个中间件的函数。如果不调用 next(),则中间件链将会中断。

图片.png

1>先入后出,

2>先路由出发,然后经过一个中间件,到达业务逻辑层处理,通过一个渲染页面等等,然后去服务层去读取MySQL,查询日志,调用外部服务等操作,然后在返回给业务层,

出中间件,然后响应给客户端(浏览器);

3>目的:实现解析器的代码,达到承接用户的文件(左侧部分图),可以解析为第二点的效果(右侧部分图);

思考问题:

app/middleware/api-params-verify.js,if(valid && params && schema.params){} 是否可以拿取到params

解答:这里的params为undefined,因为在该中间件获取参数params时,路由上的参数还未加载

【由于 params 是由 koa-router 匹配到第一个满足条件的路由后生成的对象, 在 koa 中间件执行时, koa-router 还未执行, 所以 ctx.params 还未被赋值】