laravel Vue.js で最初にやる設定

laravelのバージョンは5.6

apache

DocumentRootの変更とAllowOverride設定を変更する。
再起動必要

httpd.conf

DocumentRoot "/var/www/html/sample/public"

<Directory "/var/www/html/sample/public">
    AllowOverride All
</Directory>

タイムゾーン設定

config/app.php

'timezone' => 'Asia/Tokyo',
'locale' => 'jp',
'fallback_locale' => 'ja',

DB設定

DB_HOSTやDB_DATABASEの右側を変更する。

config\database.php

    'connections' => [

        'sqlite' => [
            'driver' => 'sqlite',
            'database' => env('DB_DATABASE', database_path('database.sqlite')),
            'prefix' => '',
        ],

        'mysql' => [
            'driver' => 'mysql',
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'strict' => true,
            'engine' => null,
        ],

下記は /api/todosの例

ルーティング設定

routes\api.php

Route::resource('todos', 'Api\TodosController')
    ->only(['index', 'show', 'store']);

ルーティング設定がうまくいかない場合は、下記を試す。正しく設定されている場合は画面にUsersと表示される。
表示されない場合はapacheの設定が漏れていないかなど確認する。

routes\api.php

Route::get('users', function()
{
    return 'Users!';
});

コントローラーの作成

php artisan make:controller Api/TodosController

必要なメソッドを追加する。

モデルの作成

php artisan make:model Todo

リソースの作成

php artisan make:resource TodoResource

ログ設定

\.env

LOG_CHANNEL=daily

storage/logs/laravel-YYYY-MM-DD.logに出力される。
ログレベルを変更にはconfig\logging.phpを修正する。

SQLログ設定

app\Providers\EventServiceProvider.php

    public function register()
    {
        DB::listen(
            function($query) {
                Log::debug("SQL LOG::", [$query->sql, $query->bindings, $query->time]);
            }
        );
    }

環境設定フィルから不要な定義削除

.envフィルの設定を見直す。

todosテーブルを作成して、Postmanで動作確認する。

ルーター

公式ルータのvue-router.jsをインストール
vue-router.js

resources/assets/js/app.js

// vueとvue-routerを定義する
import Vue from 'vue'
import VueRouter from 'vue-router'

// vue-routerを宣言する
Vue.use(VueRouter);

// routingを設定する
const router = new VueRouter({
    mode: 'history',
    routes: [
        // TOPページ
        { path: '/', component: require('./components/top/Top.vue') },
        // TODO検索
        { path: '/todo', component: require('./components/todo/SearchComponent.vue') },
    ]
});

const app = new Vue({
    router,
}).$mount('#app');

http

vue-resourceは非推奨な感じになったので、axiosをインストールする。

vue-resourceは非推奨
axios

npm install axios --save

mounted() {
    axios.get("/api/todos")
        .then(response => {
            console.log("yes!!!!!!!!!!!!");
        })
}

コンポーネント作成

resources\assets\js\components\todo\SearchComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">TODO Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>

        <div>
            <table>
                <thead>
                <tr>
                    <th>
                        名前
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="todo in todos">
                     <td>{{ todo['name'] }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                todos : []
             }
        },
        mounted() {
            console.log('Todo Component')

            axios.get("/api/todos")
                .then(response => {
                debugger;
                    this.$set(this, 'todos', response.data.data)
                    console.log("yes!!!!!!!!!!!!");
                }, this)

        }
    }
</script>

npm run devして、画面から動作確認する。

vuetifyをインストールする。

npm install vuetify --save

マテリアルデザイン用アイコンもインストールする。

npm install @mdi/font

外枠のテンプレートは必ず<v-app id="app">のようなv-appタグで囲む必要がある。
このタグで囲まないとボタン(color="success")などのスタイルが適用されない。

<v-app id="app">
    <p>
        <router-link to="/todo">Go to Todo</router-link>
        <router-link to="/">Go to Top</router-link>
    </p>

    <div class="container">
        <router-view></router-view>
    </div>
</v-app>