投稿

egg.js：阿里出的web后台前端开发框架

Vedu • • 资源分享 • 阅读 1441

Egg.js 是什么?

Egg.js 是一个基于nodejs开发的，为企业级框架和应用而生，我们希望由 Egg.js 孕育出更多上层框架，帮助开发团队和开发人员降低开发和维护成本。

github地址：

https://github.com/eggjs/egg

特性

  • 提供基于 Egg 定制上层框架的能力
  • 高度可扩展的插件机制
  • 内置多进程管理
  • 基于 Koa 开发，性能优异
  • 框架稳定，测试覆盖率高
  • 渐进式开发

快速入门

本文将从实例的角度，一步步地搭建出一个 Egg.js 应用，让你能快速的入门 Egg.js。

环境准备

  • 操作系统：支持 macOS，Linux，Windows
  • 运行环境：建议选择 LTS 版本，最低要求 8.x。

快速初始化

我们推荐直接使用脚手架，只需几条简单指令，即可快速生成项目（npm >=6.1.0）:

$ mkdir egg-example && cd egg-example
$ npm init egg --type=simple
$ npm i

启动项目:

$ npm run dev
$ open http://localhost:7001

逐步搭建

通常你可以通过上一节的方式，使用 npm init egg 快速选择适合对应业务模型的脚手架，快速启动 Egg.js 项目的开发。

但为了让大家更好的了解 Egg.js，接下来，我们将跳过脚手架，手动一步步的搭建出一个 Hacker News。

注意：实际项目中，我们推荐使用上一节的脚手架直接初始化。

前端开发-阿里出的web后台开发框架egg.js

初始化项目

先来初始化下目录结构：

$ mkdir egg-example
$ cd egg-example
$ npm init
$ npm i egg --save
$ npm i egg-bin --save-dev

添加 npm scripts 到 package.json：

{
  "name": "egg-example",
  "scripts": {
    "dev": "egg-bin dev"
  }
}

编写 Controller

如果你熟悉 Web 开发或 MVC，肯定猜到我们第一步需要编写的是 Controller 和 Router。

