DAY 27 - Nuxt Server 模擬 RESTful API

什麼是 Nuxt Server ?

有聽過 Json Server 嗎 ?
Nuxt Server 其實就是跟 Json Server 一樣可以用來模擬 RESTful API，前端在開發時會需要透過 串接 API 取得資料 ，但是可能前端不會後端沒辦法使用 API，此時我們就會模擬 API ，就會使用到 Nuxt Server。

伺服器使用 Nitro ，並支持開箱即用。 — 支持API路由。

Nuxt Server 建立資料夾

首先先在 Nuxt 下建立一個Server 資料夾，裡面包含 api、routes、middleware

Server 資料夾結構

Nuxt 會掃描 Server 下的三個目錄，以註冊API和服務器處理程序，包含 ~/server/api ~/server/routes ~/server/middleware

• Server/api 自動加上/api
• Server/routes 一般路由(檔名)
• Server/middleware 中間層路由

也可以利用 nuxi add 新增 api

<!-- 新增一個 test api  -->
npx nuxi add api test 

nuxi add 只能新增 api, plugin, component, composable, middleware, layout, page，其餘需手動新增

Server/api

目錄下的會自動加上 api ， /api/檔名.ts， 例如 server/api/hello.ts，串接 api 路由就是 '/api/hello(檔名)'

先來建立一個 api ，路徑為 server/api/hello.ts，等等來看路由差別

//api/hello.ts
export default defineEventHandler((event) => {
  return "Hello(api)";
});

Server/routes

routes 目錄下則是直接就是路由名稱

建立一個 routes api ，路徑為 server/routes/hello.ts

//api/hello.ts
export default defineEventHandler((event) => {
  return "Hello(routes)";
});

啟動專案

<!-- 啟動伺服器  -->
npm run dev 

<!-- api目錄下 hello  -->
http://localhost:3000/api/hello

<!-- routes目錄下 hello  -->
http://localhost:3000/hello 

查看路由
成功建立 api

使用 defineEventHandler() 返回JSON

每個檔案使用 defineEventHandler()方法，裡面可以寫入 return 返回的資料

export default defineEventHandler((event) => {
  return {
      <!-- 要返回的 Data   -->
  }
})

範例

//server/api/hello.ts 
export default defineEventHandler((event) => {
  return {
    api: 'works'
  }
})

可以使用 $fetch 或是 useFetch 來取得 api 資料

<script setup lang="ts">
const { data } = await useFetch('/api/hello')
</script>

<template>
  <pre>{{ data }}</pre>
</template>

取得資料

建立不同 HTTP Method

在 MDN 裡有不同的 HTTP Method 請求方法，一般 我們 RESTful API (RESTful API 介紹) 常用的包含:

• GET 取得資料
• POST 傳送資料
• PUT 修改資料
• DELETE 刪除資料

如果我們要在 Nuxt Server 建立不同 HTTP Method，我們需要在他檔名加入後綴 .get .post .put .delete

- Server
 - api
   **.get.ts
   **.put.ts
   // **.(方法).ts
 - routes
 - middleware

HTTP Method 可以接受 connect、delete、get、head、options、patch、post、put、trace
以上程式碼放在教學範本，有不清楚得可以查看範本

教學範本:

• Github - nuxt3-eslint

官方文件:

• 官方 Nuxt Server 目錄
• Server Engine