不知道讀者們在網路上滑短影片時有沒有看過一些有創意的登入介面？就是那種不一定有什麼作用，但能使人臉上掛上微笑的小程式。今天開始筆者將開始製作那類小程式，它有著註冊與登入兩種介面，如果使用登入介面且帳號密碼並不正確時，它並不會直接告知使用者無法登入帳號，而是會去比對儲存資料尋找擁有相同密碼的用戶，並會詢問使用者是否是該用戶。
這次的小專案將會用到一點資料庫相關的知識，筆者也將會於用到時對他們做些簡易的說明。那麼就讓我們直接開始今天的正文吧！

主架構設計

第一步先藉由 npm create vue@latest 來建立一個新的專案，並建立兩個空白的子元件 SignUp.vue 與 Login.vue，檔案結構如下：

eslint.config.js
index.html
jsconfig.json
package-lock.json
package.json
public
└── favicon.ico
README.md
src
├── App.vue
├── components
│   ├── Login.vue
│   └── SignUp.vue
└── main.js
vite.config.js

接著分別在這兩個元件中建立 <script> 與 <template> ，並將他們import進 App.vue 之中：

<!-- SignUp.vue -->
<script setup>
</script>

<template>
  <h2>Sign Up</h2>
</template>

<style scoped></style>

<!-- Login.vue-->
<script setup>
</script>

<template>
  <h2>Login</h2>
</template>

<style scoped></style>

<!-- App.vue -->
<script setup>
import Login from './components/Login.vue';
import SignUp from './components/SignUp.vue';
</script>

<template>
  <h1>Terrible Login System</h1>
  <Login />
  <SignUp />
</template>

<style scoped></style>

建立輸入欄位

作為一個註冊/登入網頁，想必少不了帳號與密碼的填寫欄位，因此下一步便是建立輸入欄位與送出按鈕。因為此部份的兩個子元件的程式碼極為相似，因此筆者將只在此列出其中之一的程式碼

<script setup>
import { ref } from 'vue';

const username = ref('');
const password = ref('');
function onUsernameInput(e) {
  username.value = e.target.value
}
function onPasswordInput(e) {
  password.value = e.target.value
}
</script>

<template>
  <h2>Sign Up</h2>
  <form>
    <label for="username">Username: </label> <br>
    <input type="text" id="username" v-model="username">
    <br>
    <label for="password">Password: </label> <br>
    <input type="text" id="password" v-model="password">
    <br>
    <button>Sign Up</button>
  </form>

  <p>{{ username }} {{ password }}</p>
</template>

<style scoped></style>

今天的內容就暫時到這裡，明天將會建立一個按鈕，並使網站顯示「註冊」或是「輸入」頁面。有任何問題或是想說的都歡迎留言，明天會繼續努力加油的！