[ Home ]
back

htmx + astro4 スタック試作、exampleなど

id: 58, 2024-08-08

概要:

  • 前scrapの続編で、 htmx + astroの関連メモとなります。
  • テストは、vercelデプロイする例です。

[ 作成日: 2024/07/07 ]

環境

  • htmx
  • astro 4.11
  • vercel

作成したコード

https://github.com/kuc-arc-f/astro4_2htmx

  • adapter vercel使う例です。
npx astro add vercel

stackblitz

  • htmx1.astro

https://github.com/kuc-arc-f/astro4_2htmx/blob/main/src/pages/htmx1.astro

  • hx-get: GET通信
    <button
      hx-get="https://jsonplaceholder.typicode.com/users/1"
      hx-target="#h2"
    >
      Click
    </button>
    <h3 id="h2">ここに表示</h3>
  • htmx2.astro

https://github.com/kuc-arc-f/astro4_2htmx/blob/main/src/pages/htmx2.astro

  • hx-post: POST通信、内部APIエンドポイント指定します。
    <form
    hx-post="/api/test/test1"
    hx-trigger="submit"
    hx-target="#h2"
    hx-on="htmx:afterRequest: alert("OK, post send")"
    >
      <input type="text" name="name" />
      <button type="submit">Add</button>
    </form>
    <hr />
    <h3 id="h2">ここに表示</h3>
  • API
  • src/pages/api/test/test1.ts

https://github.com/kuc-arc-f/astro4_2htmx/blob/main/src/pages/api/test/test1.ts

API 連携の参考

  • d1 連携の例になります。

作成したコード

https://github.com/kuc-arc-f/astro4_2htmx/tree/main/example/api_test

  • testapi.astro
  • example/api_test/src/pages/testapi.astro

https://github.com/kuc-arc-f/astro4_2htmx/blob/main/example/api_test/src/pages/testapi.astro

  • hx-post: 内部API経由で、通信します。
    <form
    hx-post="/api/test/create"
    hx-trigger="submit"
    hx-target="#h2"
    hx-on="htmx:afterRequest: location.reload()"
    >

Turso LibSQL 連携の参考

作成したコード

https://github.com/kuc-arc-f/astro4_2htmx/tree/main/example/turso_todo

  • htmxtodo.astro : List
  • example/turso_todo/src/pages/htmxtodo.astro

https://github.com/kuc-arc-f/astro4_2htmx/blob/main/example/turso_todo/src/pages/htmxtodo.astro

  • hx-post: POST通信、内部API送信します。
    <form
    hx-post="/api/turso_todo/create"
    hx-trigger="submit"
    hx-target="#h2"
    hx-on="htmx:afterRequest: location.reload()"
    >
  • API: create
  • example/turso_todo/src/pages/api/turso_todo/create.ts
  • POST受信、SQL実行します。

https://github.com/kuc-arc-f/astro4_2htmx/blob/main/example/turso_todo/src/pages/api/turso_todo/create.ts

簡易的な認証

作成したコード

https://github.com/kuc-arc-f/astro4_2htmx/tree/main/example/simple_auth

  • example/simple_auth/src/pages/login.astro

https://github.com/kuc-arc-f/astro4_2htmx/blob/main/example/simple_auth/src/pages/login.astro

  • hx-post: POST送信
  • server認証
    <form
    hx-post="/api/auth/user_login"
    hx-trigger="submit"
    hx-target="#resulte_form1"
    hx-on="htmx:afterRequest: Login.afterPostForm1()"
    >
  • example/simple_auth/src/pages/api/auth/user_login.ts
  • email, passs検証、成功時にresulte_code=200　返却します。

https://github.com/kuc-arc-f/astro4_2htmx/blob/main/example/simple_auth/src/pages/api/auth/user_login.ts

Zod form 検証

作成したコード

https://github.com/kuc-arc-f/astro4_2htmx/tree/main/example/zod

  • example/zod/src/pages/zod1.astro

https://github.com/kuc-arc-f/astro4_2htmx/blob/main/example/zod/src/pages/zod1.astro

    <form
    hx-post="/api/zod/zod1"
    hx-trigger="submit"
    hx-target="#resulte_form1"
    hx-on::after-request="Zod1.afterPostForm1()"
    >
      <label>title</label>
      <input type="text" name="title" /><br />
      <label>content</label>
      <input type="text" name="content" />
      <button type="submit">Add</button>
    </form>
    <hr />
    <div id="resulte_form1" class="d-none">ここに表示</div>
  • hx-post: POST通信
  • API
  • example/zod/src/pages/api/zod/zod1.ts
  • zod設定
  • NGの場合、エラーデータを返却

https://github.com/kuc-arc-f/astro4_2htmx/blob/main/example/zod/src/pages/api/zod/zod1.ts