Rumah > hujung hadapan web > tutorial js > Mula Pantas dengan Hono: Panduan Persediaan Mudah (Artikel bersaiz gigitan)

Mula Pantas dengan Hono: Panduan Persediaan Mudah (Artikel bersaiz gigitan)

Patricia Arquette
Lepaskan: 2024-10-12 06:20:02
asal
422 orang telah melayarinya

pengenalan

Pernahkah anda mendengar tentang rangka kerja web yang dipanggil Hono?
Baru-baru ini, saya telah menemui nama "Hono" dalam pelbagai media dan memutuskan untuk mencubanya sendiri.
Hari ini, saya akan berkongsi gambaran ringkas tentang Hono bersama-sama dengan panduan persediaan awal yang mudah, sebahagiannya sebagai memo untuk diri saya sendiri.

Quick Start with Hono: Simple Setup Guide (Bite-sized article)

Apa itu Hono?

Hono ialah rangka kerja web yang ringan dan pantas dibina pada TypeScript.
Saya masih baru menggunakannya dan belum meneroka semua cirinya lagi, tetapi kekuatan utama Hono nampaknya adalah penghalaan berkelajuan tinggi dan ringan serta sokongan berbilang masa jalannya. Ia berfungsi dengan lancar merentas pelbagai masa jalan JavaScript, seperti Cloudflare, Deno, Bun, AWS, Node.js dan banyak lagi, menggunakan pangkalan kod yang sama.

Dalam kerja pembangunan web biasa saya, saya sering menggunakan tindanan MERN dan bergantung terutamanya pada Express sebagai rangka kerja bahagian belakang saya. Walau bagaimanapun, Hono nampaknya mempunyai keserasian TypeScript yang lebih baik dan fleksibiliti yang lebih tinggi berbanding Express, yang menjadikannya calon yang menjanjikan untuk menjadi salah satu rangka kerja terkemuka dalam masa terdekat.

Selain itu, sebagai pemain yang agak baharu dalam bidang rangka kerja web, Hono mempunyai banyak potensi dan boleh mewujudkan dirinya sebagai rangka kerja generasi akan datang yang digunakan merentas pelbagai platform dan persekitaran pada tahun-tahun akan datang.

Quick Start with Hono: Simple Setup Guide (Bite-sized article)

Persediaan

Apabila menyediakan persekitaran, Hono menawarkan templat mudah yang membolehkan anda bermula dengan mudah. Kali ini, mari gunakan npm untuk bermula.

Pertama, jalankan arahan berikut:

npm create hono@latest hono-myapp
Salin selepas log masuk

Selepas menjalankan arahan, anda akan digesa untuk memilih templat. Pilih yang paling sesuai dengan persekitaran projek anda. Untuk artikel ini, pilih templat nodejs.

Selepas pemasangan selesai, fail projek yang mengandungi item minimum yang diperlukan akan dibuat, jadi cd dan jalankan npm run dev.

Jika tiada ralat atau masalah, cuba buka localhost dan lihat jika Hello World muncul.

Menambah Laluan Mudah

Setakat ini, kami hanya menjalankan fail templat, jadi mari tambahkan sedikit kod untuk meningkatkan projek. Seterusnya, kami akan menggunakan Hono untuk mencipta laluan yang menerima parameter dinamik. Anda harus mencari fail index.ts di dalam folder src direktori yang kami buat sebelum ini. Mari edit fail ini dan tambahkan laluan seperti app.get('/hello/:name') untuk mengendalikan parameter laluan yang dipanggil nama dan mengembalikan nilainya dalam respons.

Tambahkan coretan kod berikut pada kod sedia ada anda:

app.get('/branches/:name', (c) => {
  const name = c.req.param('name')
  return c.text(`Hello, ${name}!`)
});
Salin selepas log masuk

:bahagian nama ialah parameter laluan yang membolehkan kami menangkap nilai dalam URL secara dinamik. Menggunakan c.req.param('name'), kita boleh mengekstrak nilai :name dan memaparkannya dalam respons sebagai Hello, {name}!.

Dengan pelayan berjalan, cuba akses URL berikut:

http://localhost:3000/branches/John → Memaparkan: Hello, John!
http://localhost:3000/branches/Alice → Memaparkan: Hello, Alice!

Dengan cara ini, anda boleh menukar bahagian nama secara dinamik untuk menunjukkan mesej berbeza berdasarkan input.

Berikut ialah versi akhir kod lengkap:

import { serve } from '@hono/node-server'
import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => {
  return c.text('Hello Hono!')
})

app.get('/branches/:name', (c) => {
  const name = c.req.param('name')
  return c.text(`Hello, ${name}!`)
})

const port = 3000
console.log(`Server is running on port ${port}`)

serve({
  fetch: app.fetch,
  port
})
Salin selepas log masuk

Quick Start with Hono: Simple Setup Guide (Bite-sized article)

Kesimpulan

Pada mulanya, saya telah merancang untuk menyelam lebih dalam ke Hono, tetapi saya memutuskan untuk memastikan artikel ini pendek dan padat dengan memfokuskan pada gambaran keseluruhan Hono dan proses persediaan. Akibatnya, kandungan mungkin terasa sedikit tidak lengkap.

Walau bagaimanapun, saya akan terus bereksperimen dengan Hono, dan jika saya menemui cerapan atau petua baharu pada masa hadapan, saya pasti akan berkongsinya dalam siaran susulan.

Terima kasih banyak kerana membaca sehingga tamat, dan saya berharap dapat berjumpa lagi dalam artikel saya yang akan datang. Saya menghargai sokongan berterusan anda!

Atas ialah kandungan terperinci Mula Pantas dengan Hono: Panduan Persediaan Mudah (Artikel bersaiz gigitan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan