[포트폴리오 페이지]_10단계_CRUD 게시판 구현_(feat.등록기능 구현)
2022. 4. 3. 18:23ㆍ[Spring]_/[Spring]_포트폴리오 페이지 만들기
728x90
반응형
[환경]
개발툴 : IntelliJ
DB : oracle
프레임워크 : spring , mybatis
----
개발 목표 : 오라클 디비를 이용해서 게시판 CRUD 중 C(create) 만들기
[완료화면]
등록 버튼 클릭시 메뉴 1의 게시판에 새로운 항목이 생성
한국어는 깨지는 현상이 발생-> 추후 해결예정
[디렉토리]
CRUD는 같은 파일에 작성
[JSP 파일]
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<style>
.board{
width: 100%;
}
</style>
</head>
<body>
<div id="content">
<div id="contentwrap">
<form id="frm">
<input type="text" placeholder="제목" id="subject" name="subject">
<input type="text" placeholder="내용" id="writecontent" name="content">
<button type="button" onclick="fn_boardRegi();">등록</button>
</form>
</div>
</div>
</body>
</html>
<script src='/js/jquery-3.6.0.min.js?ver=1'></script>
<script>
function fn_boardRegi(){
let title = $("#subject").val();
let content = $("#writecontent").val();
let $globalStorage = $commons.storage.g_variable;
let writer = $globalStorage.getValue("loginUser");
let date = $commons.util.date();
fetch("/board/register.do",{
method: 'POST',
headers: {
'content-type' : 'application/json'
},
body: JSON.stringify({
title: title,
content : content,
writer : writer,
regdate: date,
viewcnt : 0
})
}).then(res => res.json())
.then(data => {
console.log(data);
})
};
</script>fetch 를 사용하여 해당 url을 호출하고, 데이터는 json으로 가공하여 전달,
데이터들은 입력 폼 안에 적힌 text, globalstorage에 저장된 사용자 명을 받아서 전달한다.
[Controller]
@RequestMapping("/board/register.do")
@ResponseBody
public String boardWrite(@RequestBody Map<String,String> map) throws Exception{
BoardVO vo = new BoardVO();
int cnt = boardService.serchbno() + 1;
System.out.println("cnt = " + cnt);
String title = map.get("title");
String content = map.get("title");
String writer = map.get("writer");
String regdate = map.get("regdate");
//String viewcnt = map.get("viewcnt");
BoardVO boarddata = new BoardVO();
boarddata.setBno(cnt);
boarddata.setTitle(title);
boarddata.setContent(content);
boarddata.setWriter(writer);
boarddata.setRegdate(regdate);
boarddata.setViewcnt(0);
boardService.boardWrite(boarddata);
return "ok";
}json으로 전달된 값 -> Map형식으로 받아서 해당 key 값을 기준으로 각각의 변수에 지정하고
모델인 VO에 Setter를 이용하여 저장한다. 그 값을 service에 전달.
bno의 경우 게시판의 고유 id 이자 게시판 번호로 별도의 쿼리를 작성하여 최상단의 수에 +1 을 한 뒤 그 값을 입력한다
[Serivce]
public interface BoardService {
public List<BoardVO> boardSearch() throws Exception;
public void boardWrite(BoardVO boardVO) throws Exception;
public int serchbno()throws Exception;
}[ServiceImpl]
@Override
public void boardWrite(BoardVO boardVO) throws Exception {
boardmapper.boardWrite(boardVO);
}
@Override
public int serchbno() throws Exception {
return boardmapper.searchbno();
}bno 는 별도의 쿼리를 작성하여, 마지막에 저장된 bno 를 받아온다.
[BoardMapper]
@Mapper
public interface BoardMapper {
List<BoardVO> boardSearch();
void boardWrite(BoardVO boardVO);
int searchbno();
}[BoardMapper.xml]
<insert id="boardWrite">
insert into board (bno, title,content,writer)
values(#{bno},#{title},#{content},#{writer})
</insert>
<select id="searchbno" resultType="int">
select max(BNO) from board
</select>searchbno 는 max를 이용하여 가장 큰 값을 되돌려준다.
boardwrite는 전달받은 값들을 각각의 컬럼에 저장한다.
감사합니다.
728x90
반응형
'[Spring]_ > [Spring]_포트폴리오 페이지 만들기' 카테고리의 다른 글
| [포트폴리오 페이지]_11단계_CRUD 게시판 구현_(feat.페이징 처리) (0) | 2022.04.18 |
|---|---|
| [포트폴리오 페이지]_8단계_로그인 기능구현_(feat.oracleDB) (0) | 2022.04.03 |
| [포트폴리오 페이지]_9단계_CRUD 게시판 구현_(feat.목록 조회기능 구현) (0) | 2022.04.03 |
| [포트폴리오 페이지]_7단계_회원가입 구현(feat.oracle) (0) | 2022.03.31 |
| [포트폴리오 페이지]_5단계_db에 데이터 집어넣기 (0) | 2022.03.10 |