240403 Vue

오늘은 글쓰기 해보기

오늘 날짜의 vue 생성 후 실행, Write 라는 vue 파일을 만들어 작성

<template>
  <div class="write">
    <h1>글쓰기</h1>
    <input v-model="title" />
    <textarea v-model="content"></textarea>
    <button @click="write">글쓰기</button>
  </div>
</template>

 

스크립트 작성하기, 글 쓰면 해당 데이터가 alert 창으로 뜨게하기

return 에 값을 넣으면 창 새로고침 시 해당 데이터가 입력되어 있음

input 의 value, textarea 태그 사이에 값 넣은 효과

export default {
  name: "WritePage",
  data() {
    return {
      title: "제목쓰",
      content: "내용쓰",
    };
  },
  methods: {
    write() {
      alert("하이요 " + this.title + " : " + this.content);
    },
  },
};

 

해당 데이터를 json 형태로 가게 하기

write() {
  // alert("하이요 " + this.title + " : " + this.content);
  let saveData = {};
  saveData.title = this.title;
  saveData.content = this.content;
  saveData.mno = 1;
  alert("버튼 클릭 : " + JSON.stringify(saveData));
},

 

JSON 형태로 오는 모습

 

axios 를 사용하여 글 보내기

import axios from "axios";
export default {
  name: "WritePage",
  data() {
    return {
      title: null,
      content: null,
    };
  },
  methods: {
    write() {
      // alert("하이요 " + this.title + " : " + this.content);
      let saveData = {};
      saveData.title = this.title;
      saveData.content = this.content;
      saveData.mno = 1;
      // alert("버튼 클릭 : " + JSON.stringify(saveData));
      axios
        .post("http://172.30.1.59:3000/write", JSON.stringify(saveData), {
          headers: { "Content-Type": "application/json" },
        })
        .then((res) => alert("성공 : " + res.data.result))
        .catch((res) => alert("실패 : " + res));
    },
  },
};