Egg前端服务框架初步了解

Egg前端服务框架初步了解

小鹿在最近学习知识的时候突然了解到了前端应用开发框架还有一个Egg,之前接触过的都是Express,第一次接触到Egg还是比较感兴趣的,所以记录一下。

Egg是什么

Egg 是一个基于 Node.jsKoa 构建的企业级、渐进式 Web 应用开发框架,由 阿里巴巴前端团队(现为蚂蚁集团)开源并维护。它的核心设计理念是:约定优于配置(Convention over Configuration),同时提供高度可扩展的插件机制,适合构建中大型后端服务,尤其在中文社区和企业中广泛使用。

image-20251117165052136

Egg在实际项目中使用

大体来说和小鹿之前接触的Springboot项目差不太多,但是还是有略微的小区别。核心的controller层和service层也都还是保留了。

my-egg-app/
├── app/
│   ├── controller/     # 控制器(处理 HTTP 请求)
│   ├── service/        # 服务层(业务逻辑,可调用数据库)
│   ├── router.js       # 路由配置
│   ├── public/         # 静态资源
│   └── extend/         # 扩展(如自定义 helper)
├── config/
│   ├── config.default.js   # 默认配置
│   └── plugin.js           # 插件启用配置
├── test/               # 单元测试
└── package.json

在这里若是创建控制器app/controller/home.js

const { Controller } = require('egg');

class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    // ctx.body = 'hi, egg';
    ctx.success({name:'小明'})
  }
}

module.exports = HomeController;

之后再配置路由 app/router.js

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

值得一提的是,egg集成了很多的插件包,在使用egg的时候可以快速的接入。

#MySQL
npm install egg-mysql

# Redis
npm install egg-redis

# CORS(前端跨域)
npm install egg-cors

# 参数校验
npm install egg-validate

# 静态资源服务
npm install egg-static

启用插件只需在 config/plugin.js 中写:

exports.mysql = {
  enable: true,
  package: 'egg-mysql',
};

什么是约定

上面写的egg的核心是约定优于配置,那么约定是什么呢?

🌰 举个生活中的例子:婚礼流程

假设你要办一场婚礼:

  • 没有约定:你得从零决定

    “几点接亲?要不要敬茶?谁致辞?戒指谁保管?流程音乐用什么?”
    每个细节都要自己定,新人和婚庆团队反复沟通,容易出错。

  • 有约定(比如中式传统婚礼):大家默认

    “早上 8 点接亲 → 敬茶 → 入场 → 证婚 → 敬酒”
    只要你说“按传统办”,婚庆公司就知道怎么做,你只需关注特殊需求(如“我要加无人机表演”)。

这就是“约定”
通过一套公认的标准流程,减少重复决策,提升协作效率

💻 在 Egg.js 中,“约定”具体指什么?

Egg 不强制你写一堆配置文件,而是规定了目录结构、文件命名、加载规则。只要你按这个“剧本”写代码,框架会自动识别并运行。

1. 目录结构约定

Egg 默认会自动加载这些目录中的文件:

app/controller/ 处理 HTTP 请求 文件名即控制器名(如user.jsctx.controller.user
app/service/ 业务逻辑层 文件名即服务名(如doc.jsctx.service.doc
app/router.js 路由定义 必须叫 router.js,Egg 自动加载
config/config.default.js 默认配置 文件名固定,按环境覆盖(如config.prod.js

✅ 你不需要写 require('./controller/user'),Egg 自动帮你加载。

2. 文件命名约定

  • 控制器类必须

    导出一个函数,返回 class

    // app/controller/user.js
    module.exports = app => {
    return class UserController extends app.Controller { // 必须继承 app.Controller
      async list() {
        this.ctx.body = '用户列表';
      }
    };
    };
  • 方法名直接对应路由处理函数:

    // router.js
    router.get('/users', controller.user.list); // 自动调用 user.js 中的 list 方法

3. 上下文(Context)扩展约定

  • 想给 ctx 添加自定义方法?放到 app/extend/context.js
// app/extend/context.js
module.exports = {
  success(data) {
    this.body = { success: true, data };
  }
};

然后在控制器中直接用:

this.ctx.success({ name: '小明' }); // 无需 import 或配置

image-20251117172837122

4. 配置覆盖约定

  • 开发环境:config/config.local.js
  • 测试环境:config/config.unittest.js
  • 线上环境:config/config.prod.js
    Egg 会自动按 NODE_ENV 加载对应配置,合并到 config.default.js 上。

✅ 如何快速掌握 Egg 的“约定”?

记住这几个核心原则:

写 API 接口 代码放app/controller/xxx.js
写业务逻辑 代码放app/service/xxx.js
定义路由 只改app/router.js
加全局方法 app/extend/对应文件
改配置 只动config/下的文件
加插件 config/plugin.js启用

💡 小技巧:如何知道 Egg 加载了哪些文件?

启动时加 DEBUG=egg-core:loader

DEBUG=egg-core:loader npm run dev

image-20251117173525463

版权声明:除特殊说明,博客文章均为夏夜小鹿原创,依据CC BY-SA 4.0许可证进行授权,转载请附上出处链接及本声明。 由于可能会成为AI模型(如ChatGPT)的训练样本,本博客禁止将AI自动生成内容作为文章上传(特别声明时除外)。如果您有什么想对小鹿说的,可以到留言板 进行留言
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