Nuxt3-project6 Notes

tags
Vue.js

Nuxt3-project6 Notes

原始碼：https://github.com/WangShuan/nuxt3-notes

線上連結：https://xuan-nuxt3-note.js-app.life/

建立與啟動 Nuxt 專案

開啟終端機，cd 到桌面或任何希望創建該專案的位置，執行命令：

npx nuxi init 06-notes

完成後，根據提示，先 cd 到專案目錄 06-notes 中，接著執行命令：

npm install

安裝所有依賴項目，此時會發現專案目錄中生成了 node_modules 資料夾

確認您的專案已成功安裝好所有依賴後，即可執行命令：

npm run dev

啟動 Nuxt 應用程序。

專案說明

本專案將結合使用 supabase 製作一個可登入、註冊的筆記應用程式。

首先請先到supabase 官網註冊帳號(可以使用 GitHub 快速註冊)，接著點擊建立 supabase 專案，輸入隨意的名稱比如 nuxt3-notes 然後設置一個高級密碼、選擇伺服器位置(新加坡或東京)。

安裝與設定 supabase

請在專案中執行命令：

npm install @nuxtjs/supabase --save-dev

參考說明：https://supabase.nuxtjs.org/get-started

接著修改根目錄中的 nuxt.config.ts 檔案：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxtjs/supabase'], // 使用 modules
})

最後在項目根目錄中新增 .env 檔案存放 url 與 key：

SUPABASE_URL="從 supabase 專案的設定中點選 API 即可看到 Project URL"
SUPABASE_KEY="從 supabase 專案的設定中點選 API 即可看到 Project API keys"

使用 supabase 中的 Authentication

首先將登入、註冊與登出三種方法作為 composables，在項目根目錄中新增資料夾 composables，並在裡面新增檔案 useAuth.ts 開始撰寫登入與註冊等事件。

Authentication 說明文檔：https://supabase.nuxtjs.org/usage/composables/use-supabase-auth-client#signin

預設 supabase 的 auth 會開啟信箱驗證的機制，註冊後需要到信箱中收信並點擊驗證信箱後才能開通帳號，如果希望取消驗證信的機制，可以在 supabase 的專案頁面中點擊 auth ，接著點進左側的 Providers 將 Confirm email 關閉後再點擊右下角 Save 即可。

useAuth.ts 檔案最終如下：

const useAuth = () => {
  const supabase = useSupabaseClient(); // 引入使用 supabase
  const user = useSupabaseUser() // supabase 提供的獲取當前 user 資料
  
  const SignUp = async (userData: UserData, name: string) => { // 註冊
    const { data: u, error } = await supabase.auth.signUp({
      ...userData, // 傳入 email 與 password
      options: { // 可選參數，這邊用來保存用戶姓名
        data: {
          name: name,
        }
      }
    })

    if (error) throw error
    return u
  };

  const LogIn = async (userData: UserData) => { // 登入
    const { data: u, error } = await supabase.auth.signInWithPassword(userData)
    if (error) throw error
    return u
  }

  const LogOut = async () => { // 登出
    const { error } = await supabase.auth.signOut()
    if (error) throw error
  }

  const ResetPassword = async (pwd: string) => { // 重設密碼
    const { data: u, error } = await supabase.auth.updateUser({ password: pwd })
    if (error) throw error
    return u
  }

  return { user, SignUp, LogIn, LogOut, ResetPassword } // 將所有功能導出
}

export default useAuth;

接著即可開始建立登入/註冊頁面：首先於根目錄中新增 pages 資料夾，並新增 sign-in.vue 檔案，於 sign-in.vue 檔案中撰寫登入與註冊畫面，並通過 const { SignUp, LogIn, user } = useAuth() 引入登入、註冊方法以及當前用戶資料。

接著新增元件 Navbar.vue 放置在 components 資料夾中，在 navbar 中放置一個登出的按鈕並通過 const { user, LogOut } = useAuth() 引入登出方法以及當前用戶資料，這邊可以通過 user.user_metadata.name 獲取當前用戶的姓名(註冊時藉由 options 保存的 name)，藉由 user 判斷當前是否有人登入，並將 navbar 右側的登入按鈕改為顯示用戶姓名+分頁選單(所有文章、我的文章、更改密碼、登出)。

