JAVA
board,member(spring.ver1)
docc
2021. 7. 26. 22:30
TDD(Test Driven Development)
“테스트 주도 개발(Test-Driven Development)”이라는 용어 그대로 이해해보면, 개발을 하는 데 있어서 테스트가 주가 되어 개발한다는 의미.
“테스트를 염두에 둔 프로그램 개발 방법”이라고 이해하기 ( 자바-스프링 코드를 테스트로 돌릴 수 있는 도구 )
1. board_ui
>> 게시물컨트롤
@Controller
public class 게시물컨트롤{
@Autowired
IBoardDAO boardDAO;
@GetMapping("board")
public String 게시물등록준비하다() {
// 요청
// 업무
// 경로 지정
return "게시물등록창";
}
// @PostMapping("board") 같은 말
@RequestMapping(value="board", method=RequestMethod.POST)
public ModelAndView 게시물등록하다(Board board, HttpSession session) {//세션필요하면 그냥 매개값으로 Spring 이 알아서 준다.
// 요청
ModelAndView mv = new ModelAndView();
//다른값들은 알아서 들어가지만 회원의 번호는 session 통해서 가져와 넣어놓고 DB에 save 해야한다.
int 로그인한회원번호 = (Integer)session.getAttribute("no");
Member 작성한회원 = new Member();
작성한회원.setNo(로그인한회원번호);
board.setWriter(작성한회원);
boardDAO.save(board);
// 경로지정
mv.addObject("title", board.getTitle());
mv.setViewName("게시물등록결과통보");
return mv;
}
}2. login_ui
>> 로그인아웃컨트롤
@Controller
public class 로그인아웃컨트롤{
@Autowired
IMemberDAO dao;
@GetMapping("login")//로그인준비, 이름이 겹치니까 method 를 다르게 해서 겹치지 않게 한다. get, post
public String process() {
return "로그인창";
}
@PostMapping("faillogin")//로그인준비, 이름이 겹치니까 method 를 다르게 해서 겹치지 않게 한다. get, post
public String 실패로그인다시하다() {
return "로그인창";
}
@PostMapping("login")
public ModelAndView process(@RequestParam("id")String id,String password, HttpSession session) {//변수명에 맞춰 getParameter 자동으로 해줌.
//만약 들어오는 name 속성값과 변수명이 다르다면 @RequestParam("name값") 을 앞에 매칭시켜준다.
//요청
Object[] NoAndName = dao.isin(id, password);
ModelAndView mv = new ModelAndView();
if(NoAndName==null) {
//여기서 조건을 따져 forward 로 보내며 msg 까지 설정하면 로그인준비 control 에서 다시 조건을 따져 request 로 값을 받고 view 넘기지 않아도
//이 값들이 request에 누적되어 view까지 넘어간다.
mv.addObject("message", "아이디 또는 비밀번호가 일치하지 않습니다.");
mv.setViewName("forward:/faillogin");//여긴 redirect 하면 request.setAttribute() 가 안가니까 forward
//애초에 faillogin 요청명으로 주소창에 뜨는게 더이상..
return mv;
}
session.setAttribute("no", NoAndName[0]); // 회원 번호 저장.
session.setAttribute("name", NoAndName[1]); // 회원 번호 저장.
session.setMaxInactiveInterval(60*30); // s(초) 단위. session이 존재하는 시간. 즉, 로그인 유지시간이다. web.xml 에서도 지정가능하며 거기는 분단위다.
mv.setViewName("redirect:/contents");//forward 도 가능하지만 forward대상 컨트롤을 숨기기 때문에 요청이 남아있어 새로고침시 다시 자신 컨트롤이 작동한다.
// redirect 해도 session저장에 문제 없으니 이렇게 하자.
return mv;
}
@RequestMapping("logout")
public ModelAndView process(HttpSession session) {
if(session != null) {
session.invalidate();
}
ModelAndView mv = new ModelAndView();
mv.setViewName("redirect:/contents");
return mv;
}
}3. member_ui
>> Profile
@Controller
public class Profile{
IMemberDAO memberDAO = new MemberDAO();
@RequestMapping("profile/{no}")//profile?no=1 -> profile/1 로 바뀜
public ModelAndView process(@PathVariable int no) {
Member member = memberDAO.findByNo(no);
ModelAndView mv = new ModelAndView();
mv.setViewName("profile");
mv.addObject("profile", member.getProfile());
return mv;
}
}| @RequestMapping : {요청명에 들어가는 변하는 값} @PathVariable : 요청명의(경로) 변수를 매핑 , 변수명과 설정한 요청명값(현재 no) 가 같지안다면 @PathVariable("no")까지 써야함 |
>> 아이디중복검사컨트롤
@Controller
public class 아이디중복검사컨트롤{
@Autowired
MemberDAO dao;
@GetMapping("id")
public String process() {
return "아이디중복검사창";
}
@PostMapping("id")
public ModelAndView process(String id) {
boolean 사용가능여부 = false;
String 메세지 = "";
if(id == "") {
메세지 = "아이디를 입력하세요.";
}else if(id != null){
사용가능여부 = dao.isin(id);
메세지 = (사용가능여부)?"사용가능한 ID입니다.":"이미 사용 중인 ID입니다.";
}
ModelAndView mv = new ModelAndView();
mv.addObject("msg", 메세지);
mv.addObject("id", id);
mv.addObject("result", 사용가능여부);
mv.setViewName("아이디중복검사창");
return mv;
}
}>> 회원등록컨트롤
@Controller
public class 회원등록컨트롤{
@Autowired
MemberDAO memberDAO;
@GetMapping("member")
public String process() {
return "회원등록창";
}
@PostMapping("member")
public ModelAndView process(@ModelAttribute Member member,HttpSession session) {//객체 안의 멤버변수를 살펴서 변수명에 맞춰 매칭시켜줌
//@ModelAttribute 는 MultipartFile 형의 멤버변수를 가지고 있다면 선언해줘야 한다.
ModelAndView mv = null;
try {
memberDAO.save(member);
mv = new ModelAndView();
// 정보는 여기서 저장하고 나가기!
Object[] NoAndName = memberDAO.isin(member.getId(), member.getPassword());
session.setAttribute("no", NoAndName[0]);
session.setAttribute("name", NoAndName[1]);
// 이 컨트롤에서 벗어나기!
mv.setViewName("redirect:/contents");
} catch (Exception e) {
e.printStackTrace();
}
return mv;
}
@RequestMapping("result_member")
public String process2() {
return "회원등록결과통보";
}
@RequestMapping("member/{no}")
public ModelAndView process(@PathVariable("no")int 회원번호) {//요청이름과 변수명이 다르니 ("no")까지 써주기
ModelAndView mv = new ModelAndView();
Member findedMember = memberDAO.findByNo(회원번호);
mv.addObject("findedMember", findedMember);
mv.setViewName("회원상세창");
return mv;
}
@RequestMapping("member2/{no}")
public ModelAndView process2(@PathVariable("no")int 회원번호) {
ModelAndView mv = new ModelAndView();
Member findedMember = memberDAO.findByNo(회원번호);
mv.addObject("findedMember", findedMember);
//그림을 문자열로 바꿔 간다.
String profile = Base64.encodeBytes(findedMember.getProfile());
mv.addObject("profile", profile);
mv.setViewName("회원상세창2");
return mv;
}
}| if문 해석 | ||
| 1. 첨부리스트.childNodes.length : 첨부리스트 내의 li 들 몇갠지 | ||
| 2. 첨부리스트.childNodes.length - 1 : 마지막 li의 인덱스 | ||
| 3. 첨부리스트.childNodes[첨부리스트.childNodes.length - 1].childNodes[0].value : 마지막 li 의 input.file 의 값 |
4. VIEW
>> 게시물등록창 ( 주석설명 참고 )
<body>
제목
<input type="text" name="title" />
<br> 내용
<textarea name="title"></textarea>
<br> 첨부
<br>
<ul id="attachlist"></ul>
<button onclick="첨부요소추가하다()">추가</button>
</body>
</html>
<script type="text/javascript">
function 첨부요소추가하다(e) {
// ul 을 가져온다.
var 첨부리스트 = document.querySelector("#attachlist");
// ul 아래 자식요소(li)가 1개 이상은 있는데,
// 마지막 li의 첫번째 자식인 input.file 에 값이 없을 때
if (첨부리스트.childNodes.length > 0
&& 첨부리스트.childNodes[첨부리스트.childNodes.length - 1].childNodes[0].value == "") {
return 0;
}
// ul 아래 들어갈 li, input.file, input.button 을 만든다.
var li = document.createElement("li");
var fileInput = document.createElement("input");
fileInput.type = "file";
var btnDelete = document.createElement("input");
btnDelete.type = "button";
btnDelete.value = "삭제";
// containerLi 라는 속성을 직접 만들어 li 객체를 기억한다.
// 과거의 li를 지목해서 가져올려면 어딘가에 저장해야 하기 때문이다.
btnDelete.containerLi = li;
btnDelete.addEventListener("click", function(event) {
// 현재 클릭 이벤트가 발생한 btnDelete 의 containerLi속성에 저장한 li를 가져온다.
var li=event.target.containerLi;
// 저장한 li 정보의 부모인 ul 을 가져온다.
var ul=li.parentNode;
// ul 의 자식요소인 li 를 지운다.
ul.removeChild(li);
})
// li 아래에 input.file, input.button 을 넣는다.
li.appendChild(fileInput);
li.appendChild(btnDelete);
// ul 아래에 위의 li 를 넣는다.
첨부리스트.appendChild(li);
}
</script>>> 로그인상단
<body>
<% if(session!=null){ %>
<%=(String)session.getAttribute("name") %><i class="fas fa-user"></i><button onclick="location.href='logout'">로그아웃</button>
<button onclick="location.href='member/<%=(int)session.getAttribute("no")%>'">개인정보</button>
<button onclick="location.href='member2/<%=(int)session.getAttribute("no")%>'">개인정보/이미지글자형식</button>
<%}else{ %>
<button onclick="location.href='login'">로그인</button><!-- get방식. post라고 안써있으면 다 get방식이다. -->
<button onclick="location.href='member'">회원등록</button>
<%} %>
</body>>> 로그인창
<body>
<h1>로그인</h1>
<p>${message}</p>
<form action="login" method="post" onsubmit="return 필수입력()">
id <input type="text" id="id" name="id"/>
password <input type="password" id="password" name="password"/>
<input type="submit" value="로그인"/><input type="button" onclick="location.href='member'" value="회원등록">
</form>
</body>>> 아이디중복검사창
<body>
<form action="id" method="post">
아이디 <input type="text" name="id" id="id" value="${id}" /> <input type="submit" value="검사">
</form>
<%-- 결과 출력 --%>
${msg}
<%if(result){ %>
<br>
<button onclick="id를보내다()">사용</button>
<%} %>
<button onclick="self.close()">취소</button>
</body>>> 회원등록창
<form action="member" onsubmit="return 회원등록하다()" method="post" enctype="multipart/form-data">
// 중략..
<script>
/* 우편번호,주소 */
function 조회창을띄우다(){
window.open("prepare_address","","width=450,height=300");
}
// 중략..
/* 아이디 */
function 아이디중복검사창을띄우다(){
window.open("id","","width=450,height=300");
}>> 회원상세창
<body>
<h1>회원상세</h1>
성명 <input type = "text" id="name" readonly="readonly" value="${findedMember.name}"><br>
프로필<img src="/profile/${findedMember.no}"/><br>
우편번호 <input type = "text" id="post" readonly="readonly" value="${findedMember.post}"><br>
주소 <input type = "text" readonly="readonly" value="${findedMember.address}"> <br>
상세주소 <input type = "text" readonly="readonly" value="${findedMember.detailaddress}"> <br>
전화번호 <input type = "text" readonly="readonly" value="${findedMember.tel}"/><br>
이메일 <input type = "text" readonly="readonly" value="${findedMember.email}"/><br>
아이디 <input type = "text" readonly="readonly" value="${findedMember.id}"><br>
<button onclick="location.href='/contents'">내용창으로</button>
</body>5. 상세보기에서 이미지 경로와 다시 내용보기 경로가 오류가 나는 이유
상세보기 uri = mvc/member/n
이곳에서 src 또는 href 경로요청을 zz 라고 해놓으면
src 또는 href 경로요청의 uri = mvc/member/zz 식으로 가기 때문에 요청명이 'zz' 인 곳으로 가려했는데 아니여서 오류가 난다.
같은 위치에 요청명이 바뀐다. ( mvc/member/n 에서 n 부분)
요청명이 'member/zz' 인 걸 찾는다.
해결방법 1. 절대루트로 작성한다.(http://~)
해결방법 2. ' /' 를 맨앞에 붙이면 ip:port/ 부터 시작한다
(1) '/'(ip:port/ 다음 경로) (2) '../' ( 윗 경로 ), (3)'' = '../' ( 현재경로 )
1. tomcat 의 server.xml 에 현재 앱의 path 를 / 로 바꾸기.
<Context docBase="spring-mvc" path="/" reloadable="true" source="org.eclipse.jst.jee.server:spring-mvc"/></Host>앞으로 주소창 요청이 http://localhost:8090/요청명 ( 프로젝트명 이제 안써도된다. )
2. 이미지를 불러올 src 요청명 맨앞에 '/' 를 붙이면 요청명을 ip:port/member/ 에서 경로를 하나 올라가서 ip:port/ 부터 시작한다.
ip:port/요청명 로 잘 매핑된다.
프로필<img src="/profile/${findedMember.no}"/><br>