[VUE] Vue로 만든 게시판에 CRUD 구현하기

게시판 css는 bootstrap을 사용하였고 이 글은 crud과정만 정리한 글 임미댱.. !😋

 

 

 

🔆 json-server

RestApi는 json-server을 사용했습니다 !

GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)

 

// 개발환경 설치: -D
npm install -D json-server 

// 전역적으로 설치: -g
npm install -g json-server

 

// 로컬에 설치한 경우( -D 옵션 설치)
npx json-server --watch db.json

// 전역적으로 설치한 경우 ( -g 옵션 설치)
json-server --watch db.json

 

루트 폴더 안에 db.json 폴더가 생성되고, 안에 우선 임의로 테스트용 데이터 넣어주시면 됩니다 !

// db.json
{
  "posts": [
   {
      "id": 1,
      "title": "제목1",
      "content": "내용1",
      "createdAt": "2023-01-01"
    },
     {
      "id": 2,
      "title": "제목2",
      "content": "내용2",
      "createdAt": "2023-03-17"
    },
    {
      "id": 3,
      "title": "제목3",
      "content": "내용3",
      "createdAt": "2023-04-26"
    },
    {
      "id": 4,
      "title": "제목4",
      "content": "내용4",
      "createdAt": "2023-10-20"
    },
    {
      "id": 5,
      "title": "제목5",
      "content": "내용5",
      "createdAt": "2023-12-15"
    }
  ]
}

 

데이터 넣어 주신 후 다시 아래 명령어로 확인해 볼 수 있는데

이때 ! 포트를 지정할 수 있습니다. 원하시는 포트 지정하시고 localhost:4000/posts으로 들어가시면 본인이 저장한 json데이터를 볼수있습니다 !

npx json-server --watch db.json --port 4000

 

🔆 axios 설치

npm i axios

 

🔆 src/api(폴더)/posts.ts

import axios from 'axios'

export function getPosts() {
  return axios.get('http://localhost:4000/posts')
}

export function getPostById(id: number) {
  return axios.get(`http://localhost:4000/posts/${id}`)
}

export function createPost(data: any) {
  return axios.post('http://localhost:4000/posts', data)
}
export function updatePost(id: number, data: any) {
  return axios.put(`http://localhost:4000/posts/${id}`, data)
}
export function deletePost(id: number) {
  return axios.delete(`http://localhost:4000/posts/${id}`)
}

 

🔆 Create

<template>
  <div>
    <h2>게시글 등록</h2>
    <hr class="my-4" />
    <form @submit.prevent="save">
      <div class="mb-3">
        <label for="title" class="form-label">제목</label>
        <input v-model="form.title" type="text" class="form-control" id="title" />
      </div>
      <div class="mb-3">
        <label for="content" class="form-label">내용</label>
        <textarea v-model="form.content" class="form-control" id="content" rows="3"></textarea>
      </div>
      <div class="pt-4">
        <button type="button" class="btn btn-outline-dark me-2" @click="goListPage">목록</button>
        <button class="btn btn-primary">저장</button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

import { createPost } from '../../api/posts'

const router = useRouter()
const form = ref({
  title: null,
  content: null
})

const save = () => {
  try {
    createPost({
      ...form.value,
      createdAt: Date.now()
    })
    router.push({ name: 'PostList' })
  } catch (error) {
    console.error(error)
  }
}

const goListPage = () => router.push({ name: 'PostList' })
</script>

<style></style>

 

🔆 List

<template>
  <h2>게시글 목록</h2>
  <hr class="my-4" />
  <div class="row g-3">
    <div v-for="post in posts" :key="post.id" class="col-4">
      <PostItem
        :title="post.title"
        :content="post.content"
        :created-at="post.createdAt"
        @click="goPage(post.id)"
      ></PostItem>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

import PostItem from '../../components/posts/PostItem.vue'
import { getPosts } from '../../api/posts'

const router = useRouter()
const posts = ref([])

const fetchPosts = async () => {
  try {
    const { data } = await getPosts()
    posts.value = data
  } catch (error) {
    console.error(error)
  }
}
fetchPosts()

const goPage = (id) => {
  router.push({
    name: 'PostDetail',
    params: { id }
  })
}
</script>

<style></style>

 

🔆 Detail

<template>
  <h2>{{ form.title }}</h2>
  <p>{{ form.content }}</p>
  <p class="text-muted">{{ form.createdAt }}</p>
  <hr class="my-4" />
  <div class="row g-2">
    <div class="col-auto">
      <button class="btn btn-outline-dark">이전글</button>
    </div>
    <div class="col-auto">
      <button class="btn btn-outline-dark">다음글</button>
    </div>
    <div class="col-auto me-auto"></div>
    <div class="col-auto">
      <button class="btn btn-outline-dark" @click="goListPage">List</button>
    </div>
    <div class="col-auto">
      <button class="btn btn-outline-primary" @click="goEditPage">Edit</button>
    </div>
    <div class="col-auto">
      <button class="btn btn-outline-danger" @click="remove">Delete</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

import { getPostById, deletePost } from '../../api/posts'

const route = useRoute()
const router = useRouter()
const id = route.params.id
const form = ref({})

const fetchPost = async () => {
  try {
    const { data } = await getPostById(id)
    form.value = { ...data }
  } catch (error) {
    console.error(error)
  }
}
fetchPost()
const remove = async () => {
  try {
    if (confirm('삭제하시겠습니까?')) {
      await deletePost(id)
      router.push({ name: 'PostList' })
    }
  } catch (error) {
    console.error(error)
  }
}

const goListPage = () => router.push({ name: 'PostList' })
const goEditPage = () => router.push({ name: 'PostEdit', params: { id } })
</script>

<style></style>

 

🔆 Edit

<template>
  <div>
    <h2>게시글 수정</h2>
    <hr class="my-4" />
    <form @submit.prevent="edit">
      <div class="mb-3">
        <label for="title" class="form-label">제목</label>
        <input v-model="form.title" type="text" class="form-control" id="title" />
      </div>
      <div class="mb-3">
        <label for="content" class="form-label">내용</label>
        <textarea v-model="form.content" class="form-control" id="content" rows="3"></textarea>
      </div>
      <div class="pt-4">
        <button type="button" class="btn btn-outline-danger me-2" @click="goDetailPage">
          취소
        </button>
        <button class="btn btn-primary">수정</button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'

import { getPostById, updatePost } from '../../api/posts'

const route = useRoute()
const router = useRouter()
const id = route.params.id

const form = ref({
  title: null,
  content: null
})
const fetchPost = async () => {
  try {
    const { data } = await getPostById(id)
    setForm(data)
  } catch (error) {
    console.error(error)
  }
}
const setForm = ({ title, content }) => {
  form.value.title = title
  form.value.content = content
}
fetchPost()
const edit = async () => {
  try {
    await updatePost(id, { ...form.value })
    router.push({ name: 'PostDetail', params: { id } })
  } catch (error) {
    console.error(error)
  }
}

const goDetailPage = () => router.push({ name: 'PostDetail', params: { id } })
</script>

<style></style>

 

❤️ 전체 코드 :

GitHub - Amy-Eunji/vue-crud: vue로 만든 게시판에 crud 구현하기

 

 

❤️ 도움 주신 분 :

【맛보기 강의】 Vue3 완벽 마스터 : 실전편