// app/controller/home.js
const Controller = require(\'egg\').Controller;

class HomeController extends Controller {
  async index() {
    this.ctx.body = \'Hello world\';
  }
}

module.exports = HomeController;

配置路由映射：

// app/router.js
module.exports = app => {
  const { router, controller } = app;
  router.get(\'/\', controller.home.index);
};

加一个配置文件：

// config/config.default.js
exports.keys = <此处改为你自己的 Cookie 安全字符串>;

此时目录结构如下：

egg-example
├── app
│   ├── controller
│   │   └── home.js
│   └── router.js
├── config
│   └── config.default.js
└── package.json

好，现在可以启动应用来体验下

$ npm run dev
$ open http://localhost:7001

注意：

Controller 有 class 和 exports 两种编写方式，本文示范的是前者，你可能需要参考 Controller 文档。Config 也有 module.exports 和 exports 的写法，具体参考 Node.js modules 文档。

静态资源

Egg 内置了 static 插件，线上环境建议部署到 CDN，无需该插件。

static 插件默认映射 /public/* -> app/public/* 目录

此处，我们把静态资源都放到 app/public 目录即可：

app/public
├── css
│   └── news.css
└── js
    ├── lib.js
    └── news.js

模板渲染

绝大多数情况，我们都需要读取数据后渲染模板，然后呈现给用户。故我们需要引入对应的模板引擎。

框架并不强制你使用某种模板引擎，只是约定了 View 插件开发规范，开发者可以引入不同的插件来实现差异化定制。

更多用法参见 View。

在本例中，我们使用 Nunjucks 来渲染，先安装对应的插件 egg-view-nunjucks ：

$ npm i egg-view-nunjucks --save

开启插件：

// config/plugin.js
exports.nunjucks = {
  enable: true,
  package: \'egg-view-nunjucks\'
};
// config/config.default.js
exports.keys = <此处改为你自己的 Cookie 安全字符串>;
// 添加 view 配置
exports.view = {
  defaultViewEngine: \'nunjucks\',
  mapping: {
    \'.tpl\': \'nunjucks\',
  },
};

注意：是 config 目录，不是 app/config!

为列表页编写模板文件，一般放置在 app/view 目录下


<html>
  <head>
    <title>Hacker Newstitle>
    <link rel="stylesheet" href="/public/css/news.css" />
  head>
  <body>
    <ul class="news-view view">
      {% for item in list %}
        <li class="item">
          <a href="{{ item.url }}">{{ item.title }}a>
        li>
      {% endfor %}
    ul>
  body>
html>

添加 Controller 和 Router

// app/controller/news.js
const Controller = require(\'egg\').Controller;

class NewsController extends Controller {
  async list() {
    const dataList = {
      list: [
        { id: 1, title: \'this is news 1\', url: \'/news/1\' },
        { id: 2, title: \'this is news 2\', url: \'/news/2\' }
      ]
    };
    await this.ctx.render(\'news/list.tpl\', dataList);
  }
}

module.exports = NewsController;

// app/router.js
module.exports = app => {
  const { router, controller } = app;
  router.get(\'/\', controller.home.index);
  router.get(\'/news\', controller.news.list);
};

启动浏览器，访问 http://localhost:7001/news 即可看到渲染后的页面。

提示：开发期默认开启了 development 插件，修改后端代码后，会自动重启 Worker 进程。

编写 service

在实际应用中，Controller 一般不会自己产出数据，也不会包含复杂的逻辑，复杂的过程应抽象为业务逻辑层 Service。

我们来添加一个 Service 抓取 Hacker News 的数据 ，如下：

框架提供了内置的 HttpClient 来方便开发者使用 HTTP 请求。

// app/service/news.js
const Service = require(\'egg\').Service;

class NewsService extends Service {
  async list(page = 1) {
    // read config
    const { serverUrl, pageSize } = this.config.news;

    // use build-in http client to GET hacker-news api
    const { data: idList } = await this.ctx.curl(`${serverUrl}/topstories.json`, {
      data: {
        orderBy: \'"$key"\',
        startAt: `"${pageSize * (page - 1)}"`,
        endAt: `"${pageSize * page - 1}"`,
      },
      dataType: \'json\',
    });

    // parallel GET detail
    const newsList = await Promise.all(
      Object.keys(idList).map(key => {
        const url = `${serverUrl}/item/${idList[key]}.json`;
        return this.ctx.curl(url, { dataType: \'json\' });
      })
    );
    return newsList.map(res => res.data);
  }
}

module.exports = NewsService;

然后稍微修改下之前的 Controller：

// app/controller/news.js
const Controller = require(\'egg\').Controller;

class NewsController extends Controller {
  async list() {
    const ctx = this.ctx;
    const page = ctx.query.page || 1;
    const newsList = await ctx.service.news.list(page);
    await ctx.render(\'news/list.tpl\', { list: newsList });
  }
}

module.exports = NewsController;

还需增加 app/service/news.js 中读取到的配置：

// config/config.default.js
// 添加 news 的配置项
exports.news = {
  pageSize: 5,
  serverUrl: \'https://hacker-news.firebaseio.com/v0\',
};

编写扩展

遇到一个小问题，我们的资讯时间的数据是 UnixTime 格式的，我们希望显示为便于阅读的格式。

框架提供了一种快速扩展的方式，只需在 app/extend 目录下提供扩展脚本即可，具体参见扩展。

在这里，我们可以使用 View 插件支持的 Helper 来实现：

$ npm i moment --save
// app/extend/helper.js
const moment = require(\'moment\');
exports.relativeTime = time => moment(new Date(time * 1000)).fromNow();

在模板里面使用：


{{ helper.relativeTime(item.time) }}

编写 Middleware

假设有个需求：我们的新闻站点，禁止百度爬虫访问。

聪明的同学们一定很快能想到可以通过 Middleware 判断 User-Agent，如下：

// app/middleware/robot.js
// options === app.config.robot
module.exports = (options, app) => {
  return async function robotMiddleware(ctx, next) {
    const source = ctx.get(\'user-agent\') || \'\';
    const match = options.ua.some(ua => ua.test(source));
    if (match) {
      ctx.status = 403;
      ctx.message = \'Go away, robot.\';
    } else {
      await next();
    }
  }
};

// config/config.default.js
// add middleware robot
exports.middleware = [
  \'robot\'
];
// robot\'s configurations
exports.robot = {
  ua: [
    /Baiduspider/i,
  ]
};

现在可以使用 curl http://localhost:7001/news -A “Baiduspider” 看看效果。

更多参见中间件文档。

配置文件

写业务的时候，不可避免的需要有配置文件，框架提供了强大的配置合并管理功能：

  • 支持按环境变量加载不同的配置文件，如 config.local.js， config.prod.js 等等。
  • 应用/插件/框架都可以配置自己的配置文件，框架将按顺序合并加载。
  • 具体合并逻辑可参见配置文件。
// config/config.default.js
exports.robot = {
  ua: [
    /curl/i,
    /Baiduspider/i,
  ],
};

// config/config.local.js
// only read at development mode, will override default
exports.robot = {
  ua: [
    /Baiduspider/i,
  ],
};

// app/service/some.js
const Service = require(\'egg\').Service;

class SomeService extends Service {
  async list() {
    const rule = this.config.robot.ua;
  }
}

module.exports = SomeService;

目录结构

在快速入门中，大家对框架应该有了初步的印象，接下来我们简单了解下目录约定规范。

egg-project
├── package.json
├── app.js (可选)
├── agent.js (可选)
├── app
|   ├── router.js
│   ├── controller
│   |   └── home.js
│   ├── service (可选)
│   |   └── user.js
│   ├── middleware (可选)
│   |   └── response_time.js
│   ├── schedule (可选)
│   |   └── my_task.js
│   ├── public (可选)
│   |   └── reset.css
│   ├── view (可选)
│   |   └── home.tpl
│   └── extend (可选)
│       ├── helper.js (可选)
│       ├── request.js (可选)
│       ├── response.js (可选)
│       ├── context.js (可选)
│       ├── application.js (可选)
│       └── agent.js (可选)
├── config
|   ├── plugin.js
|   ├── config.default.js
│   ├── config.prod.js
|   ├── config.test.js (可选)
|   ├── config.local.js (可选)
|   └── config.unittest.js (可选)
└── test
    ├── middleware
    |   └── response_time.test.js
    └── controller
        └── home.test.js

如上，由框架约定的目录：

  • app/router.js 用于配置 URL 路由规则，具体参见 Router。
  • app/controller/** 用于解析用户的输入，处理后返回相应的结果，具体参见 Controller。
  • app/service/** 用于编写业务逻辑层，可选，建议使用，具体参见 Service。
  • app/middleware/** 用于编写中间件，可选，具体参见 Middleware。
  • app/public/** 用于放置静态资源，可选，具体参见内置插件 egg-static。
  • app/extend/** 用于框架的扩展，可选，具体参见框架扩展。
  • config/config.{env}.js 用于编写配置文件，具体参见配置。
  • config/plugin.js 用于配置需要加载的插件，具体参见插件。
  • test/** 用于单元测试，具体参见单元测试。
  • app.js 和 agent.js 用于自定义启动时的初始化工作，可选，具体参见启动自定义。关于agent.js的作用参见Agent机制。

由内置插件约定的目录：

  • app/public/** 用于放置静态资源，可选，具体参见内置插件 egg-static。
  • app/schedule/** 用于定时任务，可选，具体参见定时任务。

若需自定义自己的目录规范，参见 Loader API

  • app/view/** 用于放置模板文件，可选，由模板插件约定，具体参见模板渲染。
  • app/model/** 用于放置领域模型，可选，由领域类相关插件约定，如 egg-sequelize。

觉得效果不错的请帮忙加个关注点个赞，每天分享前端实用开发技巧

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/21973.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2021-03-19 07:33
下一篇 2021-03-21 11:50

相关推荐

发表评论

登录后才能评论