Serverless + Egg.js 后台管理系统实战

个人博客导航页(点击右侧链接即可打开个人博客):大牛带你入门技术栈 

作为一名前端开发者,在选择 Nodejs 后端服务框架时,第一时间会想到 Egg.js,不得不说 Egg.js 是一个非常优秀的企业级框架,它的高扩展性和丰富的插件,极大的提高了开发效率。开发者只需要关注业务就好,比如要使用 redis,引入 egg-redis 插件,然后简单配置就可以了。正因为如此,第一次接触它,我便喜欢上了它,之后也用它开发过不少应用。

有了如此优秀的框架,那么如何将一个 Egg.js 的服务迁移到 Serverless 架构上呢?

背景

我在文章 基于 Serverless Component 的全栈解决方案 中讲述了,如何将一个基于 Vue.js 的前端应用和基于 Express 的后端服务,快速部署到腾讯云上。虽然受到不少开发者的喜爱,但是很多开发者私信问我,这还是一个 Demo 性质的项目而已,有没有更加实用性的解决方案。而且他们实际开发中,很多使用的正是 Egg.js 框架,能不能提供一个 Egg.js 的解决方案?

本文将手把手教你结合 Egg.js 和 Serverless 实现一个后台管理系统。

读完此文你将学到:

  1. Egg.js 基本使用
  2. 如何使用 Sequelize ORM 模块进行 Mysql 操作
  3. 如何使用 Redis
  4. 如何使用 JWT 进行用户登录验证
  5. Serverless Framework 的基本使用
  6. 如何将本地开发好的 Egg.js 应用部署到腾讯云云函数上
  7. 如何基于云端对象存储快速部署静态网站

Egg.js 入门

初始化 Egg.js 项目:

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

启动项目:

$ npm run dev

然后浏览器访问 http://localhost:7001,就可以看到亲切的 hi, egg 了。

关于 Egg.js 的框架更多知识,建议阅读 官方文档

准备

对 Egg.js 有了简单了解,接下来我们来初始化我们的后台管理系统,新建一个项目目录 admin-system:

$ mkdir admin-system

将上面创建的 Egg.js 项目复制到 admin-system 目录下,重命名为 backend。然后将前端模板项目复制到 frontend 文件夹中:

$ git clone https://github.com/PanJiaChen/vue-admin-template.git frontend

说明: vue-admin-template 是基于 Vue2.0 的管理系统模板,是一个非常优秀的项目,建议对 Vue.js 感兴趣的开发者可以去学习下,当然如果你对 Vue.js 还不是太了解,这里有个基础入门学习教程 Vuejs 从入门到精通系列文章

之后你的项目目录结构如下:

.
├── README.md
├── backend     // 创建的 Egg.js 项目
└── frontend    // 克隆的 Vue.js 前端项目模板

启动前端项目熟悉下界面:

$ cd frontend
$ npm install
$ npm run dev

然后访问 http://localhost:9528 就可以看到登录界面了。

开发后端服务

对于一个后台管理系统服务,我们这里只实现登录鉴权和文章管理功能,剩下的其他功能大同小异,读者可以之后自由补充扩展。

1. 添加 Sequelize 插件

在正式开发之前,我们需要引入数据库插件,这里本人偏向于使用 Sequelize ORM 工具进行数据库操作,正好 Egg.js 提供了 egg-sequelize 插件,于是直接拿来用,需要先安装:

$ cd frontend
# 因为需要通过 sequelize 链接 mysql 所以这也同时安装 mysql2 模块
$ npm install egg-sequelize mysql2 --save

然后在 backend/config/plugin.js 中引入该插件:

module.exports = {
  // ....
  sequelize: {
    enable: true,
    package: "egg-sequelize"
  }
  // ....
};

在 backend/config/config.default.js 中配置数据库连接参数:

// ...
const userConfig = {
  // ...
  sequelize: {
    dialect: "mysql",

    // 这里也可以通过 .env 文件注入环境变量,然后通过 process.env 获取
    host: "xxx",
    port: "xxx",
    database: "xxx",
    username: "xxx",
    password: "xxx"
  }
  // ...
};
// ...

2. 添加 JWT 插件

系统将使用 JWT token 方式进行登录鉴权,安装配置参考官方文档,egg-jwt

3. 添加 Redis 插件

系统将使用 redis 来存储和管理用户 token,安装配置参考官方文档,egg-redis

4. 角色 API

定义用户模型,创建 backend/app/model/role.js 文件如下:

module.exports = app => {
  const { STRING, INTEGER, DATE } = app.Sequelize;

  const Role = app.model.define("role", {
    id: { type: INTEGER, primaryKey: true, autoIncrement: true },
    name: STRING(30),
    created_at: DATE,
    updated_at: DATE
  });

  // 这里定义与 users 表的关系,一个角色可以含有多个用户,外键相关
  Role.associate = () => {
    app.model.Role.hasMany(app.model.User, { as: "users" });
  };

  return Role;
};

实现 Role 相关服务,创建 backend/app/service/role.js 文件如下:

const { Service } = require("egg");

class RoleService extends Service {
  // 获取角色列表
  async list(options) {
    const {
      ctx: { model }
    } = this;
    return model.Role.findAndCountAll({
      ...options,
      order: [
        ["created_at", "desc"],
        ["id", "desc"]
      ]
    });
  }

  // 通过 id 获取角色
  async find(id) {
    const {
      ctx: { model }
    } = this;
    const role = await model.Role.findByPk(id);
    if (!role) {
      this.ctx.throw(404, "role not found");
    }
    return role;
  }

  // 创建角色
  async create(role) {
    const {
      ctx: { model }
    } = this;
    return model.Role.create(role);
  }

  // 更新角色
  async update({ id, updates }) {
    const role = await this.ctx.model.Role.findByPk(id);
    if (!role) {
      this.ctx.throw(404, "role not found");
    }
    return role.update(updates);
  }

  // 删除角色
  async destroy(id) {
    const role = await this.ct
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值