POST 404 не найден при отправке Vue js и Laravel? - PullRequest
0 голосов
/ 02 апреля 2020

Я новичок в Vue js. Я пытаюсь хранить данные. Я загружаю <router-view> в welcome.blade. php:

<div id="app">
    <router-view></router-view>

    <br>
    <router-link :to="{ name: 'home' }">Home</router-link>
    <router-link :to="{ name: 'about' }">About</router-link>
    <router-link :to="{ name: 'jobseekercreate' }">Job Seeker Create</router-link>

</div>

Как видите, у меня есть 3 ссылки. Если я нажимаю на ссылку jobseekercreate, она работает, но если я обновлю sh страницу, я получаю ошибку 404. Если я перефразирую sh страницу на домашней странице или о ссылках, я вижу компоненты Home и About как обычно. Почему, если я нажимаю jobseekercreate ссылку, она работает, но если я обновляю sh страницу, я получаю ошибку 404 не найдена?

В JobSeekerCreate. vue Компонент, когда я нажимаю кнопку «Создать профиль» Я получаю 2 ошибки.

1) POST http://vuehighrjobs.test/jobseeker/create 404 (не найдено)? Может быть, это как-то связано с проблемой выше?

Вот мой код. JobSeekerCreate. vue Компонент с методом createProfile:

<style>
    [v-cloak] {
        display: none;
    }
</style>
<template>
<div class="row">

                            <div class="col-md-10 offset-md-1">

                                <div class="alert alert-danger" v-if="errors.length > 0">
                                    <ul>
                                        <li v-for="error in errors">{{error}}</li>
                                    </ul>
                                </div>

                                <h1>Create Profile</h1>

                                <div class="form-group">
                                    <label for="experience">Experience:</label>
                                    <textarea class="form-control" v-model="jobseekerprofile.experience" id="experience" rows="10" maxlength="1000"></textarea>
                                </div>

                                <div class="form-group">
                                    <label for="additional-skills">Additional Skills (optional):</label>
                                    <textarea class="form-control" v-model="jobseekerprofile.additional_skills" id="additional-skills" rows="3" maxlength="250"></textarea>
                                </div>

                                <div class="form-group">
                                    <button @click="createProfile" type="submit" class="btn btn-primary">Create Profile</button>
                                </div>
                                <br><br><br><br>

                            </div>

                        </div>
</template>
<script>
    import Admin from './Admin'
    import AdminSideNav from '../components/AdminSideNav'

    export default {
        name: 'JobSeekerCreate',
        components: {
            Admin,
            AdminSideNav
        },

        data(){

            return {

                jobseekerprofile:{
                    experience: '',
                    additional_skills: ''
                },
                jobseekerprofiles: [],
                uri: 'http://vuehighrjobs.test/jobseeker/create',
                errors: [],
                loading: false

            }

        },

        methods: {

            createProfile(){

                axios.post(this.uri, {name: this.jobseekerprofile.experience, body: this.jobseekerprofile.additional_skills})

                    .then(response=>{

                        this.jobseekerprofiles.push(response.data.jobseekerprofile);
                        this.resetData();

                    })

                    .catch(error=>{

                        this.errors = [];

                        if(error.response.data.errors.experience){
                            this.errors.push(error.response.data.errors.experience[0])
                        }

                        if(error.response.data.errors.additional_skills){
                            this.errors.push(error.response.data.errors.additional_skills[0])
                        }

                    });

            }

        }

    }
</script>

маршрутов. js:

import Home from './views/Home'
import About from './views/About'
import JobSeekerCreate from './views/JobSeekerCreate'

export default {
    mode: 'history',

    routes: [

        {
            path: '/',
            component: Home,
            name: 'home'
        },

        {
            path: '/about',
            component: About,
            name: 'about'
        },

        {
            path: '/jobseeker/create',
            component: JobSeekerCreate,
            name: 'jobseekercreate'
        },

    ]
}

web. php:

Route::get('/{any?}', function () {
   return view('welcome');
});

api . php:

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

Route::resource('jobseekerprofile', 'JobSeekerProfileController');

welcome.blade. php file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Highr Jobs</title>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/main.css">
    <!-- Animate CSS -->
    <link rel="stylesheet" href="css/animate.min.css">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Font Awesome icons -->
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Oswald:400,700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">

    <!-- Custom fonts for this template-->
    <link href="css/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

    <!-- tempusdominus Bootstrap 4 Date and Time CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />

    <!-- Custom styles for this template-->
    <link href="css/sb-admin-2.min.css" rel="stylesheet">

    <style type="text/css">
        .fc-title {
            white-space: normal !important;
        }

        h1, h2, h3, h4 {
            font-family: 'Oswald', Helvetica, sans-serif;
            text-transform: uppercase;
            font-weight: bold;
        }

        .text-white {
            color: #5a5c69!important;
        }

        #search {
            border: 1px solid #5a5c69 !important;
        }

        @media only screen and (max-width: 767px) {

            .sidebar-brand img {
                width: 88px !important;
            }

        }
    </style>

    <!-- Laravel Full Calendar   https://investmentnovel.com/laravel-full-calendar-tutorial-with-example/ -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>

</head>
<body>

<div id="app">
    <router-view></router-view>

    <br>
    <router-link :to="{ name: 'home' }">Home</router-link>
    <router-link :to="{ name: 'about' }">About</router-link>
    <router-link :to="{ name: 'jobseekercreate' }">Job Seeker Create</router-link>

</div>

<script src="/js/app.js"></script>
</body>
</html>

и вторая ошибка при нажатии кнопки «Создать профиль»: TypeError: Cannot read property 'experience' of undefined Не знаю, почему После того, как я нажму кнопку «Создать профиль», я увижу данные, которые я ввел во входы в консоли Vue. Смотрите скриншот. enter image description here

1 Ответ

0 голосов
/ 03 апреля 2020

его, потому что вы просто получаете один параметр в маршруте laravel, поэтому он его не обнаруживает. у вас есть два решения, одно из которых - принять все параметры, подобные этому:

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

секунда - использовать резервный маршрут здесь подробнее https://laravel.com/docs/routing#fallback -routes

...