快乐蛋糕屋:使用Node.js Egg框架打造甜蜜项目

865 阅读10分钟

Egg框架简介

Egg是一款基于Node.js的企业级应用框架,它融合了前端与后端的优势,提供了一整套企业级的开发解决方案。而且,它还使用了很多流行的插件,让开发变得更加轻松、高效!

Egg框架的特点

  1. 强大的扩展性:Egg框架的扩展性非常棒!你可以根据自己的需求灵活选择插件,也可以根据业务需求定制自己的插件。
  2. 快速上手:Egg框架的学习曲线相对较低,对于初学者来说也比较友好。只要你用心学习,很快就能上手的!
  3. 插件体系:Egg框架有丰富的插件体系,这些插件可以帮助你快速实现常见的功能,比如数据库操作、安全认证等。简直是太方便了!
  4. 约定优于配置:这是Egg框架最吸引人的地方之一!它遵循"约定优于配置"的原则,通过一些默认的约定,让你可以快速开发应用,不需要过多的配置。

使用Egg框架

使用Egg框架,列出以下简单的步骤:

  1. 安装Node.js:首先,确保你已经安装了Node.js,如果没有,赶快去官网下载安装哦!Node.js的安装和使用 - 掘金 (juejin.cn)
  2. 安装Egg:打开命令行工具,使用npm命令来安装Egg框架:npm install egg --save。安装完毕后,你就可以创建Egg应用了。
  3. 创建应用:使用Egg提供的脚手架工具,创建一个新的Egg应用:npx egg-init your-app --type=simple。其中,your-app是你的应用名称。
  4. 运行应用:进入到应用目录,使用npm命令来启动应用:npm run dev。然后,在浏览器中访问http://localhost:7001,你就可以看到应用已经成功运行啦!
  5. 开发应用:现在,你可以根据需要开发自己的业务逻辑啦!Egg框架提供了非常清晰的目录结构和约定,让你可以专注于业务逻辑的实现,而不用担心太多繁琐的配置。
  6. 部署应用:Egg框架支持多种部署方式,你可以根据自己的需求来选择适合的方式进行部署。

快乐蛋糕屋

一、创建Egg项目

首先,让我们使用Egg提供的脚手架工具创建一个新的Egg应用。打开命令行工具,并执行以下命令:

npx egg-init happy-cake --type=simple

这将创建一个名为"happy-cake"的Egg项目,其中"--type=simple"表示我们使用简单的模板。

二、目录结构

Egg框架有一个规范的目录结构,让我们来看一下happy-cake项目的结构:

happy-cake/
|-- app/
|   |-- controller/
|   |-- service/
|-- config/
|   |-- config.default.js
|   |-- config.prod.js
|-- test/
|-- app.js
|-- package.json
  • app/controller/:这个目录用于存放控制器文件,处理请求和返回响应。
  • app/service/:在这个目录里,我们将会放置服务文件,用于处理具体的业务逻辑。
  • config/:这个目录包含了项目的配置文件,你可以在不同的环境中配置不同的选项。
  • test/:这个目录是用来存放单元测试文件的。
  • app.js:这是项目的入口文件,用于启动Egg应用。

三、编写控制器和服务

现在,让我们开始编写控制器和服务,为我们的快乐蛋糕屋项目添加一些功能吧!

app/controller/目录下,我们创建一个cake.js文件,用于处理蛋糕相关的请求:

// app/controller/cake.js
const { Controller } = require('egg');

class CakeController extends Controller {
  async index() {
    const { ctx } = this;
    const cakes = await ctx.service.cake.getAllCakes();
    ctx.body = cakes;
  }
}

module.exports = CakeController;

app/service/目录下,我们创建一个cake.js文件,用于实现蛋糕相关的业务逻辑:

// app/service/cake.js
const { Service } = require('egg');

class CakeService extends Service {
  async getAllCakes() {
    // 假设这里是从数据库获取蛋糕数据的逻辑
    const cakes = await this.app.mysql.select('cakes');
    return cakes;
  }
}

module.exports = CakeService;

四、配置路由

接下来,我们需要配置路由,将请求映射到相应的控制器方法。

config/config.default.js文件中,添加以下路由配置:

// config/config.default.js
module.exports = {
  // ...其他配置
  // 添加路由配置
  router: {
    get '/cakes': 'cake.index',
  },
};

五、运行项目

好了,所有的代码编写完毕了!现在,让我们来运行项目,看看我们的快乐蛋糕屋是否能正常工作。

在项目根目录下执行以下命令:

npm run dev

