---
# System prepended metadata

title: Nuxt 3配Mysql筆記
tags: [MySQL, Nuxt3]

---

> 參考
> 1. https://ithelp.ithome.com.tw/articles/10293273
> 2. https://ithelp.ithome.com.tw/m/articles/10304993
> 3. https://www.prisma.io/docs/orm/overview/databases/mysql

# 前置

- Mysql
- 安裝[node.js](https://nodejs.org/en/download/current)
---
# 手把手創建Nuxt專案

1. 創建資料夾。
2. 終端機進入資料夾並執行 ``` npx nuxi init nuxt-app ```。
3. 如下圖就OK，中間選項是管理工具，我是用npm啦。
![image](https://hackmd.io/_uploads/HJDP-txmC.png)
4. 終端機執行 ``` cd nuxt-app ```。
5. 終端機執行 ``` npm run dev ```。
6. 如下圖就OK。
![image](https://hackmd.io/_uploads/H1pSGtl7R.png)

7. 點選連結就有Nuxt的模板網頁啦。
![image](https://hackmd.io/_uploads/Bk8KzFe70.png)

---
# 與資料庫連接

1. 一樣在資料夾cmd內 ``` npm install -D prisma @prisma/client ```。
![image](https://hackmd.io/_uploads/S1Z3HFxmC.png)

2.  終端機執行``` npx prisma init ```。
3.  執行完會出現prisma資料夾。
![image](https://hackmd.io/_uploads/SJnbUYxQA.png)
4. 接著修改裡面的schema，將```provider```內容修改成```mysql```。
![image](https://hackmd.io/_uploads/SkTz09xXC.png)

5. 接著修改環境變數，到資料夾的.env檔修改DATABASE_URL成以下格式。 ![image](https://www.prisma.io/docs/assets/images/mysql-connection-string-a271692bb82d53b5bbba7a490ffacf36.png)

底下是我的範例
- 記得帳號密碼換成mysql的帳密。
- port預設就是3306不用改。
- 資料庫名稱自己取一個就好，不用到mysql先開。
``` 
DATABASE_URL="mysql://帳號:密碼@localhost:3306/資料庫名稱"
````

6. 在schema.prisma放入我們資料表的格式，這邊可以先用[Prisma官方範例](https://www.prisma.io/docs/orm/prisma-schema/overview#example)給的，整個檔案會如下。
```
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

model User {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  email     String   @unique
  name      String?
  role      Role     @default(USER)
  posts     Post[]
}

model Post {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  published Boolean  @default(false)
  title     String   @db.VarChar(255)
  author    User?    @relation(fields: [authorId], references: [id])
  authorId  Int?
}

enum Role {
  USER
  ADMIN
}
```

7. 最後終端機```npx prisma db push``` 就會初始化資料庫了，可以登入mysql看看有沒有新增一個資料庫。
![image](https://hackmd.io/_uploads/BJlRzsx7A.png)

8. 也可以用Prisma Studio 監控
    終端機輸```npx prisma studio``` 就會開啟。
    ![image](https://hackmd.io/_uploads/ryW62ilm0.png)

    
# 與資料庫互動

1. 終端機```npx prisma generate```建立client。
2. 建立api : 新增 ./server/api/test-create-user.get.js。
![image](https://hackmd.io/_uploads/B104cixm0.png)

3. test-create-user.get.js檔案程式如下，如果你是用剛剛的資料庫範例，那可參考下方data內容。
```
import { PrismaClient } from '@prisma/client'

const prismaClient = new PrismaClient()

export default defineEventHandler(() => {
  const user = prismaClient.user.create({
    data: {
      createdAt: new Date("2024-05-14T09:04:17.919Z"),
      email: 'harry@gmail.com',
      name: 'Harry',
      role: 'ADMIN',
    }
  })

  return user
})
```

4. 網址輸入```http://localhost:3000/api/test-create-user```並進入 (記得伺服器要開著)，這樣就會進行一次api呼叫，畫面如下。
![image](https://hackmd.io/_uploads/SJUOojxmR.png)

:::info
正常來說要透過程式去呼叫這個api，而且data也不是寫死的，但這裡只是測試，所以....._(:3」∠)
:::
5. 完成就可以看到新增的User啦
![image](https://hackmd.io/_uploads/Sy9jjjxXA.png)

---
# prisma 使用

## 初始化
```
終端機
npx prisma db push
```
## 遷移(migrate)
```
終端機
npx prisma migrate dev --name (版本名)
```
---
# Nuxt 3

## 目錄 

- pages 頁面資料夾 : 放入vue頁面及會自動新增router，可供<NuxtLink />使用。slug則是所有未定義介面。
- component 元件資料夾 : 可被其他頁面重複使用，假設內含button1.vue，其他頁面可使用<button1 />來呼叫。setPageLayout()來變更該頁使用layout
- middleware 中介資料夾 : 裡面是一些程式邏輯，通常在頁面渲染前執行，如身份驗證，避免使用者在進入頁面時看到網頁提前渲染出奇怪的東西。



---
# Element-plus
```
終端機
npm i element-plus @element-plus/nuxt -D
```
```
//nuxt.config.js
export default defineNuxtConfig({
  modules: [
    '@element-plus/nuxt'
  ],
  elementPlus: { /** Options */ }
})
```