使用 supabase 中的 database

接下來我們將開始建立筆記，並將筆記保存到 supabase 的 database 中，在 supabase 中使用的是 PostgreSQL 的資料庫，首先需要進入 supabase 的專案頁面中點擊 Database，接著於 Table 中點擊右上角的 + New Table 建立資料表，這邊輸入 name 為 notes，然後把 Enable Row Level Security (RLS) 取消勾選(這樣所有人都可以公開讀寫此資料表)，最後設置好 Columns：

id 用預設的即可
created_at 也是預設即可
title 為 text 保存筆記標題
note 為 text 保存筆記內容
user_id 為 UUID 保存用戶 id
user_name 為 text 保存用戶姓名

完成後即可開始建立新增筆記與所有筆記的頁面，首先於 pages 資料夾中新增檔案 /note/new.vue 用作新增筆記的頁面，接著將首頁 /pages/index.vue 拿來用於顯示所有筆記。

以首頁來說，使用 database 獲取所有筆記的方式如下：

const isLoading = ref(true) // 建立 isLoading 用於切換顯示載入中畫面
const notes = ref() // 建立 notes 用於存放所有筆記
if (process.client) { // 判斷如果當前是客戶端渲染才執行
  notes.value = await supabase.from('notes') // 使用 supabase.from('table 名稱') 對資料表進行操作
    .select() // 接著用 .select() 方法獲取所有欄位資料
    .order('created_at', { ascending: false }); // 用 order 方法設定排序根據 created_at 遞減
  isLoading.value = false // 將 isLoading 設為結束以顯示資料
}

以新增筆記來說，使用 database 插入數據的方式如下：

const supabase = useSupabaseClient();
const { user } = useAuth();
const submitNote = async () => {
  if (!notesInput.title || !notesInput.note) { // 用於顯示欄位不得為空的錯誤提示
    errMsg.title = !notesInput.title ? true : false;
    errMsg.note = !notesInput.note ? true : false;
    return;
  }
  errMsg.title = false; // 清除錯誤提示
  errMsg.note = false; // 清除錯誤提示
  
  await supabase.from('notes') // 使用 supabase.from('table 名稱') 對資料表進行操作
    .insert({ // 接著用 .insert() 方法插入資料
      title: notesInput.title, // 傳入 title 欄位的值
      note: notesInput.note, // 傳入 note 欄位的值
      user_id: user.value?.id, // 傳入 user id
      user_name: user.value.user_metadata.name // 傳入 user name
    });
  navigateTo('/'); // 跳轉至首頁
};

middleware 使用路由守衛

在 Nuxt 中可以通過於根目錄中建立 middleware 資料夾新增路由守衛，舉例來說，如果要新增筆記，由於需保存 user_id 以及 user_name 所以需要確保當前有登入帳號，此時就可以通過 middleware 來設定路由守衛，將尚未登入的用戶，導連至登入/註冊頁面。

建立方式：於項目根目錄中新增檔案 /middleware/auth.ts：

export default defineNuxtRouteMiddleware(() => {
  const { user } = useAuth();
  if (!user.value) {
    return navigateTo('/sign-in')
  }
})

專案升級，添加 Editor.js

首先，安裝 Editor.js：開啟終端機，執行命令 npm i @editorjs/editorjs --save

接著安裝 Editor.js 中的段落、標題、圖片上傳等需要用到的工具：開啟終端機，執行命令 npm i --save @editorjs/header @editorjs/list @editorjs/paragraph @editorjs/image

完成後於項目中新增一個元件 Editor.vue 用來放編輯器(記得放在 components 資料夾裡面)：

<template>
  <!-- 新增一個設定好 id 的空元素用來指定 editor.js 生成的地方 -->
  <div id="editorjs-container"></div>
</template>

