Egg入門學習(一)

時間 2019-11-12

標籤 egg 入門學習简体版

原文原文鏈接

一：什麼是Egg? 它能作什麼？
Egg.js是nodejs的一個框架，它是基於koa框架的基礎之上的上層框架，它繼承了koa的，它能夠幫助開發人員提升開發效率和維護成本。
Egg約定了一些規則，在開發中，咱們能夠按照一套統一的約定進行應用開發，團隊內部使用這種方式開發能夠減小開發人員的學習成本。css

Express也是Node.js的一個框架，express簡單且擴展性強，可是express框架缺乏了一些約定，不一樣的開發者會寫出不一樣的代碼，適合作我的項目，不太適合團隊開發，而Egg它約定了一些規則，對整個團隊開發效率會提升。html

官網對Egg有以下特性：
1. 能夠基於Egg定製上層框架的能力。
2. 高度可擴展的插件機制。
3. 內置多進程管理。
4. 基於koa開發的，性能好。
5. 框架穩定，測試覆蓋了高。
6. 漸進性開發。node

二：使用egg快速生成項目 (根據官網來學習的)git

官網有腳手架提供，只須要以下幾條命令便可快速生成項目：以下命令：github

npm i egg-init -g
egg-init egg-example --type=simple
cd egg-example
npm i

生成項目後，咱們可使用 npm run dev 啓動便可。express

咱們也能夠手動搭建項目：npm

1. 初始化目錄結構：json

$ 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 插件，修改後端代碼後，保存後會從新打包的。

其餘的待續~ 慢慢來學習~

github上的源碼