如果一切顺利,控制台应该会显示"Egg started on http://localhost:7001"。现在,在浏览器中访问http://localhost:7001/cakes,你应该能够看到蛋糕的数据列表。

六、连接数据库

在真实的项目中,我们通常会使用数据库来存储数据。现在,让我们来学习如何在Egg框架中连接数据库。

  1. 安装数据库插件:Egg框架支持多种数据库插件,比如MySQL、PostgreSQL等。这里,我们以MySQL为例。使用npm命令安装MySQL插件:
npm install egg-mysql --save
  1. 配置数据库连接:在config/config.default.js中添加数据库配置:
// config/config.default.js
module.exports = {
  // ...其他配置
  // 添加数据库配置
  mysql: {
    client: {
      host: 'your-database-host',
      port: 'your-database-port',
      user: 'your-database-username',
      password: 'your-database-password',
      database: 'your-database-name',
    },
  },
};
  1. 使用数据库:现在,我们可以在服务中使用数据库插件。修改app/service/cake.js,使用MySQL插件查询数据库:
// app/service/cake.js
const { Service } = require('egg');

class CakeService extends Service {
  async getAllCakes() {
    // 使用MySQL插件查询数据库
    const cakes = await this.app.mysql.select('cakes');
    return cakes;
  }
}

module.exports = CakeService;
  1. 创建数据库表:在数据库中创建一个cakes表,用于存储蛋糕数据。

七、错误处理

在实际开发中,错误处理非常重要,让我们学习如何在Egg框架中进行错误处理。

  1. 自定义错误页面:在app/middleware/目录下创建一个error_handler.js文件,用于处理错误:
// app/middleware/error_handler.js
module.exports = () => {
  return async function errorHandler(ctx, next) {
    try {
      await next();
    } catch (err) {
      // 自定义错误处理逻辑
      ctx.status = err.status || 500;
      ctx.body = {
        message: 'Oops, something went wrong!',
      };
    }
  };
};
  1. 配置错误处理中间件:在config/config.default.js中配置错误处理中间件:
// config/config.default.js
module.exports = {
  // ...其他配置
  // 添加中间件配置
  middleware: ['errorHandler'],
};

八、插件使用

Egg框架提供了丰富的插件,让我们在项目中使用插件来实现更多功能吧!

  1. 安装插件:以图像上传功能为例,我们可以使用egg-multipart插件来实现。使用npm命令安装插件:
npm install egg-multipart --save
  1. 配置插件:在config/config.default.js中配置插件:
// config/config.default.js
module.exports = {
  // ...其他配置
  // 添加插件配置
  multipart: {
    mode: 'file',
    fileSize: '10mb',
  },
};
  1. 使用插件:现在,我们可以在控制器中使用ctx.request.files来获取上传的文件。修改app/controller/cake.js,实现图像上传功能:
// app/controller/cake.js
const { Controller } = require('egg');

class CakeController extends Controller {
  async upload() {
    const { ctx } = this;
    const file = ctx.request.files[0];
    // 自定义上传文件的逻辑,例如保存到服务器或数据库中
    ctx.body = {
      message: 'File uploaded successfully!',
      filename: file.filename,
    };
  }
}

module.exports = CakeController;
  1. 配置路由:在config/config.default.js中配置上传文件的路由:
// config/config.default.js
module.exports = {
  // ...其他配置
  // 添加路由配置
  router: {
    get '/cakes': 'cake.index',
    post '/upload': 'cake.upload',
  },
};

九、使用模板引擎

Egg框架默认使用Nunjucks作为模板引擎,让我们学习如何在项目中使用模板引擎来渲染页面吧!

  1. 创建模板:在app/view/目录下,创建一个index.nj文件作为我们的模板:
<!-- app/view/index.nj -->
<!DOCTYPE html>
<html>
<head>
  <title>快乐蛋糕屋</title>
</head>
<body>
  <h1>欢迎来到快乐蛋糕屋!</h1>
  <ul>
    {% for cake in cakes %}
      <li>{{ cake.name }} - ¥{{ cake.price }}</li>
    {% endfor %}
  </ul>
</body>
</html>
  1. 渲染模板:在app/controller/cake.js中,修改index方法,使用模板引擎渲染页面:
// app/controller/cake.js
const { Controller } = require('egg');

class CakeController extends Controller {
  async index() {
    const { ctx } = this;
    const cakes = await ctx.service.cake.getAllCakes();
    await ctx.render('index.nj', { cakes });
  }
}

module.exports = CakeController;

十、前后端交互

Egg框架提供了强大的前后端交互能力,让我们学习如何实现前后端数据交互吧!

  1. 使用axios:在前端页面中,我们可以使用axios库来发送HTTP请求,从后端获取数据。在html页面中添加以下代码:
<!-- app/view/index.nj -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  axios.get('/cakes')
    .then(response => {
      const cakes = response.data;
      // 处理后端返回的数据
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
</script>
  1. 返回JSON数据:在后端控制器中,我们修改index方法,返回JSON数据:
// app/controller/cake.js
const { Controller } = require('egg');

class CakeController extends Controller {
  async index() {
    const { ctx } = this;
    const cakes = await ctx.service.cake.getAllCakes();
    ctx.body = cakes;
  }
}

module.exports = CakeController;

十一、部署项目

当我们完成项目开发后,现在是时候将它部署到真实的服务器上了!

  1. 构建项目:在项目根目录下执行以下命令,将项目构建成生产环境可用的代码:
npm run build
  1. 部署项目:将构建后的代码上传至服务器,并执行以下命令启动项目:
npm start

恭喜你!你已经成功使用Node.js的Egg框架构建了一个甜蜜的项目——快乐蛋糕屋!在本文中,我们简单地了解了Egg框架的目录结构、控制器、服务和路由配置、如何连接数据库、进行错误处理,插件的使用、模板引擎的渲染以及前后端数据交互、并最终将项目部署到服务器上。

以下还有俩个高级的功能拓展:

拓展一、身份验证与授权

在真实的项目中,用户身份验证和授权是非常重要的功能。让我们学习如何在Egg框架中实现身份验证和授权功能吧!

  1. 使用egg-passport插件:egg-passport是一个Egg框架的插件,可以帮助我们实现用户身份验证。使用npm命令安装插件:
npm install egg-passport --save
  1. 配置插件:在config/config.default.js中配置egg-passport插件:
// config/config.default.js
module.exports = {
  // ...其他配置
  // 添加插件配置
  passport: {
    // 配置策略
    local: {
      usernameField: 'email', // 自定义用户名字段名
      passwordField: 'password', // 自定义密码字段名
    },
  },
};
  1. 实现认证逻辑:在app/controller/user.js中实现用户登录认证逻辑:
// app/controller/user.js
const { Controller } = require('egg');

class UserController extends Controller {
  async login() {
    const { ctx } = this;
    const { email, password } = ctx.request.body;
    // 执行认证逻辑,例如从数据库中验证用户名和密码
    const user = await ctx.service.user.verifyUser(email, password);

    if (user) {
      // 认证成功,生成 token 并返回给客户端
      const token = ctx.app.jwt.sign({ id: user.id }, ctx.app.config.jwt.secret);
      ctx.body = { token };
    } else {
      // 认证失败,返回错误信息
      ctx.status = 401;
      ctx.body = { message: 'Invalid email or password' };
    }
  }
}
  1. 使用egg-jwt插件:egg-jwt是用于生成和解析 JSON Web Token(JWT)的插件。使用npm命令安装插件:
npm install egg-jwt --save
  1. 配置JWT插件:在config/config.default.js中配置egg-jwt插件:
// config/config.default.js
module.exports = {
  // ...其他配置
  // 添加插件配置
  jwt: {
    secret: 'your-secret-key', // 自定义密钥,用于生成和解析 JWT
  },
};

拓展二、跨域资源共享(CORS)

在开发前端应用时,我们经常会遇到跨域问题。让我们学习如何在Egg框架中实现跨域资源共享(CORS)吧!

  1. 使用egg-cors插件:egg-cors是一个Egg框架的插件,用于处理跨域请求。使用npm命令安装插件:
npm install egg-cors --save
  1. 配置CORS插件:在config/config.default.js中配置egg-cors插件:
// config/config.default.js
module.exports = {
  // ...其他配置
  // 添加插件配置
  cors: {
    origin: '*', // 允许所有域名跨域访问,实际项目中根据需要配置具体的域名
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH',
  },
};

拓展三、日志记录

在项目开发和运行过程中,日志记录是非常重要的。让我们学习如何在Egg框架中进行日志记录吧!

  1. 配置日志:在config/config.default.js中配置日志记录:
// config/config.default.js
module.exports = {
  // ...其他配置
  // 添加日志配置
  logger: {
    level: 'INFO', // 设置日志级别,可选值:DEBUG, INFO, WARN, ERROR, NONE
    consoleLevel: 'INFO', // 控制台日志级别
  },
};
  1. 记录日志:在控制器或服务中,我们可以使用Egg框架提供的日志对象来记录日志:
// app/controller/user.js
const { Controller } = require('egg');

class UserController extends Controller {
  async login() {
    const { ctx } = this;
    ctx.logger.info('用户正在登录...');
    // 其他逻辑
  }
}