前言
本文是根据抖音哲玄《大前端全栈实践》课程学习之后所记录的笔记，该课程运用面向对象的思想，结合 Koa 洋葱圈模型开发一款适用于企业级项目的框架，解决绝大部分工作中遇到的 CRUD 问题，很多项目从 CV 组件库代码到 CV 基于组件库封装的配置代码，此门课程所搭建的框架在解决工作中重复 CV 代码的思路，为前端开发提供了新思想，具有创新性。
elpise 项目目录
|-- app # 核心应用文件夹，存放所有业务逻辑
|-- controller # 控制器：处理具体业务逻辑，接受请求，返回响应
|-- service # 服务层：提供具体数据操作，可能涉及到数据库操作
|-- router # 路由：定义 API 路由和页面路由
|-- middleware # 中间件：对请求和响应进行处理，进行日志、认证等操作
|-- public # 存放静态文件（如：HTML、CSS、JS、图片等）
|-- router-schema # 路由参数的校验规则（可以使用 Joi 或其他库）
|-- extend # 扩展：可以用于扩展 Koa 实例的功能（如日志记录）
|-- config # 配置文件：存放各种环境变量和配置文件
|-- logs # 存放日志文件
|-- utils # 工具类：封装常用的工具方法
|-- elpise-core # 框架核心文件夹，封装 Koa 相关基础设施
|-- loader # 加载器：加载配置、路由、服务等模块
|-- middleware.js # Koa 中间件配置文件
|-- config.js # 配置挂载文件：配置全局变量，挂载环境等
|-- controller.js # 控制器挂载文件
|-- extend.js # 扩展挂载文件：扩展 Koa 实例功能
|-- router.js # 路由挂载文件：注册路由规则
|-- service.js # 服务挂载文件：挂载服务层
|-- env.js # 环境变量配置
|-- index.js # 启动入口文件
|-- node_modules # 存放所有安装的 npm 包
|-- .gitignore # Git 忽略文件，忽略不需要跟踪的文件
|-- .eslintignore # ESLint 忽略文件
|-- .eslintrc # ESLint 配置文件
|-- package.json # 项目依赖和配置信息
|-- README.md # 项目说明文档
elpise项目的理解
创建koa实例以后采用koa-router去发起页面请求或者接口请求,在响应页面和接口请求这中间对页面请求和接口请求采用中间件进行一些处理。比如在页面响应时，如果遇到没有的路径，需要进行重定向处理，这要考虑临时重定向还是永久重定向，当然了，这里采用临时重定向，例如用户访问http:localhost:8080/view/page1, 这个页面没有时，需要临时重定向到首页，以防后期开发/view/page1还能正常响应此页面。在接口响应时，首先需要对代码进行异常捕获，比如返回的参数定义是否有误，有误则抛出错误，其次是接口的安全性，这里采用签名认证方式，结合接口请求时间限定的方式，当某个接口请求时需要传headers参数，包括signKey(唯一key)与s_t(请求时间），中间件需要拿到这两个参数进行安全校验,再其次是API参数校验，拼写是否正确，是否必传等，这些都是中间件去完成的，而这些操作起到了兜底的作用，还有安全性的作用。
思维导图
运行前
|-- app
|-- controller # 接口请求定义，拿数据，响应参数等处理
|-- extend # 扩展，例如后端打印日志打印于文件中逻辑处理
|-- middleware # 中间件，对 API 请求和页面请求进行处理
|-- public # 存放前端页面
|-- router # 请求 API/页面方法定义
|-- router-schema # 定义接口参数校验规则
|-- service # 服务层，提供数据，后期可能连接数据库
|-- middleware.js # 中间件，模板渲染逻辑在这里，归拢调用中间件方法
解析器
|-- elpise-core
|-- loader
|-- config.js # 挂载环境变量到 Koa 实例上
|-- controller.js # 挂载 app/controller 方法到 Koa 实例上
|-- extend.js # 挂载 app/extend 方法到 Koa 实例上
|-- middleware.js # 挂载 app/middleware 方法到 Koa 实例上
|-- router.js # 注册所有路由
|-- router-schema.js # 挂载 app/router-schema 对象到 Koa 实例上
|-- service.js # 挂载 app/service 方法到 Koa 实例上
运行时
API 请求 / 页面请求 => {middleware 中间件} => API 响应 / 页面响应
