console.log("boardComment.js in");
console.log(bnoVal);
console.log(nickName);
document.getElementById('cmtAddBtn').addEventListener('click',()=>{
const cmtText = document.getElementById('cmtText');
if(cmtText == null || cmtText == ''){
alert('댓글 내용을 입력해주세요.')
cmtText.focus();
return false;
}
const cmtData = {
bno : bnoVal,
writer : document.getElementById('cmtWriter').innerText,
content : cmtText.value
};
postCommentToServer(cmtData).then(result => {
if(result > 0){
alert("댓글 등록 성공");
cmtText.value="";
}
// 댓글 뿌리기 호출
spreadCommentList(bnoVal);
})
});
function spreadCommentList(bnoVal, page=1){
getCommentListFromServer(bnoVal, page).then(result =>{
console.log(result);
const ul = document.getElementById('cmtListArea');
if(result.cmtList.length > 0){
if(page == 1){
ul.innerHTML=""; // 기존 샘플값 비우기.
}
for(let cvo of result.cmtList){
let li = `<li data-cno = "${cvo.cno}" class="list-group-item">`;
li += `<div class="ms-2 me-auto">`;
li += `<div class="fw-bold">${cvo.writer}</div>`;
li += `${cvo.content}`;
li += `</div>`;
li += `<span class="badge text-bg-primary rounded-pill">${cvo.regDate}</span>`;
if(nickName == cvo.writer){
li += `<button type="button" class="btn btn-outline-warning btn-sm mod" data-bs-toggle="modal" data-bs-target="#myModal">%</button>`;
li += `<button type="button" class="btn btn-outline-danger btn-sm del">X</button>`;
}
li += `</li>`;
ul.innerHTML += li;
}
// page 처리
let moreBtn= document.getElementById('moreBtn');
// 전체 페이지가 현재 페이지보다 크다면... (나와야 할 페이지가 존재한다면...)
if(result.pgvo.pageNo < result.realEndPage){
moreBtn.style.visibility = "visible"; // 표시
moreBtn.dataset.page = page + 1;
}else{
moreBtn.style.visibility = "hidden"; // 숨김
}
}else{
let li = `<li class="list-group-item">Comment List Empty</li>`;
ul.innerHTML = li;
}
});
};
document.addEventListener('click',(e)=> {
if(e.target.id == 'moreBtn'){
let page = parseInt(e.target.dataset.page);
spreadCommentList(bnoVal, page);
}
if(e.target.classList.contains('del')){
let cno = e.target.closest('li').dataset.cno;
removeCommentToServer(cno).then(result => {
if(result > 0){
alert("삭제 성공!!");
spreadCommentList(bnoVal);
}
})
}
if(e.target.classList.contains('mod')){
let li = e.target.closest('li');
let modWriter = li.querySelector(".fw-bold").innerText;
document.getElementById('cmtWriterMod').innerText = modWriter;
let cmtText =li.querySelector('.fw-bold').nextSibling; // 쿼리 값의 같은 부모의 다른 형제 값
document.getElementById('cmtTextMod').value = cmtText.nodeValue; // 그냥 넣으면 Object로 입력
// 수정 버튼 id = cmtModBtn dataset
document.getElementById('cmtModBtn').setAttribute("data-cno", li.dataset.cno);
}
if(e.target.id == 'cmtModBtn'){
let cmtModData={
cno : e.target.dataset.cno,
content : document.getElementById('cmtTextMod').value
}
console.log(cmtModData);
// 비동기 처리
updateCommentToServer(cmtModData).then(result =>{
if(result > 0){
alert("수정 성공!!");
}
// 모달창 닫기
document.querySelector('.btn-close').click();
spreadCommentList(bnoVal);
});
}
});
async function updateCommentToServer(cmtModData) {
try{
const url = "/comment/update"
const config ={
method : "put",
headers : {
'content-type':'application/json; charset=utf-8'
},
body : JSON.stringify(cmtModData)
}
const resp = await fetch(url, config);
const result = await resp.text();
return result;
} catch(error){
console.log(error);
}
}
async function removeCommentToServer(cno) {
try{
const url = "/comment/remove/"+cno;
const config={
method:'delete'
}
const resp = await fetch(url, config);
const result = await resp.text();
return result;
} catch(error){
console.log(error);
}
}
async function postCommentToServer(cmtData) {
try {
const url = "/comment/post";
const config = {
method: "post",
headers:{
'Content-Type':'application/json; charset=utf-8'
},
body: JSON.stringify(cmtData)
};
const resp = await fetch(url, config);
const result = await resp.text();
return result;
} catch (error) {
console.log(error);
}
}
async function getCommentListFromServer(bnoVal, page) {
try{
const resp = await fetch("/comment/list/"+bnoVal+"/"+page);
const result = await resp.json();
return result;
} catch(error){
console.log(error);
}
}
◈UserController.java
package com.ezen.spring.controller;
import com.ezen.spring.domain.UserVO;
import com.ezen.spring.service.UserService;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import java.security.Principal;
@Slf4j
@RequestMapping("/user/*")
@RequiredArgsConstructor
@Controller
public class UserController {
private final UserService usv;
private final PasswordEncoder passwordEncoder;
@GetMapping("/signup")
public String signup(){
return "/user/register";
}
@PostMapping("/signup")
public String singup(UserVO userVO){
log.info(">>>> userVO {}",userVO);
userVO.setPwd(passwordEncoder.encode(userVO.getPwd()));
int isOk = usv.insert(userVO);
return "/index";
}
@GetMapping("/login")
public String login(){
return "/user/login";
}
@GetMapping("/list")
public String list(Model m){
m.addAttribute("userList",usv.getList());
return "/user/list";
}
@GetMapping("/modify")
public void modify(){}
@PostMapping("/modify")
public String modify(UserVO userVO){
log.info(">>> userVO >>> {}", userVO);
int isOk = 0;
if(userVO.getPwd() == null || userVO.getPwd().isEmpty()){
isOk = usv.modifyNoPwd(userVO);
} else{
userVO.setPwd(passwordEncoder.encode(userVO.getPwd()));
isOk = usv.modify(userVO);
}
return "redirect:/user/logout";
}
@GetMapping("/remove")
public String remove(Principal principal){
log.info(">>> principal >> {}", principal);
int isOk = usv.remove(principal.getName());
return "redirect:/user/logout";
}
@GetMapping("/last")
public String lastUpdate(Principal principal){
int isOk = usv.lastUpdate(principal.getName());
return "redirect:/user/logout";
}
}
◈UserService.java
package com.ezen.spring.service;
import com.ezen.spring.domain.UserVO;
import java.util.List;
public interface UserService {
int insert(UserVO userVO);
List<UserVO> getList();
int modifyNoPwd(UserVO userVO);
int modify(UserVO userVO);
int remove(String name);
int lastUpdate(String name);
}
◈UserServiceImpl.java
package com.ezen.spring.service;
import com.ezen.spring.domain.UserVO;
import com.ezen.spring.repository.UserMapper;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
@Slf4j
@RequiredArgsConstructor
@Service
public class UserServiceImpl implements UserService{
private final UserMapper userMapper;
@Transactional
@Override
public int insert(UserVO userVO) {
int isOk = userMapper.insert(userVO);
if(isOk > 0){
userMapper.authInsert(userVO.getEmail());
}
return isOk;
}
@Transactional
@Override
public List<UserVO> getList() {
List<UserVO> userList = userMapper.getList();
for(UserVO userVO : userList){
userVO.setAuthList(userMapper.selectAuths(userVO.getEmail()));
}
log.info(">>> userList >>> {}", userList);
return userList;
}
@Override
public int modifyNoPwd(UserVO userVO) {
return userMapper.updateNoPwd(userVO);
}
@Override
public int modify(UserVO userVO) {
return userMapper.update(userVO);
}
@Override
public int remove(String name) {
int isOk = userMapper.removeAuth(name);
if(isOk > 0){
userMapper.remove(name);
}
return isOk;
}
@Override
public int lastUpdate(String name) {
return userMapper.lastUpdate(name);
}
}
◈UserMapper.java
package com.ezen.spring.repository;
import com.ezen.spring.domain.AuthVO;
import com.ezen.spring.domain.UserVO;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
@Mapper
public interface UserMapper {
int insert(UserVO userVO);
void authInsert(String email);
UserVO selectEmail(String username);
List<AuthVO> selectAuths(String username);
List<UserVO> getList();
int updateNoPwd(UserVO userVO);
int update(UserVO userVO);
int remove(String name);
int removeAuth(String name);
int lastUpdate(String name);
}
◈userMapper.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="com.ezen.spring.repository.UserMapper">
<insert id="insert">
insert into user(email, pwd, nick_name)
value(#{email}, #{pwd}, #{nickName})
</insert>
<insert id="authInsert">
insert into auth(email, auth)
values(#{email}, 'ROLE_USER')
</insert>
<select id="selectEmail" resultType="com.ezen.spring.domain.UserVO">
select * from user where email = #{email}
</select>
<select id="selectAuths" resultType="com.ezen.spring.domain.AuthVO">
select * from auth where email = #{email}
</select>
<select id="getList" resultType="com.ezen.spring.domain.UserVO">
select * from user
</select>
<update id="updateNoPwd">
update user set nick_name = #{nickName} where email = #{email}
</update>
<update id="update">
update user set pwd=#{pwd}, nick_name = #{nickName} where email= #{email}
</update>
<delete id="remove">
delete from user where email = #{email}
</delete>
<delete id="removeAuth">
delete from auth where email = #{email}
</delete>
<update id="lastUpdate">
update user set last_login = now() where email = #{email}
</update>
</mapper>
