likes
comments
collection
share

NestJS小技巧25-使用NestJS和qrcode.js创建二维码生成器API

作者站长头像
站长
· 阅读数 67

在这篇文章中，我将会探索怎么使用NestJS和qrcode.js创建二维码生成器API。二维码已经成为现代技术中普遍存在的一部分了，使用智能手机能够快速的访问信息。创建二维码生成器API可以允许开发者为了各种各样的额情况动态的生成二维码，诸如分享URL链接，联系情报，或者事件详情。NestJS作为我们的后端框架和qrcode.js作为二维码生成器，我们将能创建一个简单API，甚至初学者都能够学习和实现。因此，让我们开始吧。

前提：

在开始之前，确认您已经掌握了以下技术：

第一步：设置NestJS项目

让我们开始创建一个新的NestJS项目。打开您的命令行工具并且输入下面的命令：

# 创建一个新的NestJS项目
npx @nestjs/cli new qr-code-generator-api  
  
# 进入项目目录  
cd qr-code-generator-api

第二步：安装qrcode.js依赖

接下来，让我们安装qrcode.js依赖包,它能帮助我们生成二维码。在您的项目目录中运行下面的代码：

npm install qrcode

第三步 ：生成二维码

现在我们有了NestJS项目并安装好了qrcode.js,让我们创建一个二维码生成服务。在NestJS中，服务是一个类，它的职责是用来处理业务逻辑的。我们将会创建QrCodeService并利用qrcode.js来生成二维码。首先 ，在src目录下创建一个新的文件命名为 qr-code.service.ts并添加下列代码：

// src/qr-code.service.ts
import { Injectable } from '@nestjs/common';
import * as qrcode from 'qrcode';

@Injectable()
export class QrCodeService {
  async generateQrCode(data: string): Promise<string> {
    try {
      const qrCodeDataURL = await qrcode.toDataURL(data);
      return qrCodeDataURL;
    } catch (error) {
      throw new Error('Failed to generate QR code.');
    }
  }
}

在上面的代码中，我们创建了一个QrCodeService其中包含一个方法generateQrCode。这个方法有个字符串类型的data作为输入，返回一个Promise其中包含数据URL它相当于生成好的二维码。我们使用qrcode.toDataUrl来生成二维码并转换为数据URL.

第四步：创建一个二维码控制器

在NestJS中，控制器主要处理进来的请求和通过和服务交互来提供一个返回。让我们创建一个二维码控制器来处理二维码的生成。在src目录下，创建一个新的文件qr-code.controller.ts并添加如下代码：

// src/qr-code.controller.ts
import { Controller, Get, Query } from '@nestjs/common';
import { QrCodeService } from './qr-code.service';

@Controller('qr-code')
export class QrCodeController {
  constructor(private readonly qrCodeService: QrCodeService) {}

  @Get()
  async generateQrCode(@Query('data') data: string) {
    const qrCodeDataURL = await this.qrCodeService.generateQrCode(data);
    return `<img src="${qrCodeDataURL}" alt="QR Code" />`;
  }
}

在上面的代码中，我们定义了QrCodeController包含了路由/qr-code的一个GET端点。这个端点接收一个请求参数，它的内容将会被翻译进二维码中。在控制器中的generateQrCode方法会调用QrCodeService中的generateQrCode方法并且返回一张二维码图片。

第五步：写二维码模块

现在我们已经有了服务的控制器，我们需要把他们装进一个模块。在src目录中，创建一个新的文件名为qr-code.module.ts并添加如下代码：

// src/qr-code.module.ts
import { Module } from '@nestjs/common';
import { QrCodeController } from './qr-code.controller';
import { QrCodeService } from './qr-code.service';

@Module({
  controllers: [QrCodeController],
  providers: [QrCodeService],
})
export class QrCodeModule {}

在上面的代码中，我们定义了一个QrCodeModule,它导入了QrCodeController和QrCodeService。这个模块提供二维码生成功能。

第六步：启动应用程序

现在我们已经创建了模块，让我们来启动这个项目。打开src/main.ts文件并修改内容如下：

// src/main.ts
import { NestFactory } from '@nestjs/core';
import { QrCodeModule } from './qr-code/qr-code.module';

async function bootstrap() {
  const app = await NestFactory.create(QrCodeModule);
  await app.listen(3000);
}
bootstrap();

在上面的代码中，我们导入了QrCodeModule并把它传入NestFactory.create，它指定我们的应用程序使用QrCodeModule模块。这个应用程序将会监听3000端口，但是您也可以修改端口为你想要的任何没被占用的端口。

第七步：测试二维码生成 恭喜你，您已经成功的通过NestJS和qrcode.js创建了一个二维码生成器。现在我们对它进行测试。

  1. 通过下面的命令来运行NestJS应用程序
npm run start

  1. 打开您喜欢的Api客户端，诸如Postman或者Insomnia，并且制造一个GET请求（http://localhost:3000/qr-code?data=Hello%20NestJS）.您可以替换内容Hello%20NestJS，并把这个内容装进二维码中。

  2. 您应该会收到一个包含HTML img标签和生成的QR码的响应。该图像将在响应中显示为数据URL。

总结

在本教程中，我们学习了如何使用NestJS和qrcode.js创建QR代码生成器API。我们首先建立了一个新的NestJS项目并安装了所需的依赖项。然后，我们使用qrcode.js实现了一个QrCodeService来处理QR码的生成。接下来，我们创建了一个QrCodeController来处理传入请求，并使用QrCodeServices来生成QR码。最后，我们将组件连接到一个模块中，并引导应用程序。

您现在可以轻松地将二维码生成器API集成到您的web应用程序中，使用户可以动态生成用于各种目的的二维码。NestJS为构建API提供了坚实的基础，qrcode.js为二维码生成过程增添了一丝魔力。

所以，继续吧，探索更多的可能性，用NestJS和qrcode.js构建令人兴奋的应用程序吧！编码快乐！🚀

本章代码

转载自:https://juejin.cn/post/7262212980347519034
评论
请登录