Vue.jsとPhpで見積りシステム（７）〜バックエンドデータベース構築 編〜

laravel＋Vue.js
2019.10.24
この記事は約12分で読めます。
記事内に広告が含まれます。

Vue.jsとPhpで見積りシステムの関連記事リスト
→Vue.jsとPhpで見積りシステム（１）〜設計・プロジェクト作成 編〜
→Vue.jsとPhpで見積りシステム（２）〜Laravel導入 編〜
→Vue.jsとPhpで見積りシステム（３）〜CORS設定 編〜
→Vue.jsとPhpで見積りシステム（４）〜Vue.js導入 編〜
→Vue.jsとPhpで見積りシステム（５）〜Vue.jsコーディング基本 編〜
→Vue.jsとPhpで見積りシステム（６）〜Vue.jsコーディング拡張 編〜
→Vue.jsとPhpで見積りシステム（７）〜バックエンドデータベース構築 編〜
→Vue.jsとPhpで見積りシステム（８）〜Laravel−Admin導入 編〜
→Vue.jsとPhpで見積りシステム（９）〜Laravel-Adminカスタマイズ 編〜

スポンサーリンク

Php(Laravel側)のデータベース化

今まではLaravelにハードコードされたデータでしたが、今度はデータベースから値を取得してVue側に返却するように修正していきます

Databseの作成

% mysql -uroot -p

Enter password:
Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MariaDB connection id is 46
Server version: 10.4.6-MariaDB Homebrew

Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

MariaDB [(none)]>

ここでデータベースを作成します。

MariaDB [(none)]> create database `mitsumori-db` char set=utf8mb4;
Query OK, 1 row affected (0.001 sec)

MariaDB [(none)]>¥q

Laravelの.envファイルのデータベース設定を修正

以下のようにDB_の部分を修正します

% vi .env

・
・
DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=mitsumori-db
DB_USERNAME=root
DB_PASSWORD=password
・
・

マイグレーションファイルの作成

% php artisan make:migration create_items_table

これでdatabase/migrationsフォルダの下にMigrationファイルができます。

% vi database/migrations/作成日付時分秒_create_item_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateItemsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('items', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->integer("category")->comment("パーツの種類[0:cpu,1:MotherBoard,2:VideoCard,4:Storage,5:PcCase]");
            $table->string("name", 255)->comment("商品名");
            $table->text("Description")->nullable()->comment("商品説明");
            $table->integer("price")->comment("価格");
            $table->timestamps();
            $table->softDeletes();

        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('items');
    }
}

migrationを実行します

% php artisan migrate

Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (0.02 seconds)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (0.02 seconds)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (0.01 seconds)
Migrating: 2019_10_23_075947_create_items_table
Migrated:  2019_10_23_075947_create_items_table (0.01 seconds)

初期値データを作成します

初期値データをSeed値といいます。

% vi databases/seeds/DatabaseSeeder.php

<?php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        // $this->call(UsersTableSeeder::class);
        DB::table('items')->insert([
            ['id'=>1,'category'=> 0, 'name'=>'すごいCPU', 'price'=>50000],
            ['id'=>2,'category'=> 0, 'name'=>'普通のCPU', 'price'=>10000],
            ['id'=>3,'category'=> 0, 'name'=>'イマイチなCPU', 'price'=>3000],
            ['id'=>4,'category'=> 1, 'name'=>'すごいマザーボード', 'price'=>30000],
            ['id'=>5,'category'=> 1, 'name'=>'普通のマザーボード', 'price'=>12000],
            ['id'=>6,'category'=> 1, 'name'=>'イマイチなマザーボード', 'price'=>5000],
            ['id'=>7,'category'=> 2, 'name'=>'すごいビデオカード', 'price'=>60000],
            ['id'=>8,'category'=> 2, 'name'=>'普通のビデオカード', 'price'=>8000],
            ['id'=>9,'category'=> 2, 'name'=>'イマイチなビデオカード', 'price'=>2000],
            ['id'=>10,'category'=> 3, 'name'=>'すごいSSD', 'price'=>20000],
            ['id'=>11,'category'=> 3, 'name'=>'普通のHDD', 'price'=>5000],
            ['id'=>12,'category'=> 3, 'name'=>'イマイチなSDカード', 'price'=>800],
            ['id'=>13,'category'=> 4, 'name'=>'すごいケース', 'price'=>12000],
            ['id'=>14,'category'=> 4, 'name'=>'普通のケース', 'price'=>3000],
            ['id'=>15,'category'=> 4, 'name'=>'イマイチなケース', 'price'=>1500]
        ]);
    }
}

シード値をデータベースに投入する

% php artisan db:seed
Database seeding completed successfully.

ApiController.phpの修正

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Item;

class ApiController extends Controller
{
    const CPU = 0;
    const MOTHER_BOARD = 1;
    const VIDEO_CARD = 2;
    const STORAGE = 3;
    const PC_CASE = 4;

    /**
     * データ取得
     */
    private function get_data($category){
        $res = Item::where('category', $category)->get();
        foreach($res as $key => $value){
            $arr[] = ['id' => $value->id, 'name'=> $value->name,'price'=>$value->price];
        }
        return $arr;
    }

    /**
     * CPU一覧の取得
     */
    public function get_cpu(){
        return  $this->get_data(self::CPU);
    }

    /**
     * マザーボード一覧の取得
     */
    public function get_mother_board(){
        return  $this->get_data(self::MOTHER_BOARD);
    }

    /**
     * フラフィックカード一覧の取得
     */
    public function get_video_card(){
        return  $this->get_data(self::VIDEO_CARD);
    }

    /**
     * ストレージ一覧の取得
     */
    public function get_storage(){
        return  $this->get_data(self::STORAGE);
    }

    /**
     * PCケース一覧の取得
     */
    public function get_pc_case(){
        return  $this->get_data(self::PC_CASE);
    }

    /**
     * 税率
     */
    public function get_tax(){
        $response = [
            'rate'=>10
        ];
        return $response;
    }
}

以上で、いままでモックだったデータがデータベースから参照して表示するようになりました。
次回はデータベースの修正ができるようにAdmin機能をつけます。

コメント

タイトルとURLをコピーしました