2023-09-15 84일차

JPA_ Ajax 

 

@Entity

package org.zerock.ajax1.entity;

import lombok.*;

import javax.persistence.*;

@Entity
@Getter
@Setter
@AllArgsConstructor
@NoArgsConstructor
@Builder
@ToString
public class Memo {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long mno;

    private String memoText;
}

repository

package org.zerock.ajax1.repository;

import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Modifying;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.query.Param;
import org.springframework.stereotype.Repository;
import org.zerock.ajax1.entity.Memo;

import javax.transaction.Transactional;
import java.util.List;

//@Repository
public interface MemoRepository extends JpaRepository<Memo, Long> {
    List<Memo> findByMnoBetweenOrderByMnoDesc(Long from, Long to);

    Page<Memo> findByMnoBetween(Long from, Long to, Pageable pageable);

    void deleteMemoByMnoLessThan(Long num);

    @Query("select m from Memo m order by m.mno desc")
    List<Memo> getListDesc();

    @Transactional
    @Modifying
    @Query("update Memo m set m.memoText = :memoText where m.mno = :mno")
    int updateMemoText(@Param("mno") Long mno, @Param("memoText") String memoText);

}

 

 

controller

package org.zerock.ajax1.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.ResponseBody;
import org.zerock.ajax1.entity.Memo;
import org.zerock.ajax1.repository.MemoRepository;

import java.util.List;
import java.util.Optional;

@Controller
public class TestController {

    @Autowired
    MemoRepository memoRepository;

    @GetMapping("/ajax")
    public String ajax1() {
        return "ajaxTest";
    }
    @GetMapping("/ajax2")
    public String ajax2() {
        return "ajaxTest2";
    }

    @GetMapping("/list/{page}")
//    @ResponseBody
    public String  list(@PathVariable int page, Model model){
        Sort sort1 = Sort.by("mno").descending();
        Pageable pageable = PageRequest.of(page-1, 10, sort1);
        Page<Memo> list = memoRepository.findAll(pageable);

        model.addAttribute("list", list.getContent());
        return "page";

//        return list;
    }

    @GetMapping("/update/{mno}/{memoText}")
    @ResponseBody
    public Memo update1(@PathVariable Long mno, @PathVariable String memoText, Model model){

        memoRepository.updateMemoText(mno, memoText);
        Optional<Memo> memo = memoRepository.findById(mno);
        return memo.get();
    }


}

 

 

 

package org.zerock.ajax1.controller;

import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.zerock.ajax1.entity.Memo;
import org.zerock.ajax1.repository.MemoRepository;

import java.util.Optional;

@RestController
@Slf4j
public class MyController {

    @Autowired
    MemoRepository memoRepository;

    @GetMapping("/memo/{id}")
    public ResponseEntity<Optional<Memo>> getList(@PathVariable("id") Long id) {
        log.info("id: {}", id);
        return new ResponseEntity<>(memoRepository.findById(id), HttpStatus.OK);
    }

    @PostMapping("/input")
    public ResponseEntity<Long> register(@RequestBody Memo memo) {
        log.info("memo: {}",memo);
        memoRepository.save(memo);
        return new ResponseEntity<>(memo.getMno(), HttpStatus.OK);
    }

}

 

jsp & js

 

ajaxTest.jsp

<%--
  Created by IntelliJ IDEA.
  User: 1
  Date: 2023-09-13
  Time: 오전 10:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div id="here">
</div>
<input type="text" id="memoId"/>
<button id="btn">클릭</button>

<label>
  <p>
    <input type="text" name="memoText" />
    <button id="btn2">입력</button>
  </p>
</label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#btn").on("click", function () {
            let id = $('#memoId').val();
            $.getJSON('/memo/'+id, function (data) {
                console.log(data);
                //$("#here").text(data);
                let str = "<p>"+data.mno+"<br/>"+data.memoText+"</p>";
                $("#here").html(str);
            });
        });

        $('#btn2').on("click", function () {
            let memo = {
                memoText: $('input[name="memoText"]').val(),
            };
            console.log(memo);

            $.ajax({
                url: '/input/',
                method: 'post',
                data: JSON.stringify(memo),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (data) {
                    console.log(data);

                }
            })
        });

    });
</script>
</body>
</html>

 

ajaxTest2.jsp

<%--
  Created by IntelliJ IDEA.
  User: 1
  Date: 2023-09-13
  Time: 오전 10:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div id="here">
</div>
<input type="text" id="memoId"/>
<button id="btn">클릭</button>

<label>
  <p>
    <input type="text" name="memoText" id="id2"/>
    <button id="btn2">입력</button>
  </p>
</label>
<script>

    let btn = document.querySelector("#btn");
    let id = document.querySelector("#memoId");
    let here = document.querySelector("#here");
    let btn2 = document.querySelector("#btn2");
    btn.addEventListener("click", function () {
        let val = id.value;
        console.log(val);
        fetch("/memo/"+val, {
            method: "GET",
        }).then((response) => response.json()).then((data) => {
                console.log(data);
                here.innerHTML = "<p>"+data.mno+"<br/>"+data.memoText+"</p>";
            });
    });
    btn2.addEventListener("click", function () {
        const val = document.querySelector("#id2").value;
        let memo = {
            memoText: val,
        };
        fetch("/input/", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify(memo),
        })
            .then((response) => response.json())
            .then((data) => console.log(data));
    });
</script>
</body>
</html>

 

page.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr>
        <th>mno</th>
        <th>memoText</th>
    </tr>
    <c:forEach var="memo" items="${list}">
        <tr>
            <td>${memo.mno}</td>
            <td>${memo.memoText}</td>
        </tr>
    </c:forEach>
</table>
</body>
</html>

 

결과