Maison > interface Web > tutoriel CSS > Laisse faire un générateur de code QR avec une fonction sans serveur!

Laisse faire un générateur de code QR avec une fonction sans serveur!

Lisa Kudrow
Libérer: 2025-03-13 12:23:08
original
870 Les gens l'ont consulté

Faisons un générateur de code QR avec une fonction sans serveur!

Le code QR est amusant, non? Nous les aimons, puis les détestons, puis les aimons. Quoi qu'il en soit, ils redeviennent populaires ces derniers temps, ce qui me fait réfléchir à la façon dont ils sont fabriqués. Il existe d'innombrables générateurs de code QR sur le marché, mais supposons que vous devez générer des codes QR sur votre propre site Web. Bien que certains packages puissent le faire, ils sont généralement énormes (par exemple, 180 Ko) et contiennent tout ce dont vous avez besoin pour générer un code QR. Il n'est pas idéal de fournir des services avec d'autres scripts sur le site Web.

Le concept de fonctions cloud fournit une solution élégante à ce problème. Les fonctions cloud résident sur le serveur et sont appelées uniquement en cas de besoin, similaires à une petite API.

Certains hôtes fournissent des fonctions de fonction cloud, DigitalOcean en fait partie! Comme les gouttelettes, le déploiement des fonctions est également assez facile.

Créer un dossier de fonction localement

DigitalOcean fournit une commande CLI qui peut créer un cadre de projet pour nous. Accédez au répertoire où vous souhaitez définir le projet et exécuter:

 <code>doctl serverless init --language js qr-generator</code>
Copier après la connexion

Veuillez noter que la langue est explicitement déclarée. La fonction DigitalOcean prend également en charge PHP et Python.

Nous obtenons un projet propre appelé QR-Generator avec un dossier A / Packages qui contient toutes les fonctions du projet. Il y a un exemple de fonction, mais nous pouvons maintenant l'ignorer et créer un dossier QR à côté:

Ce dossier stockera le package QRCODE et notre fonction QR.JS. Alors, allons au répertoire des packages / échantillons / QR et installons le package:

 <code>npm install --save qrcode</code>
Copier après la connexion

Maintenant, nous pouvons écrire la fonction dans un nouveau fichier QR.js:

 const qrcode = requis ('qrcode')

export.main = (args) => {
  return qrcode.todataurl (args.text) .then (res => ({
    En-têtes: {'Content-Type': 'Text / HTML;
    Corps: Args.img == Undefined? <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Faisons un générateur de code QR avec une fonction sans serveur!"> '
  }))
}

if (process.env.test) export.main ({text: "Bonjour"}). puis (console.log)
Copier après la connexion

Le but de ce code est d'introduire le package QRCODE et d'exporter une fonction qui génère essentiellement un PNG Base64<img alt="Laisse faire un générateur de code QR avec une fonction sans serveur!" > Tags comme source. Nous pouvons même le tester dans le terminal:

 <code>doctl serverless functions invoke sample/qr -p "text:css-tricks.com"</code>
Copier après la connexion

Vérifiez le fichier de configuration

Il y a une étape supplémentaire ici. Une fois le projet construit, nous obtiendrons un fichier project.yml qui utilise certaines informations pour configurer les fonctions. Par défaut, le contenu du fichier est le suivant:

 TargetNamespace: ''
Paramètres: {}
Packages:
  - Nom: Exemple
    environnement: {}
    Paramètres: {}
    Annotations: {}
    actes:
      - Nom: Bonjour
        binaire: faux
        principal: ''
        Exécution: «Nodejs: par défaut»
        Web: vrai
        Paramètres: {}
        environnement: {}
        Annotations: {}
        Limites: {}
Copier après la connexion

Avez-vous vu ceux qui sont mis en évidence? packages: name spécifie l'emplacement de la fonction dans le dossier Packages, dans ce cas un dossier nommé échantillon. actions/ name est le nom de la fonction elle-même, c'est-à-dire le nom de fichier. Lorsque nous commençons le projet, le nom par défaut est Hello, mais nous le nommons QR.JS, nous devons donc changer la ligne de Hello à QR avant de continuer.

Déploier des fonctions

Nous pouvons déployer directement à partir de la ligne de commande! Tout d'abord, nous nous connectons à l'environnement Sandbox DigitalOcean pour obtenir l'URL en temps réel pour les tests:

 ## Vous avez besoin d'une API DOCK Doctl Sandbox Connect
Copier après la connexion

Nous pouvons maintenant déployer la fonction:

 Doctl Sandbox Deployer QR-Generator
Copier après la connexion

Une fois le déploiement terminé, nous pouvons accéder à la fonction via l'URL. Qu'est-ce que l'URL? Il y a une commande pour l'obtenir:

 doctl sbx fn obtient un échantillon / qr --url
https://faas-nyc1-2ef2e6cc.doserverless.co/api/v1/web/fn-10a937cb-1f12-427b-aadd-f43d0b08d64a/sample/qr
Copier après la connexion

merveilleux! Nous n'avons plus besoin de publier l'intégralité du package avec d'autres scripts! Nous pouvons accéder à cette URL et générer le code QR à partir de là.

Démo

Nous obtenons l'API, c'est tout!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal