NodeSever-Egg | 全栈大前端

# Egg-基础全面讲解系列

一文看懂 Eggjs-基础全面讲解（上） https://juejin.im/post/5d357f0e51882563914b49bb (opens new window)
一文看懂 Eggjs-基础全面讲解（中） https://juejin.im/post/5d36679ce51d45554877a6ab (opens new window)
一文看懂 Eggjs-基础全面讲解（下） https://juejin.im/post/5d37ba17f265da1bc94f2f97 (opens new window)
一文看懂 Eggjs-基础全面讲解（完结） https://juejin.im/post/5d38160c51882551c37fbcd2 (opens new window)

# 前言

前端时间抽出时间针对Koa2 (opens new window)源码进行了简单的学习，koa 源码是一个很简单的库，针对分析过程，想手把手的实现一个类型koa 的框架，其代码 (opens new window), 根据一步步的完善实现一个简单版本的 Koa, 每一个步骤一个Branch ，如： stpe-1 (opens new window), 对应的是我想实现第一步的代码，代码仅供自己简单的学习，很多地方不完善，只是想体验下 Koa 的思想。下面几点是我对 Koa 的简单理解:

所有的 NodeJS 框架最基本的核心就是通过原生库http or https启动一个后端服务http.createServer(this.serverCallBack()).listen(...arg)，然后所有的请求都会进入serverCallBack方法，然后我们可以通过拦截，在这个方法中处理不同的请求

Koa 是一个洋葱模型，其是基于中间件来实现的.通过use来添加一个中间件， koa-router其实就是一个koa的中间件，我们的所有的请求都会将所有的中间件都执行一遍，洋葱模型如下图所示

