Cara menggunakan Astro dengan Hono

Astro: Rangka kerja web yang berkuasa, kegemaran semasa saya. Fleksibiliti menjadikannya sesuai untuk pelbagai projek. Walau bagaimanapun, untuk pembangunan API, Hono terserlah.

Hono: Rangka kerja API mudah alih yang ringkas dengan sistem RPC yang mesra pengguna (menyerupai tRPC tetapi lebih pantas). Panduan ini menunjukkan cara menggabungkan kekuatan kedua-duanya.

Menyediakan Astro

Buat projek Astro baharu menggunakan:

<code class="language-bash">npm create astro@latest</code>

Ikuti gesaan CLI. Mulakan projek dengan:

<code class="language-bash">npm run dev</code>

Akses projek Astro anda di http://localhost:4321.

Menyediakan Hono

Pasang Hono:

<code class="language-bash">npm install hono</code>

Buat laluan tangkap semua dalam src/pages/api/[...path].ts:

<code class="language-typescript">// src/pages/api/[...path].ts
import { Hono } from 'hono';

const app = new Hono().basePath('/api/');

app.get('/posts', async (c) => {
    return {
        posts: [
            { id: 1, title: 'Hello World' },
            { id: 2, title: 'Goodbye World' },
        ],
    };
});
</code>

.basePath('/api/') adalah penting; ia menyelaraskan penghalaan Hono dengan struktur fail Astro. Laraskan laluan ini mengikut keperluan untuk memadankan lokasi titik akhir projek Astro anda (cth., /foo/bar/ untuk src/pages/foo/bar/[...path].ts).

Mengintegrasikan Hono dengan Astro

Buat eksport ALL untuk mengendalikan semua permintaan dan halakan mereka ke Hono:

<code class="language-typescript">// src/pages/api/[...path].ts
import { Hono } from 'hono';
import type { APIRoute } from 'astro';

// ... (Hono app setup from previous step) ...

export type App = typeof app; // Export Hono app type

export const ALL: APIRoute = (context) => app.fetch(context.request);</code>

Sekarang, http://localhost:4321/api/posts akan mengembalikan data palsu anda melalui Hono.

Menambah Klien RPC Ditaip

Untuk interaksi API selamat jenis, gunakan klien hc Hono:

<code class="language-typescript">// src/pages/some-astro-page.astro
import { hc } from 'hono/client';
import type { App } from './api/[...path].ts';

const client = hc<App>(window.location.href);

const response = await client.posts.$get();
const json = await response.json();

console.log(json); // { posts: [...] }</code>

Kesimpulan

Persediaan ini menggabungkan kuasa bahagian hadapan Astro dengan keupayaan bahagian belakang Hono yang cekap, memberikan pengalaman pembangunan yang diperkemas dengan keselamatan jenis. Terokai ciri meluas Hono untuk pembangunan API yang lebih maju.

Atas ialah kandungan terperinci Cara menggunakan Astro dengan Hono. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!