인프런 커뮤니티 질문&답변

Vue.js 가

1. 해당 컴포넌트 name 설정

예시)

export default {

name: 'BoardComponent',

data() {

return {

newBoardItems: [],

}

},

mounted() {

this.fetchData();

},

methods: {

fetchData() {

axios.get('/api/board')

.then(response => {

console.log(response.data);

this.newBoardItems = response.data;

})

.catch(error => {

console.error('Error fetching data:', error);

});

},

}

}

</script>

컴포넌트에서 name: 이렇게 지정함

2. router 에서 컴포넌트 지정

예시)

{

path: '/classboarddetail/:ClassID',

name: 'classboarddetail',

component: ClassBoardDetailComponent,

props: true

},

3. 컨트롤러 만들기 (터미널)

Vue CLI 설치: Vue CLI를 사용하려면 먼저 설치해야 합니다. 터미널 또는 명령 프롬프트에서 다음 명령어를 실행합니다.

bash

Copy code

npm install -g @vue/cli

프로젝트 생성: Vue CLI가 설치되었으면, 새로운 Vue.js 프로젝트를 생성합니다.

bash

Copy code

vue create my-vue-project

위 명령어에서 my-vue-project는 프로젝트 디렉토리의 이름으로 변경할 수 있습니다.

프로젝트 생성 과정: vue create 명령어를 실행하면 몇 가지 설정 옵션을 선택할 수 있습니다. 프로젝트 생성에 필요한 기본 설정을 선택하거나, 사용자 정의 설정을 할 수 있습니다.

프로젝트로 이동: 생성된 프로젝트 디렉토리로 이동합니다.

bash

Copy code

cd my-vue-project

프로젝트 실행: 프로젝트 디렉토리로 이동한 후, 다음 명령어로 개발 서버를 실행할 수 있습니다.

bash

Copy code

npm run serve

4. 쿼리문 작성 -> 해당값을 $data에 담아서 log::debug($data);로 확인 take(숫자)로 제한걸기

class BoardController extends Controller

{

public function getBoardMainData()

{

$data = Board::orderBy('created_at', 'desc')

->take(50)

->get();

Log::debug($data);

return response()->json($data);

}

}

5. api.php 에서 경로 지정(router에서 해당 url 정한것 안에서 실행시킨다는것을 작성)

(컨트롤러에서는 값을 받아옴 json 형태)

import ClassBoardDetailComponent from '../components/ClassBoardDetailComponent.vue';

{

path: '/classboarddetail/:ClassID',

name: 'classboarddetail',

component: ClassBoardDetailComponent,

props: true

},

6. axios 처리 component 에서 methods 생성 후 axios 처리 ('/api/board') 컨트롤러에서 쿼리 실행

.then 안에 console.log로 확인 -> mounted()실행 시키겠는 경로 설정 (호출, 리로드 하면서 안에 담김)

export default {

name: 'BoardComponent',

data() {

return {

newBoardItems: [],

}

},

mounted() {

this.fetchData();

},

methods: {

fetchData() {

axios.get('/api/board')

.then(response => {

console.log(response.data);

this.newBoardItems = response.data;

})

.catch(error => {

console.error('Error fetching data:', error);

});

},

}

}

7. Component 에서 for 문 돌리는 item 에 Boardercontents item 을 넣어줌 {{ }}

예시)

<dd class="comment_count">

<i>추천수 {{ item.BoardRecommended }}</i>

<span>{{item.Boardgoodcount}}</span>

크롬 콘솔에서 더미데이터 이름 확인 후 기입

집에가서 터미널 하나 더 열어서 npm run watch

1. >npm run watch

2. >php serve artisan
이런 흐름이 맞나용