laravel databases, vuex

1. database를 생성한다.

2. .env파일에 데이터베이스 설정을 해준다.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravelspa
DB_USERNAME=root
DB_PASSWORD=패스워드

3. 모델 생성

php artisan make:model Category -mcr

4. databases/migrations/TIMESTAMP_create_create_categories_table.php 다음과 같이 작성한다.

    public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->text('image');
            $table->timestamps();
        });
    }
 

 

5. 마이그레이션

php artisan migrate

6. api설정

routes/api.php  categproes 추가

<?php
 
use Illuminate\Http\Request;
 
 
Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});
 
Route::resource('categories', 'CategoryController');
 

7. app/Http/Controllers/CategoryController.php 파일의 store()메서드에 dd($request->all()); 입력

    public function store(Request $request)
    {
        dd($request->all());
    }

8. resources/js/services/http_service.js 파일 생성

import axios from 'axios';
 
export function http(){
    return axios.create({
        baseURL: 'http://laravelspa.test'
    });
}
 

9. Vuex 설치하기(상태관리도구)

Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있습니다. 또한 Vue의 공식 devtools 확장 프로그램과 통합되어 설정 시간이 필요 없는 디버깅 및 상태 스냅 샷 내보내기/가져오기와 같은 고급 기능을 제공합니다.

https://vuex.vuejs.org/kr/installation.html

npm install vuex --save

10.resources/js/store.js 파일을 생성해준다.

import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    state:{
        apiURL:'http://laravelspa.test',
        serverPath:'http://laravelspa.test'
    },
    mutations:{},
    actions:{}
});

11. http_service.js

import store from '../store';
import axios from 'axios';
 
export function http(){
    return axios.create({
        baseURL: store.state.apiURL
    });
}
 
export function httpFile(){
    return axios.create({
        baseURL: store.state.apiURL,
        headers:{
            'Content-Type' : 'multipart/form-data'
        }
    });
}
 

12. Vue.js를 사용하여 반응 형 모바일 우선 사이트를 구축하기 위해 세계에서 가장 널리 사용되는 프레임 워크 인 Bootstrap v4를 기반으로 BootstrapVue를 시작하십시오.

주소 : bootstrap-vue.js.org

npm i bootstrap-vue

13. resources/js/app.js  설치한 패키지를 임포트해준다.

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';
 
import BootstrapVue from 'bootstrap-vue';
Vue.use(BootstrapVue);
 
new Vue({
    el: '#app',
    router,
    render: h => h(App)
});
 

14. Cetegories.vue

<template>
  <div class="container-fluid">
    <h1 class="mt-4">Dashboard</h1>
    <ol class="breadcrumb mb-4">
      <router-link to="/">Dashboardd</router-link>
    </ol>
 
    <div class="row">
      <div class="col-xl-12">
        <div class="card mb-4">
          <div class="card-header d-flex">
            <span>
              <i class="fas fa-chart-area mr-1"></i>
              Categories Menagemen
            </span>
            <button class="btn btn-primary btn-sm ml-auto" v-on:click="showNewCategoryModal">
              <span class="fa fa-plus"></span>Create New
            </button>
          </div>
          <div class="card-body">
            <table class="table">
              <thead>
                <tr>
                  <td>ID</td>
                  <td>Name</td>
                  <td>Image</td>
                  <td>Action</td>
                </tr>
              </thead>
              <tbody>
                <td>1</td>
                <td>shirt</td>
                <td>image</td>
                <td>
                  <button class="btn btn-primary btn-sm">
                    <span class="fa fa-edit"></span>
                  </button>
                  <button class="btn btn-denger btn-sm">
                    <span class="fa fa-trash"></span>
                  </button>
                </td>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
 
    <b-modal ref="NewCategoryModal" hide-footer title="Add New Category">
      <div class="d-block">
        <form v-on:submit.prevent="createCategory">
          <div class="form-group">
            <label for="name">Enter Name</label>
            <input
              type="text"
              v-model="categoryData.name"
              class="form-control"
              id="name"
              placeholder="Enter category name"
            />
          </div>
 
          <div class="form-group">
            <label for="image">Choose an image</label>
            <input type="file" v-on:change="attachImage" class="form-control" id="image" />
          </div>
 
          <hr />
 
          <div class="text-right">
            <button type="button" class="btn btn-default" v-on:cllck="hideNewCategoryModal">Cancel</button>
            <button type="submit" class="btn btn-primary">
              <span class="fa fa-check">Save</span>
            </button>
          </div>
        </form>
      </div>
    </b-modal>
  </div>
</template>
 
<script>
export default {
  name: "category",
  data() {
    return {
      categoryData: {
        name: "",
        image: ""
      }
    };
  },
  methods: {
    attachImage() {},
    hideNewCategoryModal() {
      this.$refs.NewCategoryModal.hide();
    },
    showNewCategoryModal() {
      this.$refs.NewCategoryModal.show();
    },
    createCategory() {
      console.log("form submitted");
    }
  }
};
</script>
 
<style>
</style>