Vue3項目實踐-第五篇（改造登入頁-Axios模拟請求資料）

本文将介紹以下内容:

• 項目中的 public 目錄和通路靜态資源檔案的方法
• 使用 json 檔案代替http模拟請求
• 使用 Axios 直接通路 json 檔案
• 改造登入頁，配合 Axios 進行登入請求，并添加錯誤提示

項目中的 public 目錄和通路靜态資源檔案的方法

項目中，public 目錄用于存放靜态資源檔案，這些檔案将直接複制到建構輸出目錄而不經過編譯處理。public 目錄下的檔案可以通過相對路徑直接通路。

以下是關于 public 目錄的一些說明和示例：

• 建立 public 目錄：在你的項目根目錄下建立一個名為 public 的目錄（如果還不存在）。
• 靜态資源檔案：将需要在項目中通路的靜态資源檔案放置在 public 目錄中。這些檔案可以是圖檔、字型、視訊、音頻、JSON 檔案等。
• 通路靜态資源檔案：在你的代碼中，可以通過相對路徑直接通路 public 目錄下的檔案。例如，如果你有一個 public/images/logo.png 圖檔檔案，你可以在 Vue 元件中這樣使用

<template>
  <div>
    <img src="/images/logo.png" alt="Logo" />
  </div>
</template>           

上面的代碼中，我們使用了相對路徑 /images/logo.png 來引用 public 目錄下的圖檔檔案。

請注意，在使用相對路徑時不需要包含 public 目錄名。Vite 會自動将相對路徑解析為 public 目錄下對應的檔案。

通過将靜态資源檔案放置在 public 目錄中，它們将被直接複制到建構輸出目錄中，而無需經過編譯處理。這使得通路這些檔案變得非常簡單和高效。

使用 json 檔案代替http模拟請求

使用 JSON 檔案來模拟 HTTP 請求，可以将 JSON 檔案放在項目的 public 目錄中，并通過 http 方法直接在浏覽器中通路。

以下是一個示例：

• 在項目的 public/data 目錄中建立一個 JSON 檔案，例如 page.json，并将需要的資料儲存在其中。
• 在浏覽器中，直接使用http位址展示 JSON 檔案并使用其中的資料。

使用 Axios 直接通路 json 檔案

繼續上述内容，直接通過Axios 通路 json 檔案，使用 Axios 直接通路 JSON 檔案時，我們可可以按照以下步驟進行操作：

• 確定已安裝 Axios，可以使用以下指令進行安裝：

npm install axios           

• 在 Vue 元件中，導入 Axios 并使用它來發送 GET 請求來擷取 JSON 檔案的資料。

<template>
    <h1>Home Page</h1>
    <p>
        {{ pageData }}
    </p>
</template>
<script lang="ts" setup>

import { ref } from 'vue';
import axios from 'axios';

const pageData = ref({});

const load = async () => {
    console.log('執行請求');

    try {
        const {data} = await axios.get('./data/page.json');

        console.log(data);

        pageData.value = data;
      } catch (error) {
        console.error(error);
      }
}

load();

</script>           

在上述示例中，首先通過 import axios from 'axios' 導入 Axios 庫。然後，在元件的 pageData 中,在 load 方法中，我們使用 axios.get 發送一個 GET 請求來擷取指定路徑的 JSON 檔案資料，并将響應的資料類型解構為 data。一旦擷取到資料，我們将其指派給 pageData.value 。

請確定将 /data/page.json 能在浏覽器中被通路。

通過這種方式，項目中使用 Axios 直接通路 JSON 檔案，并且能夠獲得類型檢查的好處。記得在實際應用中，確定你的 JSON 檔案的路徑和檔案名是正确的，并且可在伺服器上正常通路。

改造登入頁，配合 Axios 進行登入請求，并添加錯誤提示

改造登入頁，結合 Axios 進行登入請求，并添加錯誤提示，先在public/data 檔案夾下建立個login.json檔案，友善校驗登入輸入資訊的校對。

[
    {
        "userName": "admin",
        "userPass": "12345"
    },
    {
        "userName": "test",
        "userPass": "123456"
    }
]           

• 導入依賴元件（router、axios、element-plus）：

import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus'           

router：校驗成功後，跳轉位址

axios：模拟請求http(通路json檔案)

ElMessage：提示資訊

• 修改登入邏輯

const submitForm = async () => {
    formRef.value.validate((valid: any) => {
        if (valid) {
            // 表單校驗通過，可以進行送出操作
            console.log('表單校驗通過');
            console.log(formData.value); // 擷取表單資料
        } else {
            // 表單校驗失敗，可以進行錯誤處理
            console.log('表單校驗失敗');
            return false;
        }
    });

    await checkLoginValue();
};

const checkLoginValue = async () => {
    try {
        const { data } = await axios.get('./data/login.json');

        let success = false;

        for (const temp of data) {
            if (temp.userName === formData.value.username
                && temp.userPass === formData.value.password) {
                success = true;
                break;
            }
        }

        if (success) {
            router.push('/');
        } else {
            ElMessage({
                message: '使用者名或密碼錯誤，請檢查後，重新登入！',
                type: 'warning',
            });
        }

    } catch (error) {
        console.error(error);
    }
}           

完整示例：

<template>
    <div class="login-container">
        <el-form ref="formRef" :model="formData" :rules="formRules" class="login-form">
            <h2 class="login-title">登入</h2>
            <el-form-item prop="username">
                <el-input v-model="formData.username" placeholder="請輸入使用者名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="formData.password" type="password" placeholder="請輸入密碼"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">登入</el-button>
                <el-button type="primary" @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script lang="ts" setup>

import { useRouter } from 'vue-router';
import { ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus'

const formData = ref({
    username: '',
    password: '',
});

const formRules = ref({
    username: [
        { required: true, message: '請輸入使用者名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '請輸入密碼', trigger: 'blur' },
    ],
});

const formRef = ref();

const resetForm = () => {
    if (!formRef) return
    formRef.value.resetFields()
}

const router = useRouter();
const submitForm = async () => {

    console.log("formRef.value:", formRef.value);

    formRef.value.validate((valid: any) => {
        if (valid) {
            // 表單校驗通過，可以進行送出操作
            console.log('表單校驗通過');
            console.log(formData.value); // 擷取表單資料
        } else {
            // 表單校驗失敗，可以進行錯誤處理
            console.log('表單校驗失敗');
            return false;
        }
    });

    await checkLoginValue();

};

const checkLoginValue = async () => {
    try {
        const { data } = await axios.get('./data/login.json');

        let success = false;

        for (const temp of data) {
            if (temp.userName === formData.value.username
                && temp.userPass === formData.value.password) {
                success = true;
                break;
            }
        }

        if (success) {
            router.push('/');
        } else {
            ElMessage({
                message: '使用者名或密碼錯誤，請檢查後，重新登入！',
                type: 'warning',
            });
        }

    } catch (error) {
        console.error(error);
    }
}
</script>
<style scoped>
.login-container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-form {
    max-width: 400px;
    width: 100%;
}

.login-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
}
</style>