发现无法访问 MySQL 数据库 404 错误

Question

我一直在使用 Laravel 和 vue 制作地址簿。 我的视图工作正常，但在尝试访问数据库上的数据时不断收到 404 not found 错误。我已经尝试了很多东西，但我错过了一些东西，我不确定我做错了什么。

我的联系人视图：-

<template>
    <div>
        <h3 class="text-center">All contacts</h3><br/>

        <table class="table table-bordered">
            <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Birthday</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="contact in contacts" :key="contact.id">
                <td>{{ contact.firstNamr }}</td>
                <td>{{ contact.lastName }}</td>
                <td>{{ contact.email }}</td>
                <td>{{ contact.phone }}</td>
                <td>{{ contact.birthday }}</td>
                <td>
                    <div class="btn-group" role="group">
                        <router-link :to="{name: 'createAddress', params: { id: contact.id }}" class="btn btn-primary">createAddress
                        </router-link>
                        <router-link :to="{name: 'editContact', params: { id: contact.id }}" class="btn btn-primary">Edit
                        </router-link>
                        <button class="btn btn-danger" @click="deleteContact(contact.id)">Delete</button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                contacts: []
            }
        },
        created() {
            this.axios
                .get('http://localhost:8000/api/contacts/')
                .then(response => {
                    this.contacts = response.data;
                });
        },
        methods: {
            deleteContact(id) {
                this.axios
                    .delete(`http://localhost:8000/api/deleteContact/${id}`)
                    .then(response => {
                        let i = this.contacts.map(item => item.id).indexOf(id); // find index of your object
                        this.contacts.splice(i, 1)
                    });
            }
        }
    }
</script>

App.js

require('./bootstrap');
window.Vue = require('vue');

import App from './App.vue';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import {routes} from './router';

Vue.use(VueRouter);
Vue.use(VueAxios, axios);

const router = new VueRouter({
    mode: 'history',
    routes: routes
});

const app = new Vue({
    el: '#app',
    router: router,
    render: h => h(App),
});

Router.js

import Contacts from './contacts.vue';
import CreateContact from './createContact.vue';
import EditContact from './editContact.vue';
import Details from './details.vue';

export const routes = [
    {
        name: 'home',
        path: '/',
        component: Contacts
    },
    {
        name: 'createContact',
        path: '/createContact',
        component: CreateContact
    },
    {
        name: 'editContact',
        path: '/editContact/:id',
        component: EditContact
    },
    {
        name: 'details',
        path: '/details/:id',
        component: Details
    },
];

API.js

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::get('contacts', 'ContactController@index');
Route::group(['prefix' => 'contact'], function () {
    Route::post('/createContact', 'ContactController@createContact');
    Route::get('editContact/{id}', 'ContactController@editContact');
    Route::post('updateContact/{id}', 'ContactController@updateContact');
    Route::delete('deleteContact/{id}', 'ContactController@deleteContact');
});

web.php

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

//

Route::get('{any}', function () {
    return view('app');
})->where('any', '.*');

Route::get('app/contacts', 'ContactController@index');
Route::group(['prefix' => 'contact'], function () {
    Route::post('app/createContact', 'ContactController@createContact');
    Route::get('app/editContact/{id}', 'ContactController@editContact');
    Route::post('app/updateContact/{id}', 'ContactController@updateContact');
    Route::delete('app/deleteContact/{id}', 'ContactController@deleteContact');
});

联系人控制员

    public function index()
    {
        $contact =  Contact::orderBy('id', 'desc')->get();
        return $contact;
    }

我在播种数据时也遇到了问题。我可以使用原始 SQL 代码输入它，但我仍然无法从数据库中获取数据。

Answer 1

我在 vue 中调用了 api/，在路由器中调用了 app/。

Answer 2

您是否在 .env 文件中添加了正确的数据库名称？