<script setup>
// 引入 editor.js
import EditorJS from '@editorjs/editorjs';
// 引入安裝的其他工具，這邊安裝最常用的標題、段落文字、列表、圖片上傳這四項
import Header from '@editorjs/header';
import Paragraph from '@editorjs/paragraph';
import List from '@editorjs/list';
import ImageTool from '@editorjs/image';

// 開始創建 editor
const editor = new EditorJS({
  holder: 'editorjs-container', // 這邊傳入上方 template 中設置好的元素 id
  autofocus: true, // 是否要再生成後自動 focus
  minHeight: 0, // 取消整個 editor 的 padding-bottom: 300px
  tools: { // 選用引入的工具
    header: Header, // 標題工具對應 import 的 Header
    paragraph: Paragraph, // 段落公居對應 import 的 Paragraph
    list: List, // 列表工具對應 import 的 List
    image: { // 圖片工具
      class: ImageTool, // 對應 import 的 ImageTool
      config: { // 針對圖片工具的其他設定
        uploader: { 
          // 這裡用來設定圖片檔案上傳功能的 function
        }
      }
    }
  },
});
</script>

使用 storage 上傳&獲取圖片網址

接下來我們將設定上傳圖片的功能，並將圖片保存到 supabase 的 storage 中，首先需要進入 supabase 的專案頁面中點擊 Storage，接著於 Storage 中點擊左上角的 + New bucket 建立儲存桶，這邊輸入 name 為 note-images，然後把 Public bucket 設為開啟(這樣所有人都可以公開使用此儲存桶)，完成後即可開始撰寫上傳圖片的 function

Storage 說明文件參考：https://supabase.com/docs/guides/storage/quickstart

首先我們使用的圖片工具是：https://github.com/editor-js/image

根據該工具的說明，在 image 底下的 uploader 中可設置圖片上傳到後端的功能，其中又分為通過純網址上傳、通過自定義函數上傳，這邊我們採用自定義函數上傳的方式撰寫如下：

image: {
  class: ImageTool,
  inlineToolbar: true,
  config: {
    uploader: { 
      // 主要新增程式碼
      async uploadByFile(file) { // 函數名稱必須是 uploadByFile
        const fileExtension = file.name.substring(file.name.lastIndexOf('.') + 1); // 獲取副檔名
        const name = `${new Date().getTime()}.${fileExtension}`; // 重設圖片保存的名稱(因為上傳中文檔名會報錯，所以改用當前時間當作檔案名稱)
        const { data } = await supabase.storage // 使用 supabase 提供的 storage API 進行上傳圖片
          .from('note-images') // from 括號中的內容為 Supabase 存儲桶的名稱
          .upload(name, file); // upload 括號中第一個值為 檔案保存的名稱，第二個值為上傳的檔案

        const uploadedImageUrl = await supabase.storage.from('note-images').getPublicUrl(data.path); // 接著通過 getPublicUrl API 獲取圖片對外網址
        return { // 最後回傳成功＆圖片網址用以顯示圖片
          success: true,
          file: {
            url: uploadedImageUrl.data.publicUrl,
          }
        };
      }
    }
  }
}

保存與顯示 Editor 內容的方法

在新增文章與編輯文章中分別需要保存與顯示 Editor 的內容

保存 Editor 的內容方法

在新增文章中，原本用來保存 Content 的是 textarea，這邊將 textarea 整塊刪除，改為放置 <div id="editor-container"></div>，並於 script 中設置 editor，完成後將送出按鈕綁定的事件進行改寫：

