Rumah >hujung hadapan web >tutorial css >Let ' s membuat penjana kod QR dengan fungsi tanpa pelayan!

Let ' s membuat penjana kod QR dengan fungsi tanpa pelayan!

Lisa Kudrow
Lisa Kudrowasal
2025-03-13 12:23:08871semak imbas

Mari buat penjana kod QR dengan fungsi tanpa pelayan!

Kod QR menyeronokkan, bukan? Kami mengasihi mereka, dan kemudian membenci mereka, dan kemudian mencintai mereka. Bagaimanapun, mereka semakin popular sejak kebelakangan ini, yang membuat saya berfikir tentang bagaimana mereka dibuat. Terdapat banyak penjana kod QR di pasaran, tetapi katakan anda perlu menjana kod QR di laman web anda sendiri. Walaupun beberapa pakej boleh melakukan ini, mereka biasanya besar (mis., 180kb) dan mengandungi semua yang anda perlukan untuk menghasilkan kod QR. Ia tidak sesuai untuk menyediakan perkhidmatan dengan skrip lain di laman web.

Konsep fungsi awan memberikan penyelesaian yang elegan untuk masalah ini. Fungsi awan berada di pelayan dan dipanggil hanya apabila diperlukan, sama dengan API kecil.

Sesetengah tuan rumah menyediakan fungsi fungsi awan, DigitalOcean adalah salah satu daripada mereka! Seperti titisan, penggunaan fungsi juga agak mudah.

Buat folder fungsi secara tempatan

DigitalOcean menyediakan arahan CLI yang boleh membina rangka kerja projek untuk kami. Pergi ke direktori di mana anda ingin menetapkan projek dan lari:

 <code>doctl serverless init --language js qr-generator</code>

Sila ambil perhatian bahawa bahasa itu diisytiharkan secara eksplisit. Fungsi DigitalOcean juga menyokong PHP dan Python.

Kami mendapat projek bersih yang dipanggil QR-Generator dengan folder A /Pakej yang mengandungi semua fungsi projek. Terdapat fungsi sampel di dalamnya, tetapi sekarang kita boleh mengabaikannya dan membuat folder QR di sebelahnya:

Folder ini akan menyimpan pakej qrcode dan fungsi qr.js kami. Oleh itu, mari kita pergi ke direktori pakej/sampel/QR dan pasangkan pakej:

 <code>npm install --save qrcode</code>

Sekarang kita boleh menulis fungsi dalam fail qr.js baru:

 const qrcode = memerlukan ('qrcode')

eksports.main = (args) => {
  kembali qrcode.todataurl (args.text) .then (res => ({
    Headers: {'Content-type': 'Text/html;
    Badan: args.img == Undefined?<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Mari buat penjana kod QR dengan fungsi tanpa pelayan!"> `
  }))
}

jika (process.env.test) eksports.main ({text: "hello"}). Kemudian (console.log)

Tujuan kod ini adalah untuk memperkenalkan pakej qrcode dan mengeksport fungsi yang pada dasarnya menghasilkan png base64<img alt="Let &#039; s membuat penjana kod QR dengan fungsi tanpa pelayan!" > Tag sebagai sumber. Kita juga boleh mengujinya di terminal:

 <code>doctl serverless functions invoke sample/qr -p "text:css-tricks.com"</code>

Periksa fail konfigurasi

Terdapat langkah tambahan di sini. Selepas projek dibina, kami akan mendapat fail Project.yml yang menggunakan beberapa maklumat untuk mengkonfigurasi fungsi. Secara lalai, kandungan fail adalah seperti berikut:

 TargetNamespace: ''
Parameter: {}
Pakej:
  - Nama: Contoh
    persekitaran: {}
    Parameter: {}
    Anotasi: {}
    Tindakan:
      - Nama: Helo
        Binari: Salah
        Utama: ''
        Runtime: 'Nodejs: Lalai'
        Web: Benar
        Parameter: {}
        persekitaran: {}
        Anotasi: {}
        Had: {}

Pernahkah anda melihat mereka yang diserlahkan? packages: name menentukan lokasi fungsi dalam folder Pakej, dalam hal ini folder bernama sampel. Atribut actions/ name adalah nama fungsi itu sendiri, iaitu nama fail. Apabila kita memulakan projek, nama lalai adalah Hello, tetapi kita namakannya qr.js, jadi kita harus menukar garis dari hello ke QR sebelum meneruskan.

Menyebarkan fungsi

Kami boleh menggunakan terus dari baris arahan! Pertama, kami menyambung ke persekitaran kotak pasir DigitalOcean untuk mendapatkan URL masa nyata untuk ujian:

 ## anda memerlukan connect connect connect connect

Sekarang kita boleh menggunakan fungsi:

 Kotak pasir Doctl menggunakan QR-Generator

Selepas penempatan selesai, kami boleh mengakses fungsi melalui URL. Apa itu URL? Terdapat arahan untuk mendapatkannya:

 DOCTL SBX FN Dapatkan Contoh/QR --URL
https://faas-nyc1-2ef2e6cc.doserverless.co/api/v1/web/fn-10a937cb-1f12-427b-aadd-f43d0b08d64a/sample/qr

Luar Biasa! Kami tidak lagi perlu menerbitkan keseluruhan pakej dengan skrip lain! Kami boleh mengakses URL itu dan menghasilkan kod QR dari sana.

Demo

Kami mendapat API, itu sahaja!

Atas ialah kandungan terperinci Let ' s membuat penjana kod QR dengan fungsi tanpa pelayan!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Tolong beri saya ruangArtikel seterusnya:Tolong beri saya ruang