{"id":11786,"date":"2022-03-10T10:00:00","date_gmt":"2022-03-10T01:00:00","guid":{"rendered":"https:\/\/www.gigas-jp.com\/appnews\/?p=11786"},"modified":"2022-03-10T10:19:09","modified_gmt":"2022-03-10T01:19:09","slug":"laravel-vue-js-crud-single-page-application%e3%81%ae%e4%bd%9c%e6%88%90","status":"publish","type":"post","link":"https:\/\/www.gigas-jp.com\/appnews\/archives\/11786","title":{"rendered":"Laravel + Vue JS CRUD Single Page Application\u306e\u4f5c\u6210"},"content":{"rendered":"\n

<\/p>\n\n\n\n

\u4eca\u56de\u306f\u3001Laravel\u3068Vue JS\u3092\u4f7f\u3063\u305fSingle Page Application\u306e\u4f5c\u6210\u65b9\u6cd5\u306b\u3064\u3044\u3066\u3054\u6848\u5185\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\u3053\u3053\u3067\u306f\u3001\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u306b\u5fc5\u8981\u306a\u624b\u9806\u3092\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

\u3053\u306e\u30b3\u30de\u30f3\u30c9\u3067Laravel\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u65b0\u898f\u306b\u4f5c\u6210\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/strong><\/h3>\n\n\n\n
composer create-project laravel\/laravel --prefer-dist laravel-vue<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\u6b21\u306b\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e.env config\u30d5\u30a1\u30a4\u30eb\u306b\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u540d\u3001\u30e6\u30fc\u30b6\u30fc\u540d\u3001\u30d1\u30b9\u30ef\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u63a5\u7d9a\u3092\u884c\u3046\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
DB_CONNECTION=mysql\nDB_HOST=127.0.0.1\nDB_PORT=3306\nDB_DATABASE=laravel_vue\nDB_USERNAME=root\nDB_PASSWORD=<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
Laravel\u3067Article\u30e2\u30c7\u30eb\u3092\u4f5c\u6210\u3059\u308b\u306b\u306f\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/h3>\n\n\n\n
php artisan make:model Article -m<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
database\/migrations\/create_articles_table.php<\/strong> \u306b\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
<?php\nuse Illuminate\\Database\\Migrations\\Migration;\nuse Illuminate\\Database\\Schema\\Blueprint;\nuse Illuminate\\Support\\Facades\\Schema;\nclass CreateArticlesTable extends Migration\n{\n    \/**\n     * Run the migrations.\n     *\n     * @return void\n     *\/\n    public function up()\n    {\n        Schema::create('artcles', function (Blueprint $table) {\n            $table->id();\n            $table->string('title');\n            $table->text('descriptions');            \n            $table->timestamps();\n        });\n    }\n    \/**\n     * Reverse the migrations.\n     *\n     * @return void\n     *\/\n    public function down()\n    {\n        Schema::dropIfExists('articles');\n    }\n}<\/code><\/pre>\n\n\n\n
\u30de\u30a4\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3092\u547c\u3073\u51fa\u3059\u306b\u306f\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
php artisan migrate<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\u8a18\u4e8b\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u3092\u4f5c\u6210<\/h3>\n\n\n\n
\u8a18\u4e8b\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u3092\u4f5c\u6210\u3057\u3001CRUD\u64cd\u4f5c\u306e\u30e1\u30bd\u30c3\u30c9\u3092\u5b9a\u7fa9\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059<\/p>\n\n\n\n
php artisan make:controller ArticleController<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Article Controller\u3092\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3067\u66f4\u65b0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
<?php\nnamespace App\\Http\\Controllers;\nuse Illuminate\\Http\\Request;\nuse App\\Models\\Article;\nclass ArticleController extends Controller\n{\n    public function index()\n    {\n        $articles = Article::all()->toArray();\n        return array_reverse($articles);      \n    }\n    public function store(Request $request)\n    {\n        $article = new Article();\n        $article->title = $request->input('title');\n        $article->description = $request->input('description');\n        $article->save();\n\n        return response()->json('New Article is successfully created!');\n    }\n    public function show($id)\n    {\n        $article = Article::find($id);\n        return response()->json($article);\n    }\n    public function update($id, Request $request)\n    {\n        $article = Article::find($id);\n        $article->title= $request->title;\n        $article->description = $request->description;\n        $article->save();\n\n        return response()->json('Article is successfully updated!');\n    }\n    public function destroy($id)\n    {\n        $article = Article::find($id);\n        $article->delete();\n        return response()->json('Article is successfully deleted!');\n    }\n}<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
routes\u306eweb.php\u3068api.php\u3092\u66f4\u65b0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/h3>\n\n\n\n
routes\/web.php<\/strong><\/p>\n\n\n\n
<?php\nuse Illuminate\\Support\\Facades\\Route;\n\/*\n|--------------------------------------------------------------------------\n| Web Routes\n|--------------------------------------------------------------------------\n|\n*\/\n \nRoute::get('{any}', function () {\n    return view('app');\n})->where('any', '.*');<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
routes\/api.php<\/strong><\/p>\n\n\n\n
<?php\nuse Illuminate\\Http\\Request;\nuse Illuminate\\Support\\Facades\\Route;\nuse App\\Http\\Controllers\\ArticleController;\n\/*\n|--------------------------------------------------------------------------\n| API Routes\n|--------------------------------------------------------------------------\n*\/\nRoute::middleware('api')->group(function () {\n    Route::resource('articles', ArticleController::class);\n});<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
 laravel\/ui composer \u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/h3>\n\n\n\n
composer require laravel\/ui<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\u6b21\u306b\u3001Vue\u306e\u8db3\u5834\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/h3>\n\n\n\n
laravel\/ui\u30d1\u30c3\u30b1\u30fc\u30b8\u306b\u306f\u3001Vue\u3092\u4f7f\u3044\u59cb\u3081\u308b\u305f\u3081\u306b\u5fc5\u8981\u306a\u3059\u3079\u3066\u306e\u3082\u306e\u3092\u81ea\u52d5\u7684\u306b\u8db3\u5834\u306b\u3057\u3066\u304f\u308c\u308b\u4fbf\u5229\u306aArtisan\u30b3\u30de\u30f3\u30c9\u304c\u3044\u304f\u3064\u304b\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
php artisan ui vue<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\u30d5\u30a1\u30a4\u30eb\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b<\/strong><\/h3>\n\n\n\n
\u6700\u5f8c\u306b\u3001\u65b0\u3057\u304f\u8ffd\u52a0\u3055\u308c\u305f\u4f9d\u5b58\u95a2\u4fc2\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u3001\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
npm install && npm run dev<\/code><\/pre>\n\n\n\n
\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001vue router \u304a\u3088\u3073 vue axios \u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
npm install vue-router vue-axios<\/code><\/pre>\n\n\n\n
\u6b21\u306b\u3001npm \u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3001\u30a2\u30bb\u30c3\u30c8\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b\u305f\u3081\u306b\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
npm install\nnpm run watch<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Laravel\u3067Vue\u3092\u958b\u59cb\u3059\u308b<\/h3>\n\n\n\n
layout\u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u6210\u3057\u3001\u3053\u306e\u30d5\u30a9\u30eb\u30c0\u5185\u306bapp.blade.php\u3092\u4f5c\u6210\u3057\u3066\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u8a2d\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
resources\/views\/layout\/app.blade.ph<\/strong>p<\/p>\n\n\n\n
<!doctype html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <meta name=\"csrf-token\" value=\"{{ csrf_token() }}\" \/>\n    <title>Vue JS CRUD Operations in Laravel<\/title>\n    <link href=\"{{ mix('css\/app.css') }}\" type=\"text\/css\" rel=\"stylesheet\" \/>\n<\/head>\n<body>\n    <div id=\"app\"><\/div>\n    <script src=\"{{ mix('js\/app.js') }}\" type=\"text\/javascript\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
App.vue \u30d5\u30a1\u30a4\u30eb\u306b router-view \u547d\u4ee4\u3092\u8ffd\u52a0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u305d\u3053\u3067\u3001resources\/js \u30d5\u30a9\u30eb\u30c0\u306b App.js \u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
resources\/js\/App.js<\/strong><\/p>\n\n\n\n
<template>\n    <div class=\"container\"> \n        <nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\n            <div class=\"collapse navbar-collapse\">\n                <div class=\"navbar-nav\">\n                    <router-link to=\"\/\" class=\"nav-item nav-link\">Articles List<\/router-link>\n                    <router-link to=\"\/create\" class=\"nav-item nav-link\">Create Article<\/router-link>\n                <\/div>\n            <\/div>\n        <\/nav>\n        <router-view> <\/router-view>\n    <\/div>\n<\/template>\n \n<script>\n    export default {}\n<\/script><\/code><\/pre>\n\n\n\n
\u305d\u3057\u3066\u3001resources\/js\/components\u30d5\u30a9\u30eb\u30c0\u306e\u4e2d\u306b\u5fc5\u8981\u306avue js\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
resources\/js\/components\/AllArticle.vue<\/strong><\/p>\n\n\n\n
<template>\n    <div>\n        <h2 class=\"text-center\">Article List<\/h2>\n \n        <table class=\"table\">\n            <thead>\n            <tr>\n                <th>ID<\/th>\n                <th>Title<\/th>\n                <th>Desciption<\/th>\n                <!-- <th>Actions<\/th> -->\n            <\/tr>\n            <\/thead>\n            <tbody>\n            <tr v-for=\"article in articles\" :key=\"a.article\">\n                <td>{{ article.id }}<\/td>\n                <td>{{ article.title }}<\/td>\n                <td>{{ article.description}}<\/td>\n                <td>\n                    <div class=\"btn-group\" role=\"group\">\n                        <router-link :to=\"{name: 'edit', params: { id: article.id }}\" class=\"btn btn-success\">Edit<\/router-link>\n                        <button class=\"btn btn-danger\" @click=\"deleteArticle(article.id)\">Delete<\/button>\n                    <\/div>\n                <\/td>\n            <\/tr>\n            <\/tbody>\n        <\/table>\n    <\/div>\n<\/template>\n \n<script>\n    export default {\n        data() {\n            return {\n                articles: []\n            }\n        },\n        created() {\n            this.axios\n                .get('http:\/\/localhost:8000\/api\/articles\/')\n                .then(response => {\n                    this.articles = response.data;\n                });\n        },\n        methods: {\n            deleteArticle(id) { \n                this.axios\n                    .delete(`http:\/\/localhost:8000\/api\/articles\/${id}`)\n                    .then(response => {\n                        let i = this.articles.map(data => data.id).indexOf(id);\n                        this.articles.splice(i, 1)\n                    });\n            }\n        }\n    }\n<\/script><\/code><\/pre>\n\n\n\n
resources\/js\/components\/CreateArticle.vue<\/strong><\/p>\n\n\n\n
<template>\n    <div>\n        <h3 class=\"text-center\">Create Article<\/h3>\n        <div class=\"row\">\n            <div class=\"col-md-6\">\n                <form @submit.prevent=\"addArticle\">\n                    <div class=\"form-group\">\n                        <label>Title<\/label>\n                        <input type=\"text\" class=\"form-control\" v-model=\"article.title\">\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label>Description<\/label>\n                        <input type=\"text\" class=\"form-control\" v-model=\"article.description\">\n                    <\/div>\n                    <button type=\"submit\" class=\"btn btn-primary\">Create<\/button>\n                <\/form>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/template>\n \n<script>\n    export default {\n        data() {\n            return {\n                article: {}\n            }\n        },\n        methods: {\n            addArticle() {\n                this.axios\n                    .post('http:\/\/localhost:8000\/api\/articles', this.article)\n                    .then(response => (\n                        this.$router.push({ name: 'home' })\n                    ))\n                    .catch(err => console.log(err))\n                    .finally(() => this.loading = false)\n            }\n        }\n    }\n<\/script><\/code><\/pre>\n\n\n\n
 resources\/js\/components\/EditArticle.vue<\/strong><\/p>\n\n\n\n
<template>\n    <div>\n        <h3 class=\"text-center\">Edit Article<\/h3>\n        <div class=\"row\">\n            <div class=\"col-md-6\">\n                <form @submit.prevent=\"updateArticle\">\n                    <div class=\"form-group\">\n                        <label>Title<\/label>\n                        <input type=\"text\" class=\"form-control\" v-model=\"article.title\">\n                    <\/div>\n                    <div class=\"form-group\">\n                        <label>Detail<\/label>\n                        <input type=\"text\" class=\"form-control\" v-model=\"article.description\">\n                    <\/div>\n                    <button type=\"submit\" class=\"btn btn-primary\">Update<\/button>\n                <\/form>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/template>\n \n<script>\n    export default {\n        data() {\n            return {\n                article: {}\n            }\n        },\n        created() {\n            this.axios\n                .get(`http:\/\/localhost:8000\/api\/articles\/${this.$route.params.id}`)\n                .then((res) => {\n                    this.article = res.data;\n                });\n        },\n        methods: {\n            updateArticle() {\n                this.axios\n                    .patch(`http:\/\/localhost:8000\/api\/articles\/${this.$route.params.id}`, this.article)\n                    .then((res) => {\n                        this.$router.push({ name: 'home' });\n                    });\n            }\n        }\n    }\n<\/script><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
vue\u306e\u30eb\u30fc\u30c8\u3092\u4f5c\u6210\u3059\u308b\u306b\u306f\u3001resources\/js\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u4e2d\u306broutes.js\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/h3>\n\n\n\n
resources\/js\/routes.js<\/strong><\/p>\n\n\n\n
import AllArticle from '.\/components\/AllArticle.vue';\nimport CreateArticle from '.\/components\/CreateArticle.vue';\nimport EditArticle from '.\/components\/EditArticle.vue';\n \nexport const routes = [\n    {\n        name: 'home',\n        path: '\/',\n        component: AllArticle\n    },\n    {\n        name: 'create',\n        path: '\/create',\n        component: CreateArticle\n    },\n    {\n        name: 'edit',\n        path: '\/edit\/:id',\n        component: EditArticle\n    }\n];<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\u6700\u5f8c\u306bVue App.js\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/h3>\n\n\n\n
 resources\/js\/app.js<\/strong><\/p>\n\n\n\n
\/**\n * First we will load all of this project's JavaScript dependencies which\n * includes Vue and other libraries. It is a great starting point when\n * building robust, powerful web applications using Vue and Laravel.\n *\/\nrequire('.\/bootstrap');\nwindow.Vue = require('vue');\nimport App from '.\/App.vue';\nimport VueAxios from 'vue-axios';\nimport VueRouter from 'vue-router';\nimport axios from 'axios';\nimport { routes } from '.\/routes';\n\/**\n * Next, we will create a fresh Vue application instance and attach it to\n * the page. Then, you may begin adding components to this application\n * or customize the JavaScript scaffolding to fit your unique needs.\n *\/\nVue.use(VueRouter);\nVue.use(VueAxios, axios);\n \nconst router = new VueRouter({\n    mode: 'history',\n    routes: routes\n});\n \nconst app = new Vue({\n    el: '#app',\n    router: router,\n    render: h => h(App),\n});<\/code><\/pre>\n\n\n\n
\u30a2\u30d7\u30ea\u3092\u8d77\u52d5\u3059\u308b\u306b\u306f\u3001\u4ee5\u4e0b\u306e2\u3064\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
npm run watch\nphp artisan serve<\/code><\/pre>\n\n\n\n
\u30d6\u30e9\u30a6\u30b6\u3067 http:\/\/127.0.0.1:8000 \u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3068\u3001\u8a18\u4e8b\u306e\u4e00\u89a7\u8868\u793a\u3001\u8a18\u4e8b\u306e\u4f5c\u6210\u3001\u66f4\u65b0\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
<\/p>\n\n\n\n
\u3053\u306e\u8a18\u4e8b\u304c\u3042\u306a\u305f\u306e\u304a\u5f79\u306b\u7acb\u3066\u308c\u3070\u5e78\u3044\u3067\u3059\u3002<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
By Tsuki<\/p>\n
\n            
<\/g:plusone><\/div>\n            
 \"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"<\/a>