Vue 게시판 만들기 (글쓰기 , 수정 ,글 목록)

Vue 프로젝트 생성

프로젝트 생성하실때 꼭

router를 포함하시고 생성하셔야합니다

 

 

Router등록

import Vue from "vue";
import Router from "vue-router";
import main from "@/views/main";
import read from "@/views/read";
import create from "@/views/create";
import Edit from "@/views/Edit";
Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "main",
      component: main,
    },
    {
      path: "/read/:id",
      name: "read",
      component: read,
    },
    {
      path: "/create",
      name: "create",
      component: create,
    },
    {
      path: "/edit/:id",
      name: "edit",
      component: Edit,
    },
  ],
});

src/views/컴포넌트들

 

만들어 두시고 라우터 등록해주셔야합니다

 

edit하고 read는 파라미터를 받아서 id에 맞는 글을 가져올겁니다.

---

 

Bootstrap

Vue-Bootstrap을 쓸줄몰라서 그냥 index.html 헤드에 넣어서 사용했습니다

https://getbootstrap.com/

Bootstrap

근데 다 만들고 보니까 뷰티파이나 Vue-Bootstrap이 훨씬 더 편해보입니다.

---

 

Main페이지 (글 목록)

<template>
  <div>
    <div class="container">
      <h1 class="mb-4">Home</h1>
      
      <articleList class="article" />

      <button @click="create()" class="btn-primary btn mt-3">글 생성</button>
    </div>
  </div>
</template>

<script>
import articleList from "@/components/articleList.vue";

export default {
  name: "main",
  methods: {
    create() {
      this.$router.push({ path: "/create" });
    },
  },
  components: {
    articleList,
  },
};
</script>

<style scoped>
.container {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>

 

articleList 컴포넌트

<template>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Title</th>
        <th scope="col">Text</th>
      </tr>
    </thead>
    <tbody>
      <tr
        @click="Read(index)"
        class="textline textBox"
        v-for="(arr, index) in data"
        :key="index"
      >
        <th scope="row">{{ arr.id }}</th>
        <td>{{ arr.name }}</td>
        <td>{{ arr.title }}</td>
        <div class="textBox">{{ arr.text }}</div>
      </tr>
    </tbody>
  </table>
</template>

<script>
import data from "../data";
export default {
  name: "articleList",
  data() {
    return {
      data: data
    };
  },
  methods: {
    Read(index) {
      console.log(index);
      this.$router.push({ path: `/read/${index}` });
    }
  }
};
</script>

<style scoped>
.table {
  width: 800px;
  overflow: hidden;
  text-overflow: ellipsis;

  -webkit-line-clamp: 1;
  word-wrap: break-word;
}

.textline:hover {
  color: rgba(25, 0, 255, 0.404);
  transition: 0.5s;
}
.textBox {
  width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

 

data/index.js

export default [
  {
    name: "Jola",
    title: "Jola",
    text: "Elit quis cons Dolore magna consectetur ut consectetur reprehenderit.",
    id: 0,
  },
  {
    name: "Eris",
    title: "Amumal",
    text: "Amet voluptate laboris culpa voluptate adipisicing cupidatat elit do.Nisi amet exercitation excepteur aute reprehenderit eu veniam est aliqua officia magna ut consectetur proident.Est fugiat ex mollit elit dolor cillum voluptate.",
    id: 1,
  },
];

array 안에 object를 담는 기본적인 구조를 갖췄습니다.

 

로램으로 아무말이나 적었구요

 

v-for로 글 목록을 구현했습니다.

 

클릭했을때는 Read함수를 호출하는데 인자로 index를 받습니다

 

 

---

Read(읽기 기능)

<template>
  <div>
    <div class="container">
      <div class="Box">
        <h2 class="title">{{ title }}</h2>
        <div class="article">{{ text }}</div>
      </div>

      <button @click="Edit(index)" class="mt-3 btn btn-dark">Edit</button>
    </div>
  </div>
</template>

<script>
import data from "../data";

export default {
  name: "read",
  data() {
    return {
      title: null,
      text: null,
    };
  },
  methods: {
    Edit(id) {
      this.$router.push({ path: `/edit/${id}` });
    },
  },
  mounted() {
    const index = this.$route.params.id;
    this.title = data[index].title;
    this.text = data[index].text;
    console.log(index);
  },
};
</script>

<style scoped>
.container {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.Box {
  width: 300px;
  text-align: center;
  border: 1px solid rgb(163, 159, 159);
  border-radius: 15px;
  overflow: hidden;
}

.title {
  background: #009879;
  color: white;
  display: block;
  font-weight: bold;
  border-bottom: 2px solid;
}

.article {
  word-break: break-all;
  overflow: hidden;
  padding: 12px;
}

.btn-dark {
  width: 100px;
  font-size: 25px;
  border-radius: 5px;
}
</style>

    const index = this.$route.params.id; //id값을 가져옴
    this.title = data[index].title; //data[index] 오브젝트에서 제목과 글을 가져옴
    this.text = data[index].text;

수정 버튼도 마찬가지로 index를 인자로 받고 수정페이지의 id값으로 넘겨줍니다.

 

 

Edit 수정기능

<template>
  <div class="container">
    <div class="Title">
      <h2>Title</h2>
      <input v-model="title" class="form-control mt-3 mb-3" type="text" />
      <h2>Name</h2>
      <input v-model="name" class="form-control mt-3 mb-3" type="text" />
    </div>
    <div class="article">
      <h2>Article</h2>
      <textarea
        v-model="article"
        class="form-control"
        name=""
        id=""
        cols="30"
        rows="5"
      ></textarea>
    </div>
    <button @click="Edit()" class="mt-5 btn btn-success">Edit!</button>
  </div>
</template>

<script>
import data from "../data";

export default {
  name: "edit",
  data() {
    return {
      index: null,
      title: null,
      name: null,
      article: null,
    };
  },
  methods: {
    Edit() {
      data[this.index].title = this.title;
      data[this.index].name = this.name;
      data[this.index].text = this.article;
      this.$router.push({ path: "/" });
    },
  },
  mounted() {
    const index = this.$route.params.id;
    const infoArr = data[index];

    this.title = infoArr.title;
    this.name = infoArr.name;
    this.article = infoArr.text;

    this.index = index;
  },
};
</script>

<style scoped>
.container {
  text-align: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

textarea,
input {
  width: 500px;
  text-align: center;
}

input {
  width: 300px;
}
</style>

마찬가지로 data를 import해와서 그냥 수정하는 방식입니다.

 

백엔드없이 한거라 야매느낌이 없지않아 있습니다.