Unable to access the MySQL database 404 error found

Question

I've been working on an address book using Laravel and vue. My views are working correctly but I keep getting 404 not found error when trying to access the data on the database. I've tried so many things but I'm missing something and I'm not sure what I'm doing wrong.

My contacts view:-

<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');
});

Contact Controler

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

I've also been having issues seeding data. I can enter it using raw SQL code but I'm still not able to get the data from the database.

Answer 1

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

Answer 2

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