Laravel 5.6 + Vue.js で、SPA開発(2) axiosで登録機能など　#Laravel #vue.js #SPA

index:

概要:
環境とか
構成の概要
参考の設定
参考のページ
実装など
api.php
Vueコンポーネント

概要:

前回のSPA(SinglePageApplication) 構成で、Laravel 5 +vue.js
の関連となり、DBアプリ実装となります。

環境とか

php7.1
Laravel 5.6
Vue.js

構成の概要

・Laravel
モデル、WEB　API

・Vue.js, Vue-router
View, ルーティング

みたいな構成になり、LaravelのMVC構成とは
異なる点が、ポイントになるかと思います。

参考の設定

resource など、一部のフォルダです。

github.com

参考のページ

https://qiita.com/Yorinton/items/944044371dec48346eda

https://daiki-sekiguchi.com/2018/08/13/laravel-vue-js-helloworld/

実装など

DBは、事前に作成しておきます、

・migration
php.exe artisan make:migration create_tasks_table --create=tasks
php.exe artisan migrate

https://github.com/kuc-arc-f/vue_spa1/blob/master/database/migrations/2019_04_04_063010_create_tasks_table.php

・モデルの作成
php.exe artisan make:model Task

・web.php
https://github.com/kuc-arc-f/vue_spa1/blob/master/routes/web.php

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

・ app.blade.php
https://github.com/kuc-arc-f/vue_spa1/blob/master/resources/views/app.blade.php
axiosも、読み込んでますが。

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
        <script>
            window.Laravel = {
                csrfToken: "{{ csrf_token() }}"
            };
        </script>
        <script src="{{ asset('js/axios.min.js') }}?A1"></script>
    </head>
    <body>
        <div id="app">
            <div class="container">
                <router-view></router-view>
            </div>
        </div>
        <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

・app.js
VueRouterで、ルーティングしています。
https://github.com/kuc-arc-f/vue_spa1/blob/master/resources/assets/js/app.js

import Vue from 'vue'
import VueRouter from 'vue-router'

require('./bootstrap');

window.Vue = require('vue');

Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'history',
    routes: [
       { path: '/tasks'              , component: require('./components/Tasks/Index.vue') },
       { path: '/tasks/new/'         , component: require('./components/Tasks/new.vue') },
       { path: '/tasks/show/:id'     , component: require('./components/Tasks/show.vue') },
       { path: '/tasks/edit/:id'     , component: require('./components/Tasks/edit.vue') },
       { path: '/about', component: require('./components/About.vue') }
    ]
});

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

api.php

Laravel API の作成、

<?php

use Illuminate\Http\Request;
//use App\Article;

Route::group(['middleware' => 'api'], function() {
    //
    Route::get('tasks',  function() {
        $tasks = App\Task::all()->take(5);
        return $tasks;
    });
    Route::get('tasks/show/{id}',  function($id) {
        $task = App\Task::find($id);
        return $task;
    });
    Route::get('tasks/edit/{id}',  function($id) {
        $task = App\Task::find($id);
        return $task;
    });
    Route::post('tasks/add',  function() {
        $task = new App\Task();
        $task->title   = request('title');
        $task->content = request('content');
        $task->save();
        return ['title' => request('title'),'content' => request('content')];
    });
    // /api/tasks/update
    Route::post('tasks/update/{id}',  function($id) {
//        $task = new App\Task();
        $task = App\Book::find($id);
        $task->title   = request('title');
        $task->content = request('content');
        $task->save();
        return ['title' => request('title'),'content' => request('content')];
    });

    Route::get('test',  function() {
        return "#test";
    });

});