•
금요일날 한 일들이 이상하게 되어서 22일날 고치려다가 결국 갈고 다시 작성을 하였다.
현재 지금 CRUD를 만들고 있다.
작성 페이지 만들고 작성한거 불러오기
1. noticeStore에 Post 작성하기
import axios from "axios";
import { defineStore } from "pinia";
export const useNoticeStore=defineStore("noticeStore",{
id:"noticeStore",
state:()=>({
noticeIdx:"",
notice:"",
content:"",
}),
getters:{
},
actions:{
async fetchReceiveNoticeList(){
return axios.get('api/notice/AllNotice',this.notice)
},
async noticeWrite(){
axios.post('api/notice/newNotice',JSON.stringify(this.$state))
},
async noticeUpdate(){
axios.post('api/notice/noticeUpdate',JSON.stringify(this.$state))
},
async noticeDelete(){
axios.post('api/notice/noticeDelete',JSON.stringify(this.noticeIdx))
},
}
})
JavaScript
복사
위와 같이 작성을 하였다. 차후에 update와 delete를 하기위해 미리 작성했다.
2. noticeWrite.vue
<template>
<label>NoticeWrite</label>
<ModalFormA>
<template #contents>
<form
class="wrapper_signup"
>
<div :style="`margin-top: 50px`">
<label>공지사항 제목</label><br>
<input
v-model="noticeStore.notice"
type="text"
>
</div>
<div>
<label>공지사항 내용</label><br>
<input
v-model="noticeStore.content"
type="text"
>
</div>
<button
@click="noticeStore.noticeWrite()"
>
<span :style="`margin-top: 2px`">작성</span>
</button>
</form>
</template>
</ModalFormA>
</template>
<script>
import ModalFormA from "@/components/modal/ModalFormA";
import { useNoticeStore } from "@/store/noticeStore";
import axios from "axios";
export default {
name : 'NoticeWritePage',
components: {
ModalFormA
},
setup() {
const noticeStore = useNoticeStore();
return {
noticeStore
}
},
data:function(){
return{
noticeWrite:this.noticeStore.noticeWrite
}
}
}
}
</script>
JavaScript
복사
3. NoticeController(SpringBoot)
@PostMapping("notice/api/notice/newNotice")
@ResponseBody
public String writeNotice(@RequestBody Notice notice) {
log.info("Controller : noticeWrite");
System.out.println(notice);
noticeService.insertNotice(notice);
return "작성성공";
}
JavaScript
복사
4. 실행 장면
문제점
1.
Post를 하려고 하면 router의 부모요소가 작성되고 그 뒤에 내가 원하는 url이 작성되어서 axios가 실행이 된다.
사진에서 보면 notice/ api/notice/AllNotice에 요청을 하는 것을 볼 수 있다. 이러한 현상은 Post나 get를 보내는 위치가 Router에서 볼때 notice의 자식요소에서 요청을 할 때, 위와 같은 상황이 발생한다.
•
위와 같이 부모의 라우터에서는 api/notice/AllNotice로 요청하는 것을 볼 수 있다.
이것을 같은 경로의 요청으로 만들고 싶다.
내일 할 일 (5월 24일)
1.
update와 delete 완성하기 ⇒ CRUD 완성
2.
update페이지 이동시 공지사항을 클릭하면 공지사항의 내용이 수정페이지에 담기기
3.
부모에서의 요청과 자식에서의 요청이 같은 요청으로 만들기