上面是我对 Koa 源码分析的一些简单的理解，后面我会将对 Koa 的理解，进一步的记录下来。 Koa 是一个很小巧灵活的框架，不像 Express, Express 已经集成了很多的功能，很多功能不再需要第三方的框架，比如说路由功能， Koa 需要引用第三方的库 koa-router 来实现路由等。但是 express 则不需要，下面是 Koa 和 Express, 两个实现一个简单的功能的 Demo , 我们可以比较下其使用方式：

    // Express
    const express = require(<span class="hljs-string">'express'</span>)
    const app = express()

    app.get(<span class="hljs-string">'/'</span>, <span class="hljs-keyword">function</span> (req, res) {
      res.send(<span class="hljs-string">'Hello World!'</span>)
    })

    app.listen(3000, <span class="hljs-function"><span class="hljs-title">function</span></span> () {
      console.log(<span class="hljs-string">'Example app listening on port 3000!'</span>)
    })
    <span class="copy-code-btn">复制代码</span>`</pre><pre>`// Koa
    var Koa = require(<span class="hljs-string">'koa'</span>);
    // 引用第三方路由库
    var Router = require(<span class="hljs-string">'koa-router'</span>);

    var app = new Koa();
    var router = new Router();
    router.get(<span class="hljs-string">'/'</span>, (ctx, next) =&gt; {
      // ctx.router available
    });
    // 应用中间件： router
    app
      .use(router.routes())
      .use(router.allowedMethods()); 
    app.listen(3000);
    <span class="copy-code-btn">复制代码</span>`</pre>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

哈哈，我们上面说了很多的废话(文字表达能力问题)，其实我是想分析下，怎么基于 Koa 框架去应用， eggjs (opens new window)就是基于 Koa 框架基础上实现的一个框架，我们下面来具体分析下eggjs 框架。

# Eggjs 基本使用

我们根据快速入门 (opens new window), 可以很快搭建一个 Egg 项目框架，

<pre>
  `$ npm i egg-init -g $ egg-init egg-example --type=simple ${" "}
  <span class="hljs-built_in">cd</span> egg-example $ npm i
  <span class="copy-code-btn">复制代码</span>`
</pre>

1
2
3
4
5

我们可以用npm run dev 快速启动项目.然后打开localhost:7001,就可以看到页面输出：

hi, egg.

说明我们项目初始化已经完成，而且已经启动成功。我们现在可以学习下 egg 项目生成的相关代码。其代码文件结构如下:

分析整个文件结构，找了整个项目都没有发现 app.js 之类的入口文件(我一般学习一个新的框架，都会从入口文件着手), 发现app 文件夹下面的应该对项目很重要的代码：

1, controller 文件夹，我们从字面理解，应该是控制层的文件，其中有一个 home.js 代码如下:

    <span class="hljs-string">'use strict'</span>;

    const Controller = require(<span class="hljs-string">'egg'</span>).Controller;

    class HomeController extends Controller {
      async <span class="hljs-function"><span class="hljs-title">index</span></span>() {
        this.ctx.body = <span class="hljs-string">'hi, egg'</span>;
      }
    }

    module.exports = HomeController;

    <span class="copy-code-btn">复制代码</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

这个类继承了 egg 的 Controller 类, 暂时还没有发现这个项目哪个地方有引用这个Controller 类?

2, 一个router.js 文件，从字面意义上我们可以理解其为一个路由的文件，其代码如下:

    <pre>`<span class="hljs-string">'use strict'</span>;

    /**
     * @param {Egg.Application} app - egg application
     */
    module.exports = app =&gt; {
      const { router, controller } = app;
      router.get(<span class="hljs-string">'/'</span>, controller.home.index);
    };

    <span class="copy-code-btn">复制代码</span>`</pre>

1
2
3
4
5
6
7
8
9
10
11
12

这个文件暴露了一个方法，从目前来猜测应该就是路由的一些配置，但是找遍整个项目也没有发现，哪个地方引用了这个方法， router.get('/', controller.home.index);, 但是从这个 get 方法的第二个参数，其似乎指向的是 Controller 里面的 home.js 文件 index 方法，我们可以尝试修改下 home.js 中的this.ctx.body = 'hi, egg -> hello world!';, 然后重新运行npm run dev, 发现页面输出是hi, egg -> hello world!, 看来controller.home.index这个指向的是 home.js 里的 index 方法无疑了，但是controller.home.index这个 index 方法绑定的是在一个controller对象上，什么时候绑定的呢?

我们接下来带着如下疑问来学些eggjs :

    > *   <font color="red">没有类似的app.js 入口文件，运行`npm run dev` 如何启动一个项目(启动server, 监听端口， 添加中间件)?</font>
    > *   <font color="red">我们打开页面`http://localhost:7001/`,怎么去通过router.js 去查找路由的，然后调用对应的回调函数?</font>
    > *   <font color="red">Controller 是如何绑定到app 上面的controller 对象上的?</font>

1
2
3

# eggjs 启动

我们先查看一开始用egg-init命令创建的项目的 package.json 文件,查看scripts，里面有一系列的命令，如下图:

← NodeSever主流框架横评 NodeSever-Nest →

# Egg-基础全面讲解系列

# 前言

# Eggjs 基本使用

# eggjs 启动

# egg-bin

# egg-cluster

# egg & egg-core

# EggApplication(egg/lib/egg.js)

# 思考:

# Application(egg/lib/application.js)

# `this.loadApplicationExtend();`

# `this.loadResponseExtend();` `this.loadResponseExtend();` `this.loadContextExtend();` `this.loadHelperExtend();`,

# `this.loadService();`

# `this.loadMiddleware();`

# `this.loadController();`

# `this.loadRouter();`

# 总结

# Egg-基础全面讲解系列

# 前言

# Eggjs 基本使用

# eggjs 启动

# egg-bin

# egg-cluster

# egg & egg-core

# EggApplication(egg/lib/egg.js)

# 思考:

# Application(egg/lib/application.js)

# this.loadApplicationExtend();

# this.loadResponseExtend(); this.loadResponseExtend(); this.loadContextExtend(); this.loadHelperExtend();,

# this.loadService();

# this.loadMiddleware();

# this.loadController();

# this.loadRouter();

# 总结

# `this.loadApplicationExtend();`

# `this.loadResponseExtend();` `this.loadResponseExtend();` `this.loadContextExtend();` `this.loadHelperExtend();`,

# `this.loadService();`

# `this.loadMiddleware();`

# `this.loadController();`

# `this.loadRouter();`