egg.js的入门使用指南

简介

egg.js 是阿里在 koa2 基础上开发的 Node.js 框架,相信如果你有 express 和 koa2 开发经验的话,一定会喜欢上这个简洁易用的框架的。

安装

npm install egg-init -g

在终端中运行以下命令即可安装 egg.js 脚手架,这个命令只需要运行一次。

创建项目

egg-init <项目名称> -type=simple

不必我多说,下一步就是安装依赖

cd <项目名称>
npm install

运行项目

npm run dev

即可在控制台中启动项目,默认访问地址为:http://127.0.0.1:7001

访问并测试

  在浏览器中打开http://127.0.0.1:7001 ,即可看到 hi, egg 的响应,代表项目顺利的构建并运行。

目录结构

  目录结构并不复杂,主要的关注点是appconfig文件夹,config 文件夹放的是项目的配置文件,app 则表示我们的应用,注意: 约定要大于配置 ,我们需要在 app 目录下编写 MVC 的架构。

Hello,World

  用 vscode 打开项目,打开 app 目录,可以看到 router.js,这就是我们的路由配置文件了。

'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
};

  文件里默认给我们配置了根路由,它被定向到了 controller 目录下的 home 下的 index 方法

'use strict';

const Controller = require('egg').Controller;

class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    ctx.body = 'hi, egg';
  }
}

module.exports = HomeController;

  可以看到,这就是我们在测试的时候看到 "hi,egg" 的控制器的效果。

  我们试着为它再添加一个方法,我们在以上代码中可以看出,控制器需要继承Controller类,this.ctx.body就是指服务器给客户端的响应,而且方法本身需要被 async 包裹。

async hello() {
   this.ctx.body = 'hello world';
}

  这样我们就为它添加了一个控制器方法,但是还没有为它配置路由,回到router.js文件。

'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
  router.get('/hello', controller.home.hello);
};

  保存可触发热重载,在浏览器中访问 http://127.0.0.1:7001/hello 即可看到效果。

我们可以试着为它添加新的控制器而不是控制器方法:

在 controller 目录下新建一个文件admin.js

这里推荐大家安装 vscode 的 eggjs 扩展,可以为我们快速生成代码

  安装完扩展后,在 admin.js 中输入 egg controller 按下 tab 即可生成控制器类的基础代码,然后用同样的方法在 router.js 中添加相应的路由即可。

静态资源

  非常简单,在 app 目录下的 public 文件夹就是静态资源文件夹,需要被暴露出去的静态资源都放在这里就可以了。

模板引擎

  在 app 目录下新建一个文件夹view(千万不要随便起名字,牢记约定大于配置的原则)

以 ejs 模板引擎为例(我个人最喜欢的 Node 模板引擎):

npm i egg-view-ejs --save

config/plugin.js里添加下面一段代码:

exports.ejs = {
  enable: true,
  package: 'egg-view-ejs',
}

config.default.js中的导出对象里添加:

config.view = {
    mapping: {
    '.html': 'ejs' 
  }
}

'.html' 是模板引擎的后缀名,也可以选择使用 '.ejs'

然后在 view 目录下新建文件index.html,然后在控制器中使用 this.ctx.render('index.html') 即可完成 ejs 模板引擎的渲染。

    大白兔
    大白兔  2020-06-27, 13:00

    精文,又学到一个框架