本文将介绍以下内容:

• 项目中的 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>