为了账号安全,请及时绑定邮箱和手机立即绑定

egg.js入门:新手必读指南

概述

本文介绍了egg.js入门的相关内容,包括Egg.js的基本概念、安装过程以及如何创建和配置第一个Egg.js应用。通过阅读,你可以快速了解Egg.js框架并开始构建Web应用。

Egg.js简介与安装

什么是Egg.js

Egg.js是一个基于Koa的Node.js框架,由阿里巴巴开源。它旨在提供一个高性能、易于扩展的Web应用开发环境。Egg.js的核心设计理念是通过约定优于配置,使得开发者可以快速地搭建起一个稳定且可维护的Web应用。

Egg.js的特点与优势

  • 约定优于配置:Egg.js通过预定义的约定减少了配置的复杂度,开发者不需要编写大量的配置文件就能快速搭建起应用。
  • 高性能:基于Koa框架,Egg.js能够提供高性能的服务端应用开发体验。
  • 模块化设计:Egg.js采用模块化设计,使得开发者可以很方便地扩展或定制应用的功能。
  • 丰富的插件与中间件:Egg.js内置了一套完整的中间件机制,支持各种插件的扩展。
  • 测试友好:Egg.js内置了简单的单元测试框架,方便开发者进行测试。

安装Node.js和Egg.js

  1. 安装Node.js

    首先,需要安装Node.js。访问Node.js官方网站下载最新版本的Node.js并安装。安装完成后,可以通过命令行检查Node.js是否安装成功:

    node -v
    npm -v

    这会显示Node.js和npm的版本信息。

  2. 安装egg CLI

    接下来,安装Egg.js的命令行工具egg-init,它可以帮助我们快速创建新的Egg.js项目。

    npm install egg-init -g

    安装完成后,可以通过命令行检查egg-init是否安装成功:

    egg-init -v
  3. 安装Egg.js框架

    安装Egg.js框架本身:

    npm install egg -g
创建第一个Egg.js应用

初始化项目

使用egg-init命令来初始化一个新的Egg.js项目。这里以创建一个名为my-egg-app的项目为例:

egg-init my-egg-app
cd my- Egg-app

安装依赖

进入项目目录后,运行以下命令安装项目依赖:

npm install

启动应用

启动应用的命令是egg。运行以下命令启动应用:

npm run dev

访问应用

在浏览器或终端中访问http://localhost:7001/,你会看到应用的默认主页。这是一个简单的欢迎页面,表示应用已经成功启动并运行。

Egg.js基本概念与配置

应用目录结构

Egg.js项目的目录结构如下:

my-egg-app/
├── app/
│   ├── controller/
│   ├── agent/
│   ├── middleware/
│   ├── router.js
│   ├── config/
│   │   ├── default.js
│   │   ├── security.js
│   │   ├── view.js
│   │   └── ...
│   └── ...
├── config/
│   ├── config.default.js
│   ├── config.local.js
│   └── ...
├── package.json
└── ...
  • app/:这是应用的主要目录,包括控制器、中间件、路由等。
  • config/:存放配置文件,包括默认配置、本地配置等。
  • package.json:项目的配置文件,包括依赖、脚本等。

配置文件详解

Egg.js的配置文件主要位于config/目录下:

  • config.default.js:项目默认配置文件。
  • config.local.js:本地开发环境的配置文件,可以根据需要进行修改。
  • config.<env>.js:针对特定环境的配置文件,例如config.prod.js用于生产环境。

示例:修改config.default.js

// config/default.js
module.exports = {
  // 配置数据库连接
  sequelize: {
    dialect: 'mysql',
    host: '127.0.0.1',
    port: 3306,
    user: 'root',
    password: 'password',
    database: 'mydb'
  },
  // 配置中间件
  middlewares: [
    'error',
    'cors',
    'bodyParser',
    'responseTime',
    'router',
    'throttle',
    'compress',
    'gzip'
  ]
};

环境变量与多环境支持

Egg.js支持多环境配置,可以在不同的环境中使用不同的配置文件,例如:

  • config.local.js:本地开发环境的配置。
  • config.prod.js:生产环境的配置。

示例:使用环境变量

设置环境变量NODE_ENV

export NODE_ENV=prod

或在package.json中定义启动脚本:

{
  "scripts": {
    "start": "NODE_ENV=prod node app.js"
  }
}
路由与控制器

创建路由规则

路由规则定义了URL和处理请求的控制器之间的映射关系。路由配置位于app/router.js文件中。

示例:定义路由规则

// app/router.js
module.exports = function(app) {
  const { router, controller } = app;
  router.get('/', controller.home.index);
  router.post('/user', controller.user.create);
  router.put('/user/:id', controller.user.update);
};

使用控制器处理请求

控制器位于app/controller/目录下,用于处理路由请求。

示例:创建控制器

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

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

module.exports = HomeController;

请求与响应对象

在控制器中,可以使用this.ctx来访问请求和响应对象。

示例:处理POST请求

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

class UserController extends Controller {
  async create() {
    const { ctx } = this;
    const user = ctx.request.body;
    ctx.body = { success: true, user };
  }
  async update() {
    const { ctx } = this;
    const id = ctx.params.id;
    const user = ctx.request.body;
    ctx.body = { success: true, user, id };
  }
}

module.exports = UserController;
模板与视图

使用模板引擎

Egg.js支持多种模板引擎,如Nunjucks、Handlebars等。默认使用Nunjucks。

示例:安装Nunjucks模板引擎

npm install egg-view-nunjucks --save

然后在config/config.default.js中启用模板引擎:

module.exports = {
  view: {
    defaultViewEngine: 'nunjucks',
    defaultExtension: '.html',
  },
};

渲染视图

在控制器中使用this.ctx.renderView方法渲染视图。

示例:渲染视图

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

class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    ctx.body = await ctx.render('index.html');
  }
}

数据传递与继承

示例:传递数据到视图

// app/controller/home.js
async index() {
  const { ctx } = this;
  ctx.body = await ctx.render('index.html', {
    title: 'Home Page',
    message: 'Welcome to our home page',
  });
}

示例:基础布局

在Nunjucks中,可以使用extends关键字创建基础布局文件。

<!-- views/layout.html -->
<!DOCTYPE html>
<html>
<head>
  <title>{{ title }}</title>
</head>
<body>
  <header>
    <h1>My Website</h1>
  </header>
  <main>
    {% block content %}{% endblock %}
  </main>
</body>
</html>

在具体的视图文件中,继承基础布局:

<!-- views/index.html -->
{% extends "layout.html" %}
{% block content %}
  <p>{{ message }}</p>
{% endblock %}

通过上述步骤和代码示例,你可以快速上手Egg.js框架,并构建一个简单的Web应用。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消