一：什么是Egg? 它能做什么？
Egg.js是nodejs的一個框架，它是基於koa框架的基礎之上的上層框架，它繼承了koa的，它可以幫助開發人員提高開發效率和維護成本。
Egg約定了一些規則，在開發中，我們可以按照一套統一的約定進行應用開發，團隊內部使用這種方式開發可以減少開發人員的學習成本。
Express也是Node.js的一個框架，express簡單且擴展性強，但是express框架缺少了一些約定，不同的開發者會寫出不同的代碼，適合做個人項目，不太適合團隊開發，而Egg它約定了一些規則，對整個團隊開發效率會提高。
官網對Egg有如下特性：
1. 可以基於Egg定制上層框架的能力。
2. 高度可擴展的插件機制。
3. 內置多進程管理。
4. 基於koa開發的，性能好。
5. 框架穩定，測試覆蓋了高。
6. 漸進性開發。
二：使用egg快速生成項目 (根據官網來學習的)
官網有腳手架提供，只需要如下幾條命令即可快速生成項目：如下命令：
npm i egg-init -g egg-init egg-example --type=simple cd egg-example npm i
生成項目后，我們可以使用 npm run dev 啟動即可。
我們也可以手動搭建項目：
1. 初始化目錄結構：
$ mkdir egg-demo1 $ cd egg-demo1 $ npm init $ npm i egg --save $ npm i egg-bin -- save-dev
2. 在package.json文件中加上 scripts 啟動命令如下：
{ "name": "egg-demo1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "egg-bin dev" }, "author": "", "license": "ISC", "dependencies": { "egg": "^2.14.2" }, "devDependencies": { "egg-bin": "^4.9.0" } }
3. 在項目中的跟目錄新建 app文件夾，再在下面新建 controller文件夾，在該文件夾下新建 home.js，因此代碼如下：
// app/controller/home.js const Controller = require('egg').Controller; class HomeController extends Controller { async index() { this.ctx.body = 'Hello world'; } } module.exports = HomeController;
4. 在app文件下新建router.js ，配置路由映射，如下代碼：
module.exports = app => { const { router, controller } = app; router.get('/', controller.home.index); }
5. 在項目的根目錄下新建 config文件夾，在該文件夾下新建 config.default.js， 簡單的代碼如下：
// 下面是我自己的 Cookie 安全字符串密鑰 exports.keys = '123456';
因此項目的總目錄結構如下：
egg-demo1 ├── app │ ├── controller │ │ └── home.js │ └── router.js ├── config │ └── config.default.js └── package.json
6. 啟動項目，使用命令 npm run dev, 如下所示：
我們打開瀏覽器訪問 http://127.0.0.1:7001/ 可以看到如下所示了：
三：靜態資源
Egg內置了static插件，因此我們可以把靜態資源放在 app/public 下即可：目錄結構如下：
egg-demo1 ├── app │ ├── controller │ │ └── home.js │ └── router.js │ ├──public | | |---css | | | |-- index.css | | |---js | | | |-- index.js ├── config │ └── config.default.js └── package.json
四：模板渲染
4.1 有時候我們需要讀取數據后渲染模板，然后呈現給用戶，因此我們需要引入對應的模板引擎。因此我們可以使用 Nunjucks 來渲染，先安裝對應的插件 egg-view-nunjucks
npm i egg-view-nunjucks --save
安裝完成后，我們需要開啟插件，因此我們需要在 app/config 下新建 plugin.js 來開啟插件配置功能，如下代碼：
// app/config/plugin.js exports.nunjucks = { enable: true, package: 'egg-view-nunjucks' };
在 config/config.default.js 代碼也要加上對應的配置，如下代碼：
// 下面是我自己的 Cookie 安全字符串密鑰 exports.keys = '123456'; // 添加view配置 exports.view = { defaultViewEngine: 'nunjucks', mapping: { '.tpl': 'nunjucks' } };
4.2 為頁面編寫模板文件，我們一般是放在 app/view 目錄下，因此我們需要在app下再新建一個 view文件夾。
<!-- app/view/index/list.tpl --> <html> <head> <title>第一天學習egg</title> <link rel="stylesheet" href="/public/css/index.css" /> </head> <body> <ul class="view-list"> {% for item in list %} <li class="item"> <a href = "{{ item.url }}">{{ item.title }}</a> </li> {% endfor %} </ul> </body> </html>
4.3 添加 Controller 代碼：代碼如下：
// app/controller/index.js const Controller = require('egg').Controller; class IndexController extends Controller { async list() { const dataList = { list: [ { id: 1, title: '今天是我第一天學習egg了', url: '/index/1' }, { id: 2, title: '今天是我第一次學習egg了', url: '/index/2' } ] }; await this.ctx.render('index/list.tpl', dataList); } } module.exports = IndexController;
4.4 添加 Router 路由，代碼如下：
module.exports = app => { const { router, controller } = app; router.get('/', controller.home.index); router.get('/index', controller.index.list); }
現在我們再運行下 npm run dev 后，訪問下：http://127.0.0.1:7001/index 就可以看到如下頁面了，
注意：開發期默認開啟了 development 插件，修改后端代碼后，保存后會重新打包的。
其他的待續~ 慢慢來學習~