本文将介绍以下内容:

• 项目中的 public 目录和访问静态资源文件的方法
• 使用 json 文件代替http模拟请求
• 使用 Axios 直接访问 json 文件
• 改造登录页，配合 Axios 进行登录请求，并添加错误提示

项目中的 public 目录和访问静态资源文件的方法

项目中，public 目录用于存放静态资源文件，这些文件将直接复制到构建输出目录而不经过编译处理。public 目录下的文件可以通过相对路径直接访问。

以下是关于 public 目录的一些说明和示例：

• 创建 public 目录：在你的项目根目录下创建一个名为 public 的目录（如果还不存在）。
• 静态资源文件：将需要在项目中访问的静态资源文件放置在 public 目录中。这些文件可以是图片、字体、视频、音频、JSON 文件等。
• 访问静态资源文件：在你的代码中，可以通过相对路径直接访问 public 目录下的文件。例如，如果你有一个 public/images/logo.png 图片文件，你可以在 Vue 组件中这样使用

上面的代码中，我们使用了相对路径 /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 文件的数据。

在上述示例中，首先通过 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);
    }
}

完整示例：