01. Board 메뉴 추가
resources > view> layouts > sidebar-menu.blade.php
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
...
<!--일반 게시판-->
<li class="nav-item">
<router-link to="/board" class="nav-link">
<i class="nav-icon fas fa-list orange"></i>
<p>
Board
</p>
</router-link>
</li>
</ul>
</nav>
02. Board Model / Migration / Controller
1. 모델/마이그레이션 파일 생성
$ php artisan make:model Board -m
- Board Model) app > Models > Board.php
- Migration ) database > migrations > 날짜_create_boards_table.php
2. Board 모델 작성
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Board extends Model
{
use HasFactory;
//데이터 대량 할당 가능
protected $fillable = [
'title', 'content', 'author', 'photo'
];
}3. 마이그레이션 파일 작성
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateBoardsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('boards', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->longText('content')->nullable();
$table->string('author');
$table->string('photo')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('boards');
}
}
4. 마이그레이션 실행
$ php artisan migrate
5. 데이터 시딩 - 나중에 다시 하기(아직 안 함)
참고 포스팅) https://min-nine.tistory.com/80
$ php artisan make:seeder BoardsTableSeeder6. 컨트롤러 생성
$ php artisan make:controller API/V1/BoardController --resource
- BoardController) app > Http > Controllers > API > V1 > BoardController.php
03. Vue 라우터 작성
resources > js > routes.js
export default [
{ path: '/dashboard', component: require('./components/Dashboard.vue').default },
{ path: '/profile', component: require('./components/Profile.vue').default },
{ path: '/developer', component: require('./components/Developer.vue').default },
{ path: '/users', component: require('./components/Users.vue').default },
{ path: '/products', component: require('./components/product/Products.vue').default },
{ path: '/product/tag', component: require('./components/product/Tag.vue').default },
{ path: '/product/category', component: require('./components/product/Category.vue').default },
{ path: '/board', component: require('./components/board/Board.vue').default }, //일반 게시판
{ path: '*', component: require('./components/NotFound.vue').default }
];resources > js > components > board 디렉토리 생성 > Board.vue 생성
<template>
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Post List</h3>
<div class="card-tools">
<button type="button" class="btn btn-sm btn-primary" @click="newModal">
<i class="fa fa-plus-square"></i>
글 작성
</button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body table-responsive p-0">
<table class="table table-hover">
<thead>
<tr>
<th>No</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
</tr>
</thead>
<tbody>
<tr v-for="post in boards.data" :key="post.id">
<td>{{post.id}}</td>
<td>{{post.title}}</td>
<td>{{post.author}}</td>
<td>{{post.created_at}}</td>
<!-- <td><img v-bind:src="'/' + product.photo" width="100" alt="product"></td> -->
<td>
<a href="#" @click="editModal(post)">
<i class="fa fa-edit blue"></i>
</a>
/
<a href="#" @click="deletePost(post.id)">
<i class="fa fa-trash red"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- /.card-body -->
<div class="card-footer">
<pagination :data="boards" @pagination-change-page="getResults"></pagination>
</div>
</div>
<!-- /.card -->
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="addNew" tabindex="-1" role="dialog" aria-labelledby="글 작성" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" v-show="!editmode">새 글 작성</h5>
<h5 class="modal-title" v-show="editmode">글 수정</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="닫기">
<span aria-hidden="true">×</span>
</button>
</div>
<form @submit.prevent="editmode ? updatePost() : createPost()">
<div class="modal-body">
<div class="form-group">
<label>제목</label>
<input v-model="form.title" type="text" name="title"
class="form-control" :class="{ 'is-invalid': form.errors.has('title') }">
<has-error :form="form" field="title"></has-error>
</div>
<div class="form-group">
<label>내용</label>
<input v-model="form.content" type="text" name="content"
class="form-control" :class="{ 'is-invalid': form.errors.has('content') }">
<has-error :form="form" field="content"></has-error>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">닫기</button>
<button v-show="editmode" type="submit" class="btn btn-success">수정</button>
<button v-show="!editmode" type="submit" class="btn btn-primary">등록</button>
</div>
</form>
</div>
</div>
</div>
</section>
</template>
<script>
export default{
data(){
return{
editmode: false,
boards: {},
form: new Form({
id: '',
title: '',
content: '',
author: 'gahui',
photo: '',
photoUrl: '',
}),
}
},
methods: {
getResults(page = 1) {
},
loadPosts(){
},
newModal(){
},
editModal(post){
},
createPost(){
},
updatePost(){
}
}
}
</script>npm run dev 명령 실행 후 board 게시판 확인
