如何在 Vue Metronic 模板 Axios 中使用我的自定义 API

问题描述

我在使用 Template Metronic Vue（演示 7）时遇到问题。 我很难使用登录/注册默认的 Metronic 模板，所以我想使用 Laravel MIX API 制作我的自定义登录/注册和另一种方法 CRUD，但是当我使用 Axios 请求 API 时，请求总是捕获错误。

在Metronic模板中访问自定义API有什么特殊的方法吗？

在这段代码中，我想尝试 console.log()。这是代码：

<b-form class="form" @submit.stop.prevent="onSubmit">

    <b-form-input
    class="form-control form-control-solid h-auto py-5 px-6"
    type="email"
    v-model="this.form.email"
    ></b-form-input>

    <b-form-input
    class="form-control form-control-solid h-auto py-5 px-6"
    type="password"
    v-model="this.form.password"
    ></b-form-input>

    <button type="submit" class="btn btn-primary font-weight-bold px-9 py-4 my-3 font-size-3">
    Sign In
    </button>
</b-form>

<script>
import axios from 'axios'

export default {
    name: 'login',data() {
        return {
            form: {
                email: '',password: ''
            }
        }
    },methods: {
        onLogin() {
        axios.post('http://localhost:8000/api/getUser')
            .then(response => 
            console.log(response)
            })
            .catch(error => {
            console.log('error created')
            console.log(error)
            })
        }
    }
}
</script>

postman console

解决方法

要使用此代码，您应该删除两件事：

1. 从 main.js 中删除 MockService 初始化

// Remove this to disable mock API
MockService.init();

2. 从 main.js 中删除 API 初始化

// API service init
ApiService.init();