laravel databases, vuex

laravel databases, vuex

1. database를 생성한다.

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

1 2 3 4 5 6 DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravelspa DB_USERNAME=root DB_PASSWORD=패스워드 cs

3. 모델 생성

1 php artisan make:model Category -mcr cs

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

1 2 3 4 5 6 7 8 9 10 public function up() { Schema::create('categories', function (Blueprint $table) { $table->bigIncrements('id'); $table->string('name'); $table->text('image'); $table->timestamps(); }); } Colored by Color Scripter cs

5. 마이그레이션

1 php artisan migrate cs

6. api설정

routes/api.php categproes 추가

1 2 3 4 5 6 7 8 9 10 11 get('/user', function (Request $request) { return $request->user(); }); Route::resource('categories', 'CategoryController'); Colored by Color Scripter cs

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

1 2 3 4 public function store(Request $request) { dd($request->all()); } Colored by Color Scripter cs

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

1 2 3 4 5 6 7 8 import axios from 'axios'; export function http(){ return axios.create({ baseURL: 'http://laravelspa.test' }); } Colored by Color Scripter cs

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

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

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

1 npm install vuex --save cs

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

1 2 3 4 5 6 7 8 9 10 11 12 13 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:{} }); Colored by Color Scripter cs

11. http_service.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 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' } }); } Colored by Color Scripter cs

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

주소 : bootstrap-vue.js.org

1 npm i bootstrap-vue cs

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 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) }); Colored by Color Scripter cs

14. Cetegories.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 < template > < div class = "container-fluid" > < h1 class = "mt-4" >Dashboard < ol class = "breadcrumb mb-4" > < router-link to = "/" >Dashboardd < 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" > Categories Menagemen < button class = "btn btn-primary btn-sm ml-auto" v-on:click = "showNewCategoryModal" > < span class = "fa fa-plus" >Create New < div class = "card-body" > < table class = "table" > < thead > < tr > < td >ID < td >Name < td >Image < td >Action < tbody > < td >1 < td >shirt < td >image < td > < button class = "btn btn-primary btn-sm" > < span class = "fa fa-edit" > < button class = "btn btn-denger btn-sm" > < span class = "fa fa-trash" > < 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 < input type = "text" v-model = "categoryData.name" class = "form-control" id = "name" placeholder = "Enter category name" / > < div class = "form-group" > < label for = "image" >Choose an image < input type = "file" v-on:change = "attachImage" class = "form-control" id = "image" / > < hr / > < div class = "text-right" > < button type = "button" class = "btn btn-default" v-on:cllck = "hideNewCategoryModal" >Cancel < button type = "submit" class = "btn btn-primary" > < span class = "fa fa-check" >Save < 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" ); } } }; < style > Colored by Color Scripter cs

from http://anko3899.tistory.com/376 by ccl(A) rewrite - 2020-03-31 16:25:17