const submitNote = async () => {
  if (!title.value) {
    errMsg.value = true;
    return;
  }
  errMsg.value = false;
  const savedData = await editor.save(); // 獲取 editor 的內容
  const contentJson = JSON.stringify(savedData); // 將內容轉為 json 格式保存到資料庫中以便下次讀取使用
  
  let note = ''; // 新增空字符串用以保存要顯示的 html 內容
  savedData.blocks.forEach(item => { // savedData.blocks 是每個新增的 editor 內容區塊，通過遍歷循環改成 html 格式
    if (item.type === "paragraph") { // 判斷如果類型為 paragraph 段落，則回傳 p 標籤
      note += `<p>${item.data.text}</p>`;
    }
    if (item.type === 'image') { // 判斷如果類型為 image 圖片，則根據是否有邊框、滿版寬、背景，添加 class 並回傳 img 標籤
      let classes = 'img-fluid';
      if (item.data.withBorder) {
        classes += ' border';
      }
      if (item.data.stretched) {
        classes += ' w-100';
      }
      note += `<div class="image-block${item.data.withBackground ? ' img-withBackground' : ''}">
          <img class="${classes}" src="${item.data.file.url}" alt="${item.data.caption}" />
        </div>
        <p class="image-description">${item.data.caption}</p>`;
    }
    if (item.type === "header") { // 判斷如果類型為 header 標題，則根據其 level 回傳對應的 h1~h6 標籤
      const tag = `h${item.data.level}`;
      note += `<${tag} class="fs-${item.data.level}">${item.data.text}</${tag}>`;
    }
    if (item.type === 'list') { // 判斷如果類型為 list 列表，則根據其 style 回傳對應的 ol 或 ul 標籤
      const tag = item.data.style === 'unordered' ? 'ul' : 'ol';
      const lis = '';
      item.data.items.forEach(li => lis += `<li>${li}</li>`);
      note += `<${tag}>
        ${lis}
      </${tag}>`;
    }
  });

  await supabase
    .from('notes')
    .insert({
      title: title.value,
      note: note, // 將 html 內容保存到 note 中
      content: contentJson, // 在 Table 中新增 column 名為 content 保存 editor 完整的內容
      user_id: user.value?.id,
      user_name: user.value.user_metadata.name
    });

  router.push('/');
};

最後將原本的 NoteCard.vue 以及顯示文章的 /notes/[id].vue 檔案，改為用 v-html 顯示 note 內容即完成(原本是用 textarea 保存並用 pre 顯示純文字)。

顯示 Editor 的內容方法

在保存 Editor 的內容時通過 editor.save() 獲取到了所有數據資料，並藉由 JSON 格式保存到資料庫中。

顯示則將提取到的內容重新轉為 JSON 格式，並通過在 new EditorJS({}) 中添加 data 選項為轉換後的 JSON 內容即完成。

這邊我們將稍早新增的 Editor.vue 元件進行改寫，並在 /pages 中新增檔案 /edit/[id].vue 用來進行編輯文章的功能，於編輯文章時取用顯示 Editor 的內容方法再結合保存 Editor 的內容方法完成整個專案升級。

supabase 中編輯資料庫的方法：

await supabase
  .from('notes')
  .update({ // 通過 update 方法傳入需要更新的欄位與對應的內容
    title: title.value,
    note: content,
    content: contentJson,
  })
  .eq('id', route.params.id); // 指定更新的項目為 id 相等者

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
.vscode		.vscode
components		components
composables		composables
layouts		layouts
middleware		middleware
pages		pages
public		public
server		server
.gitignore		.gitignore
.npmrc		.npmrc
README.md		README.md
docker-compose.yml		docker-compose.yml
dockerfile		dockerfile
nuxt.config.ts		nuxt.config.ts
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Nuxt3-project6 Notes

建立與啟動 Nuxt 專案

專案說明

安裝與設定 supabase

使用 supabase 中的 Authentication

使用 supabase 中的 database

middleware 使用路由守衛

專案升級，添加 Editor.js

使用 storage 上傳&獲取圖片網址

保存與顯示 Editor 內容的方法

保存 Editor 的內容方法

顯示 Editor 的內容方法

About

Languages

WangShuan/nuxt3-notes

Folders and files

Latest commit

History

Repository files navigation

Nuxt3-project6 Notes

建立與啟動 Nuxt 專案

專案說明

安裝與設定 supabase

使用 supabase 中的 Authentication

使用 supabase 中的 database

middleware 使用路由守衛

專案升級，添加 Editor.js

使用 storage 上傳&獲取圖片網址

保存與顯示 Editor 內容的方法

保存 Editor 的內容方法

顯示 Editor 的內容方法

About

Topics

Resources

Stars

Watchers

Forks

Languages