laravel vue axjos

1. composer create-project --prefer-dist laravel/laravel laravue

컴포저 라라벨5.8 설치

2. cd vuecrud

라라벨 프로젝트 디렉터리 이동

3. cp .env.example .env

env파일복사

4. php artisan key:generate

키젠생성

5. .env 데이터베이스 접속 설정

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravue(데이터베이스명) DB_USERNAME=root(계정) DB_PASSWORD=(패스워드)

6. php artisan migrate

마이그레이션 실행

7. php artisan make:auth

로그인 생성

8. 크롬브라우저 접속 laravue.test

9. npm install

node module 설치

10. npm run watch

vue변경사항이 발생하면 감지해서 자동빌드 시켜줌. resources/js/ 디렉터리와 components 디렉터리가 생성됨 

11. php artisan make:migration create_tasks_table

예제 테이블 생성

        Schema::create('tasks', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('status')->default('panding');
            $table->timestamps();
        });

12. php artisan migrate

마이그레이션 실행

13. php artisan make:controller TaskController --model=Task

컨트롤러 생성 + 모델생성

14. reoutes/api.php 파일에 라우터를 추가한다.

Route::resources('task', 'TaskController');

15. resources/js/components/TaskForm.vue 파일을 생성하고 form을 작성한다.

<template>
 
    <div class="col-md-8 mt-4">
        <div class="card">
            <div class="card-header">Task Form</div>
 
            <div class="card-body">
             <form action="./api/task" method="POST">
                <div class="form-group">
                    <input type="text" name="title" placeholder="Task title" class="form-control">
                </div>  
                <div class="form-group">
                    <input type="submit" value="Add Task" class="btn btn-info">
                </div>                         
            </form>
        </div>
    </div>
</div>
 
</template>
 
<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>
 

16. resources/js/app.js 파일에 컴포넌트를 추가해준다.

 
require('./bootstrap');
 
window.Vue = require('vue');
 
 
 
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('task-form', require('./components/TaskForm.vue').default);
 
 
const app = new Vue({
    el: '#app',
});

16. resources/views/home.blade.php 파일에 <task-form></task-form> 컴포넌트를 넣어준다. 

17. 브라우저에서 http://lara-vue.test/home 접속한다.

18. resources/js/components/TaskForm.vue 파일로 돌아와서 submit가 되면 addTask메서드가 실행되게 코딩한다.

19. 다시 브라우저 창으로 가서 Add Task 버튼을 누르면 경고창이 실행되고 api/task로 주소가 이동한다.

20. resources/js/components/TaskForm.vue 소스를 작성해준다.

<template>
 
    <div class="col-md-8 mt-4">
        <div class="card">
            <div class="card-header">Task Form</div>
 
            <div class="card-body">
             <!--    제출 이벤트가 페이지를 다시 로드 하지 않습니다 -->
             <form action="./api/task" method="POST" v-on:submit.prevent="addTask()">
                <div class="form-group">
                    <input type="text" name="title" v-model="title" placeholder="Task title" class="form-control">
                </div>  
                <div class="form-group">
                    <input type="submit" value="Add Task" class="btn btn-info">
                </div>                         
            </form>
        </div>
    </div>
</div>
 
</template>
 
<script>
    export default {
 
        data(){
            return{
                title:''
            }
        },
 
        mounted() {
            console.log('Component mounted.')
        },
 
        methods:{
            addTask(){
                axios.post('./api/task',{title:'something'});
                alert('Adding Task');
            }
        }
    }
</script>
 

21. 크롬브라우저 요소검사에 Vue를(확장프로그램설치) 클릭하고 글을 작성해보면 데이터에 글이 작성되는 것을 볼 수 있다.