728x90
XML 설정
기본구조
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- The definition of the Root Spring Container shared by all Servlets and Filters -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/spring/root-context.xml</param-value>
</context-param>
<!-- Creates the Spring Container shared by all Servlets and Filters -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!-- Processes application requests -->
<servlet>
<servlet-name>appServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>appServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
servlet-context.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:beans="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">
<!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->
<!-- Enables the Spring MVC @Controller programming model -->
<annotation-driven />
<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
<resources mapping="/main/webapp/**" location="/main/webapp/" />
<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<beans:property name="prefix" value="/WEB-INF/views/" />
<beans:property name="suffix" value=".jsp" />
</beans:bean>
<context:component-scan base-package="kr.bit.controller" />
</beans:beans>
root-context.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mybatis-spring="http://mybatis.org/schema/mybatis-spring"
xsi:schemaLocation="http://www.springframework.org/schema/beans
https://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
https://www.springframework.org/schema/context/spring-context.xsd http://mybatis.org/schema/mybatis-spring https://mybatis.org/schema/mybatis-spring.xsd">
<bean id="hikariConfig" class="com.zaxxer.hikari.HikariConfig">
<property name="driverClassName" value="com.mysql.cj.jdbc.Driver"/>
<property name="jdbcUrl" value="jdbc:mysql://localhost:3306/springlegacy?serverTimezone=UTC"/>
<property name="username" value="root"/>
<property name="password" value="0000"/>
</bean>
<bean id="dataSource" class="com.zaxxer.hikari.HikariDataSource" destroy-method="close">
<constructor-arg ref="hikariConfig"/>
</bean>
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource"/>
<property name="mapperLocations" value="classpath:kr/bit/mapper/*.xml"/>
</bean>
<bean id="sqlSessionTemplate" class="org.mybatis.spring.SqlSessionTemplate">
<constructor-arg ref="sqlSessionFactory"/>
</bean>
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="kr.bit.mapper"/>
</bean>
</beans>BoardController
package kr.bit.controller;
import kr.bit.entity.Board;
import kr.bit.mapper.BoardMapper;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
@Controller
@RequiredArgsConstructor
public class BoardController {
private final BoardMapper boardMapper;
@RequestMapping("/")
public String home() {
return "home";
}
@RequestMapping("/boardList")
public @ResponseBody List<Board> boardList() {
return boardMapper.getList(); // json 데이터 형식으로 변환해서 리턴
}
}
Controller 리턴 타입
- String : jsp파일의 경로와 파일이름을 나타내기 위해서 사용
- void : 호출하는 URL과 동일한 이름의 jsp를 의미
- 객체 타입 : 주로 JSON타입의 데이터를 만들어서 반환하는 용도
(이 경우는 주로 JSON데이터를 만들어 내는 용도로 사용) - ResponseEntity 타입 : response할 때 Http헤더정보와 내용을 가공하는 용도
@RequestBody, @ResponseBody
스프링 프레임워크에서 비동기 통신, API 통신을 구현하기 위해 @RequestBody, @ResponseBody를 사용할 수 있다.
- @RequestBody : 클라이언트 -> 서버 요청 (json기반의 HTTP Body를 자바 객체로 변환)
- @ResponseBody : 서버 -> 클라이언트 응답 (자바 객체를 json기반의 HTTP Body로 변환)
BoardMapper
package kr.bit.mapper;
import kr.bit.entity.Board;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Update;
import java.util.List;
@Mapper
public interface BoardMapper {
public List<Board> getList();
public void insertBoard(Board board);
public Board getBoard(int idx);
public void deleteBoard(int idx);
public void updateBoard(Board board);
@Update("update bitboard set count = count + 1 where board_idx = #{board_idx}")
public void plusCount(int board_idx);
}BoardMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="kr.bit.mapper.BoardMapper">
<select id="getList" resultType="kr.bit.entity.Board">
select * from bitboard order by board_idx desc
</select>
<insert id="insertBoard" parameterType="kr.bit.entity.Board">
insert into bitboard(board_title, board_content, board_writer)
values (#{board_title}, #{board_content}, #{board_writer})
</insert>
<select id="getBoard" resultType="kr.bit.entity.Board">
select * from bitboard where board_idx = #{board_idx}
</select>
<delete id="deleteBoard" parameterType="int">
delete from bitboard where board_idx = #{board_idx}
</delete>
<update id="updateBoard" parameterType="kr.bit.entity.Board">
update bitboard
set board_title = #{board_title}, board_content = #{board_content}, board_writer = #{board_writer}
</update>
</mapper>
Board
package kr.bit.entity;
import lombok.Data;
@Data
public class Board {
private int board_idx;
private String board_title;
private String board_content;
private String board_writer;
private String board_datetime;
private int board_count;
}Rest방식 / Ajax
브라우저에서 순수 데이터만을 전달할 수 있음
- 서버는 클라이언트의 요청 결과를 xml, json형태로 전달하고, 브라우저에서 이를 가공하여 사용자에게 보여주는 방식
cf) 만약 하나의 페이지(jsp)에서 두가지 일을 처리해야 할 경우
게시판 리스트와 로그인을 출력하는 일
- 동기식 처리방식 : 1번일이 끝날때까지 기다린 후 2번일을 처리하는 방식(응답시간이 길어지며 화면이 바뀐다)
- 비동기식 처리방식 : 1번 일과는 상관없이 2번일을 처리하는 방식(응답시간이 빠르고, 화면전환이 없다)
-> 콜백함수를 만들어 처리하게 해야한다
콜백함수
- 서버로 요청 후 서버에서 응답하는 데이터를 클라이클라이언트가언트에서 받아서 처리하는 함수
Ajax 동작 방식
REST(Representational State Transfer)
home.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
loadBoard();
});
function loadBoard() {
$.ajax({
url: "boardList",
type: "GET",
dataType: "json",
success: make,
error: function () {
alert("error");
}
});
}
function make(data) {
var li = "<table class='table table-bordered'>";
li += "<tr>";
li += "<td>글번호</td>";
li += "<td>제목</td>";
li += "<td>글쓴이</td>";
li += "<td>작성일</td>";
li += "<td>조회수</td>";
li += "</tr>"
$.each(data, function (index, board) { // obj={"idx":1, "title":"제목1"..
li += "<tr>";
li += "<td>" + board.board_idx + "</td>";
// 글번호(idx값) 가지고 goContent함수 <td id = "tit1">goContent(1)
li += "<td id='tit" + board.board_idx + "'><a href='javascript:goContent(" + board.board_idx + ")'>" + board.board_title + "</a></td>";
li += "<td>" + board.board_writer + "</td>";
li += "<td>" + board.board_datetime.split(' ')[0] + "</td>";
li += "<td id='cnt" + board.board_idx + "'>" + board.board_count + "</td>";
li += "</tr>";
li += "<tr id='con" + board.board_idx + "' style='display:none'>";
li += "<td>내용</td>";
li += "<td colspan='4'>";
li += "<textarea id='ta" + board.board_idx + "' readonly rows='7' class='form-control'>"+board.board_content+"</textarea>";
li += "<br/>";
li += "<span id='up" + board.board_idx + "'><button class='btn btn-success btn-sm' onclick='goUpdateForm(" + board.board_idx + ")'>수정화면</button></span> ";
li += "<button class='btn btn-danger btn-sm' onclick='goDelete(" + board.board_idx + ")'>삭제</button>";
li += "</td>";
li += "</tr>";
});
li += "<tr>";
li += "<td colspan='5'>";
li += "<button class='btn btn-primary btn-sm' onclick='getForm()'>글작성</button>";
li += "</td>";
li += "</tr>";
li += "</table>";
$("#view").html(li);
$("#view").css("display", "block");
$("#wfrom").css("display", "none");
}
function goDelete(idx){
$.ajax({
url : "deleteBoard",
type : "get",
data : {"idx":idx}, // 삭제할 글 번호를 서버에 전달
success : loadBoard,
//서버와의 통신이 성공되면 loadBoard메소드를 호출 -> 삭제한 후의 결과를 테이블 형식으로 출력
error : function(){
alert("error");
}
});
}
function goInsert() {
let formData = $("#frm").serialize();
$.ajax({
url: "insertBoard",
type: "POST", // post 방식으로 /boardInsert로 매핑
data: formData, // 내가 폼에 입력한 데이터를 서버로 전달
success: loadBoard,
//서버와의 통신이 성공되면 loadBoard 메소드 호출 -> 내가 쓴거 테이블 형식으로 출력
error: function () {
alert("Error");
}
});
}
// 제목을 클릭하면 내용을 보이게 함
function goContent(board_idx) {
if($("#con"+board_idx).css("display")=="none"){ // 내용폼이 안보이는 상황이면
$("#con"+board_idx).css("display","table-row"); // 제목을 눌렀을 때 폼이 보임
}
else{
$("#con"+board_idx).css("display","none"); // 제목 누르면 안보이게
}
}
function getForm() {
$("#wfrom").css("display", "block");
$("#view").css("display", "none");
}
function goList() {
$("#view").css("display", "block");
$("#wfrom").css("display", "block");
}
</script>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">게시판</div>
<div class="panel-body" id="view">본문</div>
<div class="panel-body" id="wfrom" style="display: none">
<form id="frm">
<table class="table">
<tr>
<td>제목</td>
<td><input type="text" id="title" name="board_title" class="form-control"/></td>
</tr>
<tr>
<td>내용</td>
<td><textarea rows="7" class="form-control" id="content" name="board_content"></textarea></td>
</tr>
<tr>
<td>글쓴이</td>
<td><input type="text" id="writer" name="board_writer" class="form-control"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="button" class="btn btn-success btn-sm" onclick="goInsert()">등록</button>
<button type="reset" class="btn btn-warning btn-sm" id="formclear">취소</button>
<button type="button" class="btn btn-info btn-sm" onclick="goList()">리스트</button>
</td>
</tr>
</table>
</form>
</div>
<div class="panel-footer">비트캠프</div>
</div>
</div>
</body>
</html>
BoardController
@RequestMapping("/insertBoard")
public @ResponseBody void boardInsert(Board board) {
boardMapper.insertBoard(board);
}
제목을 클릭했을 때 내용을 보이게 함 / 숨김
// 제목을 클릭하면 내용을 보이게 함
function goContent(board_idx) {
if($("#con"+board_idx).css("display")=="none"){ // 내용폼이 안보이는 상황이면
$("#con"+board_idx).css("display","table-row"); // 제목을 눌렀을 때 폼이 보임
}
else{
$("#con"+board_idx).css("display","none"); // 제목 누르면 안보이게
}
}
삭제
home.jsp
function goDelete(idx) {
$.ajax({
url: "deleteBoard",
type: "get",
data: {"idx": idx}, // 삭제할 글 번호를 서버에 전달
success: loadBoard,
//서버와의 통신이 성공되면 loadBoard메소드를 호출 -> 삭제한 후의 결과를 테이블 형식으로 출력
error: function () {
alert("error");
}
});
}BoardController
@RequestMapping("/deleteBoard")
public @ResponseBody void boardDelete(@RequestParam("idx") int idx) {
boardMapper.deleteBoard(idx);
}Update
home.jsp
function goUpdate(idx) {
let title = $("#nt" + idx).val();
let content = $("#ta" + idx).val();
$.ajax({
url: "updateBoard",
type: "POST",
data: {"board_idx": idx, "board_title": title, "board_content": content}, //수정해서 가지고 갈 값
success: loadBoard,
error: function () {
alert("error");
}
})
}
controller
@RequestMapping("/updateBoard")
public @ResponseBody void boardUpdate(Board board) {
boardMapper.updateBoard(board);
}BoardMapper
@Update("update bitboard set count = count + 1 where board_idx = #{board_idx}")
public void plusCount(int board_idx);
}BoardMapper.xml
<update id="updateBoard" parameterType="kr.bit.entity.Board">
update bitboard
set board_title = #{board_title},
board_content = #{board_content}
where board_idx = #{board_idx} <!-- 보통 PK 또는 조건을 사용합니다. -->
</update>제목을 클릭하면 내용이 보이는 goContent
home.jsp
// 제목을 클릭하면 내용을 보이게 함
function goContent(idx) {
if ($("#con" + idx).css("display") == "none") { // 내용폼이 안보이는 상황이면
$.ajax({
url: "contentBoard",
type:"get",
data:{"idx":idx},
dataType: "json",
success: function (data) {
$("#ta"+idx).val(data.board_content);
},
error : function () {
alert("Error");
}
});
$("#con" + idx).css("display", "table-row"); // 제목을 눌렀을 때 폼이 보임
} else {
$("#con" + idx).css("display", "none"); // 제목 누르면 안보이게
}
}
controller
@RequestMapping("/contentBoard")
public @ResponseBody Board contentBoard(int idx) {
Board board = boardMapper.getBoard(idx);
return board;
}
}
조회수(count)
home.jsp
function goContent(board_idx) {
if ($("#con" + board_idx).css("display") == "none") { // 내용폼이 안보이는 상황이면
$.ajax({
url: "board/"+board_idx,
type: "get",
data: {"board_idx":board_idx},
dataType: "json",
success: function(data){
$("#ta"+ board_idx).val(data.board_content);
},
error: function(){
alert("에러")
}
})
$("#con" + board_idx).css("display", "table-row"); // 제목을 눌렀을 때 폼이 보임
} else { //내용 폼이 보이면 제목 클릭함 -> 조회수 증가
$("#con" + board_idx).css("display", "none"); // 제목 누르면 안보이게
$.ajax({
url: "board/count/"+board_idx,
type: "put",
data: {"board_idx" : board_idx},
dataType: "json",
success: function(data){
console.log(data.board_count);
$("#cnt"+board_idx).val(data.board_count);//조회수 폼에 Board객체에 있는(data) 조회수 출력
},
error : function() {
alert("error");
}
});
}
}
Controller
@RequestMapping("/boardCount")
public @ResponseBody Board boardCount(int board_idx){
boardMapper.plusCount(board_idx);
Board vo= boardMapper.getBoard(board_idx);
return vo;
}
}본문 내용 Ajax 형식으로 호출하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- jQuery 라이브러리 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <!-- Bootstrap 라이브러리 -->
<script type="text/javascript">
$(document).ready(function () { // 웹 페이지 로드 완료 후 실행할 함수를 등록합니다.
loadBoard(); // 게시판을 로드하는 함수를 호출합니다.
});
function loadBoard() { // 게시판을 로드하는 함수입니다.
$.ajax({ // Ajax를 사용하여 서버와 비동기 통신을 합니다.
url: "board/List", // 데이터를 요청할 서버의 URL입니다.
type: "GET", // HTTP 요청 방식입니다. 여기서는 GET을 사용합니다.
dataType: "json", // 서버가 응답할 데이터의 타입입니다. 여기서는 json을 사용합니다.
success: make, // 요청이 성공했을 때 호출될 함수입니다.
error: function () { // 요청이 실패했을 때 호출될 함수입니다.
alert("error"); // 에러 메시지를 출력합니다.
}
});
}
function make(data) { // 게시판을 생성하는 함수입니다.
var li = "<table class='table table-bordered'>"; // 테이블을 생성합니다.
// 테이블의 헤더를 생성합니다.
li += "<tr>";
li += "<td>글번호</td>";
li += "<td>제목</td>";
li += "<td>글쓴이</td>";
li += "<td>작성일</td>";
li += "<td>조회수</td>";
li += "</tr>"
$.each(data, function (index, board) { // 게시글의 각 항목을 순회합니다.
li += "<tr>";
li += "<td>" + board.board_idx + "</td>"; // 게시글 번호
li += "<td id='tit" + board.board_idx + "'><a href='javascript:goContent(" + board.board_idx + ")'>" + board.board_title + "</a></td>"; // 게시글 제목
li += "<td>" + board.board_writer + "</td>"; // 게시글 작성자
li += "<td>" + board.board_datetime.split(' ')[0] + "</td>"; // 게시글 작성일
li += "<td id='cnt" + board.board_idx + "'>" + board.board_count + "</td>"; // 게시글 조회수
li += "</tr>";
// 게시글의 내용을 표시하는 부분을 생성합니다.
li += "<tr id='con" + board.board_idx + "' style='display:none'>";
li += "<td>내용</td>";
li += "<td colspan='4'>";
li += "<textarea id='ta" + board.board_idx + "' readonly rows='7' class='form-control'>" + board.board_content + "</textarea>";
li += "<br/>";
li += "<span id='up" + board.board_idx + "'><button class='btn btn-success btn-sm' onclick='goUpdateForm(" + board.board_idx + ")'>수정화면</button></span> ";
li += "<button class='btn btn-danger btn-sm' onclick='goDelete(" + board.board_idx + ")'>삭제</button>";
li += "</td>";
li += "</tr>";
});
li += "<tr>";
li += "<td colspan='5'>";
li += "<button class='btn btn-primary btn-sm' onclick='getForm()'>글작성</button>";
li += "</td>";
li += "</tr>";
li += "</table>";
$("#view").html(li); // 생성한 테이블을 화면에 적용합니다.
$("#view").css("display", "block"); // 화면에 테이블을 표시합니다.
$("#wfrom").css("display", "none"); // 글 작성 폼을 숨깁니다.
}
function goUpdateForm(idx) { // 글 수정 폼을 로드하는 함수입니다.
$("#ta" + idx).attr("readonly", false); // 내용을 수정할 수 있도록 설정합니다.
let title = $("#tit" + idx + " a").text(); // 제목을 가져옵니다.
let newInput = "<input type='text' id='nt" + idx + "' class='form-control' value='" + title + "'/>"; // 새로운 입력 필드를 생성합니다.
$("#tit" + idx).html(newInput); // 생성한 입력 필드를 적용합니다.
let newButton = "<button class='btn btn-primary btn-sm' onclick='goUpdate(" + idx + ")'>수정</button>"; // 새로운 버튼을 생성합니다.
$("#up" + idx).html(newButton); // 생성한 버튼을 적용합니다.
}
function goUpdate(idx){ // 글을 수정하는 함수입니다.
let board_title = $("#nt"+idx).val(); // 수정된 제목을 가져옵니다.
let board_content = $("#ta"+idx).val(); // 수정된 내용을 가져옵니다.
$.ajax({ // Ajax를 사용하여 서버와 비동기 통신을 합니다.
url: "board/update", // 데이터를 요청할 서버의 URL입니다.
//여러개의 값을 json형식으로 컨트롤러에 보냘때 json.stringfy로 변환해서 전달해야함
//그걸 컨트롤러에서 받을때 @RequestBody를 통해 받음
type: "Put",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify ( { "board_idx": idx, "board_title":board_title, "board_content": board_content }), //수정해서 가지고 갈 값
success: loadBoard, // 요청이 성공했을 때 호출될 함수입니다.
error: function(){ // 요청이 실패했을 때 호출될 함수입니다.
alert("Error"); // 에러 메시지를 출력합니다.
}
})
}
function goDelete(idx) { // 글을 삭제하는 함수입니다.
$.ajax({ // Ajax를 사용하여 서버와 비동기 통신을 합니다.
url: "board/"+idx, // 데이터를 요청할 서버의 URL입니다.
type: "get", // HTTP 요청 방식입니다. 여기서는 GET을 사용합니다.
data: {"board_idx": idx}, // 서버로 전송할 데이터입니다.
success: loadBoard, // 요청이 성공했을 때 호출될 함수입니다.
error: function () { // 요청이 실패했을 때 호출될 함수입니다.
alert("error"); // 에러 메시지를 출력합니다.
}
});
}
function goInsert() { // 글을 삽입하는 함수입니다.
let formData = $("#frm").serialize(); // 폼에 입력한 데이터를 직렬화합니다.
$.ajax({ // Ajax를 사용하여 서버와 비동기 통신을 합니다.
url: "board/create", // 데이터를 요청할 서버의 URL입니다.
type: "POST", // HTTP 요청 방식입니다. 여기서는 POST를 사용합니다.
data: formData, // 서버로 전송할 데이터입니다.
success: loadBoard, // 요청이 성공했을 때 호출될 함수입니다.
error: function () { // 요청이 실패했을 때 호출될 함수입니다.
alert("Error"); // 에러 메시지를 출력합니다.
}
});
}
// 제목을 클릭하면 내용을 보이게 함
function goContent(board_idx) {
if ($("#con" + board_idx).css("display") == "none") { // 내용폼이 안보이는 상황이면
$.ajax({
url: "board/"+board_idx,
type: "get",
data: {"board_idx":board_idx},
dataType: "json",
success: function(data){
$("#ta"+ board_idx).val(data.board_content);
},
error: function(){
alert("에러")
}
})
$("#con" + board_idx).css("display", "table-row"); // 제목을 눌렀을 때 폼이 보임
} else { //내용 폼이 보이면 제목 클릭함 -> 조회수 증가
$("#con" + board_idx).css("display", "none"); // 제목 누르면 안보이게
$.ajax({
url: "board/count/"+board_idx,
type: "put",
data: {"board_idx" : board_idx},
dataType: "json",
success: function(data){
console.log(data.board_count);
$("#cnt"+board_idx).val(data.board_count);//조회수 폼에 Board객체에 있는(data) 조회수 출력
},
error : function() {
alert("error");
}
});
}
}
function getForm() { // 글 작성 폼을 로드하는 함수입니다.
$("#wfrom").css("display", "block"); // 글 작성 폼을 표시합니다.
$("#view").css("display", "none"); // 게시판을 숨깁니다.
}
function goList() { // 목록을 로드하는 함수입니다.
$("#view").css("display", "block"); // 게시판을 표시합니다.
$("#wfrom").css("display", "block"); // 글 작성 폼을 표시합니다.
}
</script>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">게시판</div>
<div class="panel-body" id="view">본문</div>
<div class="panel-body" id="wfrom" style="display: none">
<form id="frm">
<table class="table">
<tr>
<td>제목</td>
<td><input type="text" id="title" name="board_title" class="form-control"/></td>
</tr>
<tr>
<td>내용</td>
<td><textarea rows="7" class="form-control" id="content" name="board_content"></textarea></td>
</tr>
<tr>
<td>글쓴이</td>
<td><input type="text" id="writer" name="board_writer" class="form-control"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="button" class="btn btn-success btn-sm" onclick="goInsert()">등록</button>
<button type="reset" class="btn btn-warning btn-sm" id="formclear">취소</button>
<button type="button" class="btn btn-info btn-sm" onclick="goList()">리스트</button>
</td>
</tr>
</table>
</form>
</div>
<div class="panel-footer">비트캠프</div>
</div>
</div>
</body>
</html>
BoardRestTestController
package kr.bit.controller;
import kr.bit.entity.Board;
import kr.bit.mapper.BoardMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RequestMapping("/board")
@RestController
public class BoardRestTestController {
@Autowired
private BoardMapper boardMapper;
@GetMapping("/List")
public List<Board> boardList() {
List<Board>list = boardMapper.getList(); // json 데이터 형식으로 변환해서 리턴
return list;
}
@PostMapping("/create")
public void boardInsert(Board vo){
boardMapper.insertBoard(vo);
}
@DeleteMapping("/{board_idx}")
public @ResponseBody void boardDelete(@PathVariable("board_idx") int board_idx){
boardMapper.deleteBoard(board_idx);
}
//post , get, delete(삭제), put(업데이트)
@PutMapping("/update")
public void boardUpdate(@RequestBody Board vo){
boardMapper.updateBoard(vo);
}
@GetMapping("/{board_idx}")
public Board boardContent(@PathVariable("board_idx") int idx){
System.out.println("idx:"+idx);
Board vo= boardMapper.getBoard(idx);
return vo; //{idx:2, title: w, content:33 ...}
}
@PutMapping("/count/{board_idx}")
public Board boardCount(@PathVariable("board_idx")int board_idx){
boardMapper.plusCount(board_idx);
Board vo= boardMapper.getBoard(board_idx);
return vo;
}
}
728x90
'Frameworks > Spring' 카테고리의 다른 글
| [Spring] Board with xml (Ajax) III (0) | 2024.05.23 |
|---|---|
| [Spring] Board with xml (Ajax) II (0) | 2024.05.22 |
| [Spring] BOARD CRUD 기능 설명 (0) | 2024.05.17 |
| [Spring] Board CRUD (Board Delete, Page ) (0) | 2024.05.17 |
| [Spring] Board CRUD (Board info, Board Modify) (0) | 2024.05.17 |