에이잭스 사용해서 통신하기, 어드민페이지 만들기
join.jsp
스크립트와 아래 라벨태그, 인풋 태그 안에 id 같은지 확인하고, idCheck 확인하기.
//2024.02.29
$(function(){
$('#idCheck').click(function(){
let id = $('#id').val();
Swal.fire('ID검사', '검사할 아이디: ' +id, 'success');
//3글자 이상, 10글자 이하
/* if(){
//3글자 이하, 10글자 이상 = 비정상->멈춤
}else {
//3글자 이상, 10글자 이하 = 정상->ajax
} */
});
<!-- 아이디 (중복검사) -->
<label for="id" class="col-sm-2 col-form-label">아이디</label>
<div class="col-sm-7">
<input type="text" id="id" class="form-control" placeholder="아이디를 입력하세요">
</div>
<!-- 중복검사 버튼 -->
<div class="col-sm-3">
<button type="button" id="idCheck" class="btn btn-info w-100">ID 검사</button>
</div>
</div>
if문으로 조건 넣기(전제)
//2024.02.29 idCheck
$(function(){
$('#idCheck').click(function(){
let id = $('#id').val();
Swal.fire('ID검사', '검사할 아이디: ' +id, 'success');
//3글자 이상, 10글자 이하
//기회가 된다면 공백을 사용하지 못하게 하기.
if(id.length > 10 || id.length <3){
//3글자 이하, 10글자 이상 = 비정상->멈춤
Swal.fire('ID검사', '3글자 이하, 10글자 이상', 'errir');
}else {
//3글자 이상, 10글자 이하 = 정상->ajax
$.ajax({
url : './idCheck',
type : 'post',
dateType : 'text',
data : {id : id},
success: function(data){
Swal.fire('ID검사', '성공: ' +data, 'success');
},
error : function(error){
Swal.fire('ID검사', '실패: ' +error, 'error');
}
});
}
});
*공백을 사용하지 못하게 하기.
if(id.length > 10 || id.length <3){
*3글자 이하, 10글자 이상 = 비정상->멈춤
*3글자 이상, 10글자 이하 = 정상->ajax
//기회가 된다면 공백을 사용하지 못하게 하기.
if(id.length > 10 || id.length <3){
//3글자 이하, 10글자 이상 = 비정상->멈춤
Swal.fire('ID검사', '3글자 이하, 10글자 이상', 'errir');
}else {
//3글자 이상, 10글자 이하 = 정상->ajax
$.ajax({
url : './idCheck',
type : 'post',
dateType : 'text',
data : {id : id},
success: function(data){
Swal.fire('ID검사', '성공: ' +data, 'success');
},
error : function(error){
Swal.fire('ID검사', '실패: ' +error, 'error');
}
});
}지금은 에러만 되는게 맞다
LoginController
이렇게 넣으면 성공된다. 그런데 우리는 LoginController 에 안넣고, RestFullController 에 만들어준다.
RestFullController (api 모아두는 곳) >idCheck 만들기
@PostMapping("/idCheck")
public String idCheck() {
return "0";
}
RestFullController
@PostMapping("/idCheck")
public String idCheck(@RequestParam("id") String id) {
System.out.println(id);
return "0";
}
매개변수 변경해주기
public String idCheck(@RequestParam("id") String id)
아이디가 들어오면 db에게 이 아이디가 있냐고 물어볼 수 있다.
RestFullController >RestService 보내기
>여기서 result가 오류가 나게 되는데 String을 바꿔주면 된다.
return + "" ; >> 이렇게 임시로 해주면 오류뜨지 않음
//2024.02.29 아이디중복체크
public int idCheck(String id) {
return restDAO.idCheck(id);
}
RestService > RestDAO 로 보내기
public int idCheck(String id) {
return sqlSession.selectOne("rest.idCheck", id);
}
RestDAO >셀렉트원으로 (두번째 클릭)
Rest-mapper > 진짜로 쿼리문 짜는거 너무 어렵다....너무 어렵다 >거의 내가 만든건 없음
<select id="idCheck" parameterType="String" resultType="Integer">
SELECT count(*) FROM member WHERE mid=#{id}
</select>
RestFullController에서 리턴 값 변경
조인jsp > 조건 걸어서 가입불가, 가입허가 스왈로 뜨게 하기
success: function(data){
if(data.count == 1){
Swal.fire('ID검사','이미 가입된 ID입니다. 다른 아이디를 입력하세요.', 'warning');
} else {
Swal.fire('ID검사', id + '는 가입할 수 있는 ID입니다.', 'success');
//나머지 작업
}
},
join.jsp> 데이터 값 제이슨으로 변경
if(id.length > 10 || id.length < 3){
//3글자 이하, 10글자 이상 = 비정상 -> 멈춤
Swal.fire('ID검사','아이디는 3 ~ 10 글자로 만들어주세요.', 'error');
} else {
//3글자 이상, 10글자 이하 = 정상 -> ajax
$.ajax({
url : './idCheck',
type : 'post',
dataType : 'json',
data : {id : id},
success: function(data){
if(data.count == 1){
Swal.fire('ID검사','이미 가입된 ID입니다. 다른 아이디를 입력하세요.', 'warning');
} else {
Swal.fire('ID검사', id + '는 가입할 수 있는 ID입니다.', 'success');
//나머지 작업
}
},
error : function(error){
Swal.fire('ID검사','문제가 발생했습니다 ' + error, 'error');
}
});
}
});
객체 속에 객체는 들어갈 수 있다.
리턴값 변경
join.jsp > RestFoullController 리턴 값 변경 후 스왈은 쓸 수 없으니까 얼터로 작성
$.ajax({
url : './idCheck',
type : 'post',
dateType : 'json',
data : {id : id},
success: function(data){
alert(data.result.count);
RestFoullController
맵으로 변경 : 맵이 편한 방식이지 꼭 맵으로 해야하는건 아니다.
@PostMapping("/idCheck")
public Map<String, Object> idCheck(@RequestParam("id") String id) {
System.out.println(id);
int result = restService.idCheck(id);
System.out.println("실행결과 : " + result);
// result : {count : 1/0}
//return "result : {count : " + result + "} ";
Map<String, Object> resultMap = new HashMap<String, Object>();
resultMap.put("count", result);
return resultMap;
}
데이터를 자동변환해준다. > 폼xml 파일에 있으면 된다. >>이거 왜 줬더라....
에이잭스 >alert(data.count); 변경
dateType : 'json',으로 되어 있어야 컨트롤러에서 json방식으로 바꾼 리턴값이 들어온다.
$.ajax({
url : './idCheck',
type : 'post',
dateType : 'json',
data : {id : id},
success: function(data){
alert(data.count);
if(data == 1){
Swal.fire('ID검사', '이미 가입된 ID입니다. 다른 아이디를 입력하세요.', 'success');
}else {
Swal.fire('ID검사',id+ '는 가입할 수 있는 ID입니다.', 'success');
}
},
나머지 작업 >서블릿에서 했던 작업을 로그인jsp에서 해준다.
아이디검사 완료했습니다, 아이디 잘못되면 경고 뜨도록 , 온체인지
pom.xml> 제이슨 오프젝트추가 , 기존에 쓰던게 있지만 새로운거 써보고 싶어서 추가.
<!-- https://mvnrepository.com/artifact/org.json/json -->
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20240205</version>
</dependency>
RestFullController> JSONObject 이용(맵삭제)
@PostMapping("/idCheck")
public String idCheck(@RequestParam("id") String id) {
//System.out.println(id);
int result = restService.idCheck(id);
//System.out.println("실행결과 : " + result);
// result : {count : 1/0}
//return "result : {count : " + result + "} ";
//Map<String, Object> resultMap = new HashMap<String, Object>();
//resultMap.put("count", result);
//JsonObject 이용시
JSONObject json = new JSONObject();
json.put("count", result);
return json.toString();
}
리턴 값을 String으로 변화하고,String으로 변환(전체), 맵사용한건 주석처리
@PostMapping("/idCheck")
public String idCheck(@RequestParam("id") String id) {
System.out.println(id);
int result = restService.idCheck(id);
System.out.println("실행결과 : " + result);
// result : {count : 1/0}
//return "result : {count : " + result + "} ";
//Map<String, Object> resultMap = new HashMap<String, Object>();
//resultMap.put("count", result);
//JsonObject 이용시
JSONObject json = new JSONObject();
json.put("count", result);
return json.toString();
}
}
스트링 값으로 변경
public String idCheck(@RequestParam("id") String id) {
제이슨 객체 추가하고, 리턴값 json.toString으로 변환
//JsonObject 이용시
JSONObject json = new JSONObject();
json.put("count", result);
return json.toString();
join.jsp > if(data.count == 1){ 변경
가입할 수 없어야하는데....? >확인하기 >> 고치긴했다.
RestFullController > 게시판을 제이슨으로 출력해주는 api
일단 전체 코드 > 여기서부터 놓친게 많아서 순서가 잘 기억나지 않아 일단 붙여본다.
// 게시판을 json 으로 출력해 주는 api
@GetMapping("/jsonBoard")
public String jsonBoard(
@RequestParam(value = "pageNo", required = false) String no ,
@RequestParam(value = "search", required = false) String search) {
// pageNo가 오지 않는다면
int currentPageNo = 1;
if (util.str2Int(no) > 0) { // 정수=1, 정수가 아니면 currentPageNo
currentPageNo = Integer.parseInt(no);
}
//전체 글 수 totalRecordCount
int totalRecordCount = boardService.totalRecordCount(search);
// System.out.println("totalRecordCount : "+totalRecordCount);
// pagination 전자정부 프레임워크
PaginationInfo paginationInfo = new PaginationInfo();
paginationInfo.setCurrentPageNo(currentPageNo); // 현재 페이지 번호
paginationInfo.setRecordCountPerPage(10); // 한 페이지에 게시되는 게시물 수
paginationInfo.setPageSize(10); // 페이징 리스트의 사이즈 (페이징 숫자 수)
paginationInfo.setTotalRecordCount(totalRecordCount); // 전체 게시물 건 수
SearchDTO searchDTO = new SearchDTO();
searchDTO.setPageNo(paginationInfo.getFirstRecordIndex());
searchDTO.setSearch(search);
List<BoardDTO> list = boardService.boardList(searchDTO);
//json
JSONObject jsonList = new JSONObject();
jsonList.put("list", list);
jsonList.put("paginationInfo", paginationInfo);
jsonList.put("pageNo", no);
return jsonList.toString();
//http://localhost/controller/jsonBoard?pageNo=3 로 들어가면 나옴
}
아 여기서부터 놓쳤다. 좀 빡친다
BoardController 에서 페이지 만드는 거 가져가야할것 > search 입력부분
public String jsonBoard(@RequestParam(value = "pageNo", required = false) String no)) {
//전체 글 수 totalRecordCount
int totalRecordCount = boardService.totalRecordCount(search);
//System.out.println("totalRecordCount : "+totalRecordCount);
SearchDTO searchDTO = new SearchDTO();
searchDTO.setPageNo(paginationInfo.getFirstRecordIndex());
searchDTO.setSearch(search);
List<BoardDTO> list = boardService.boardList(searchDTO);
모델은 이제 못쓴다.
join.jsp >idCheck 스크립트
//2024.02.29 idCheck
$(function(){
//Swal.fire('title','content', 'success');
//2024-02-29 애플리케이션 테스트 수행 psd
$('#idCheck').click(function (){
let id = $('#id').val();
//Swal.fire('ID검사','검사할 아이디 : ' + id, 'success');
//3글자 이상, 10글자 이하
//기회가 된다면 공백을 사용하지 못하게 해주세요.
if(id.length > 10 || id.length < 3){
//3글자 이하, 10글자 이상 = 비정상 -> 멈춤
Swal.fire('ID검사','아이디는 3 ~ 10 글자로 만들어주세요.', 'error');
} else {
//3글자 이상, 10글자 이하 = 정상 -> ajax
$.ajax({
url : './idCheck',
type : 'post',
dataType : 'json',
data : {id : id},
success: function(data){
if(data.count == 1){
Swal.fire('ID검사','이미 가입된 ID입니다. 다른 아이디를 입력하세요.', 'warning');
} else {
Swal.fire('ID검사', id + '는 가입할 수 있는 ID입니다.', 'success');
//나머지 작업
}
},
error : function(error){
Swal.fire('ID검사','문제가 발생했습니다 ' + error, 'error');
}
});
}
});
회원가입 스크립트(암호 검사, 이메일형식 검사)
//2024.02.28 회원가입
//Swal.fire('title','content', 'success');
//join을 클릭하면 이벤트 발생
$('#join').click(function(){
//Swal.fire('회원가입', '회원가입 버튼을 클릭하셨습니다.' , 'success');
//id값 가져오기
let id=$('#id').val();
//Swal.fire('회원가입','아이디:' + id, 'success' );
let pw1 =$('#password1').val();
let pw2 =$('#password2').val();
let name =$('#name').val();
let email =$('#email').val();
//Swal.fire('회원가입','아이디 : ' + id + "비밀번호 : " + pw1 + "/" + pw2, 'success')
if(id.length < 3 || id.length > 10){
$('#id').focus();
Swal.fire('회원가입','아이디는 3~10글자 사이여야 합니다.', 'error');
return false;
}
if(pw1 == ''){
$('#pw1').focus();
Swal.fire('회원가입','암호를 입력하세요.', 'error');
return false;
}
if(pw2 == ''){
$('#pw2').focus();
Swal.fire('회원가입','암호를 다시 입력하세요.', 'error');
return false;
}
if(pw1.length < 3 || pw1.length > 10){
$('#pw1').text('');
$('#pw2').text('');
$('#pw1').focus();
Swal.fire('회원가입','비밀번호는 3~10글자 사이여야 합니다.', 'error');
return false;
} else if(pw1 != pw2){
$('#pw1').text('');
$('#pw2').text('');
$('#pw1').focus();
Swal.fire('회원가입','비밀번호가 일치하지 않습니다.', 'error');
return false;
}
if(name.length < 3 || name.length > 10){
Swal.fire('회원가입','닉네임은 3~10글자 사이여야 합니다.', 'error');
$('#name').focus();
return false;
}
const regExp = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.[a-zA-Z]{2,4}$/;
if(!regExp.test(email)){
Swal.fire('회원가입','이메일 형식이 아닙니다.', 'error');
return false;
}
스크립트에 들어가는 id 부분이 맞는지 확인해야한다.
<!-- join-->
<section class="page-section" id="mail">
<div class="d-flex justify-content-center">
<div class="text-center mb-5 w-50">
<div class="mb-3 row">
<!-- 아이디 (중복검사) -->
<label for="id" class="col-sm-2 col-form-label">아이디</label>
<div class="col-sm-7">
<input type="text" id="id" class="form-control" placeholder="아이디를 입력하세요">
</div>
<!-- 중복검사 버튼 -->
<div class="col-sm-3">
<button type="button" id="idCheck" class="btn btn-info w-100">ID 검사</button>
</div>
</div>
<!-- 비밀번호 -->
<div class="mb-3 row">
<label for="inputPassword" class="col-sm-2 col-form-label">비밀번호</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="password1" placeholder="암호를 입력하세요">
</div>
<!-- 비밀번호2 -->
<div class="col-sm-5">
<input type="password" class="form-control" id="password2" placeholder="암호를 입력하세요">
</div>
</div>
<!-- 닉네임 -->
<div class="mb-3 row">
<label for="name" class="col-sm-2 col-form-label">이 름</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="이름을 입력하세요">
</div>
</div>
<!-- 이메일 (중복검사) -->
<div class="mb-3 row">
<label for="email" class="col-sm-2 col-form-label">이메일</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="이메일을 입력하세요">
</div>
</div>
<div class="mb-3 row">
<div class="col-sm-12">
<button type="button" id="join" class="btn btn-info">회원가입</button>
</div>
</div>
</div>
</div>
</section>
페이징시작
BoardController >pageNo가 오지 않는다면 부분 복사해서 RestFullController 에 넣기
int currentPageNo = 1;
if(util.str2Int(no) > 0 ) {//여기 수정해주세요.
currentPageNo = Integer.parseInt(no);
매개변수>no로 밥꾸기
RestFullController > Util 넣어주기
@Autowired
Util util;
BoardController>pagination(전자정부페이징)를 RestFullController 으로 복사
List<BoardDTO> list = boardService.boardList 부분 에러나는 부분 사진처럼 수정
선생님거 가져오면 에러가 나니까 알아서 하래..
board-mapper
괄호때문에 한시간 날렸다 ^^ 음 진짜 ....ㅎ중간에 괄호가 잘 되어있지 않아서
List<BoardDTO> list = boardService.boardList
이부분이 계속 에러가 떴다. 아마 가져오는 과정에서 괄호까지 신경쓰지 못해서 인 것 같다.
이거 크롬확장으로 추가>http://localhost/controller/jsonBoard?pageNo= 번호 로 들어가면 페이지 나온다.
여기까지 하면 페이징도 나온다.
사진에 있는 검색(서치)를 만들어보자
board.jsp >사실 말이야....위에 페이징 부분이 개떠....ㄱ.........잘안되서 서치부분은 잘 못따라갔다....ㅎ
그래서 캡쳐해놓은 사진을 지우지 않겠다...사실 사진이 많은건...내가 잘 모르기때문에 지우지 않는경우가 많지 핫핫핫
<!-- 검색 -->
<div class="m-2 bg-secondary">
<div>
<form action="./board">
<input type="text" name="search">
<input type="hidden" name="pageNo" value="${pageNo }">
<button type="submit">검색</button>
</form>
</div>
</div>
폼 태그 > 갯방식의 보드로
<form action="./board">
숨기기> 검색할때는 서치만 가면 된다. 히든은 검증용 코드
BoardController>search 추가
이렇게 search 추가
// 2024.02.20 페이징 추가하기/ 2024.02.29 서치
@GetMapping("/board")
public String board(
@RequestParam(value="pageNo", required=false) String no,
@RequestParam(value="search", required=false) String search,
Model model) {
이렇게 콘솔에 서치가 출력되야한다.
BoardController>Search 넣으면서 service, dao에 매개변수 다르게 2개씩 들어가 오류가 안난다.
래스트풀컨트롤러에 페이징 하는 부분에 보드서비스로 넘긴다.(래스트 서비스로 넘기는거 아님)
BoardController > Search 추가
// 2024.02.20 페이징 추가하기/ 2024.02.29 서치
@GetMapping("/board")
public String board(
@RequestParam(value="pageNo", required=false) String no,
@RequestParam(value="search", required=false) String search,
Model model) {
//System.out.println(search);
//pageNo가 오지 않는다면
int currentPageNo = 1;
if(util.str2Int(no) > 0 ) {//여기 수정해주세요.
currentPageNo = Integer.parseInt(no);
}
//전체 글 수 totalRecordCount
int totalRecordCount = boardService.totalRecordCount(search);
//pagination
PaginationInfo paginationInfo = new PaginationInfo();
paginationInfo.setCurrentPageNo(currentPageNo); //현재 페이지 번호
paginationInfo.setRecordCountPerPage(10); //한 페이지에 게시되는 게시물 건 수
paginationInfo.setPageSize(10); // 페이징 리스트의 사이즈
paginationInfo.setTotalRecordCount(totalRecordCount);//전체 게시물 건 수
SearchDTO searchDTO = new SearchDTO();
searchDTO.setPageNo(paginationInfo.getFirstRecordIndex());
searchDTO.setSearch(search);
List<BoardDTO> list = boardService.boardList(searchDTO);
model.addAttribute("list", list);
//페이징 관련 정보가 있는 PaginationInfo 객체를 모델에 반드시 넣어준다.
model.addAttribute("paginationInfo", paginationInfo);
model.addAttribute("pageNo", currentPageNo);
model.addAttribute("search", search);
return "board";
}
BoardService > Search 추가
// 2024.02.20 //2024.02.29 서치
public int totalRecordCount(String search) {
return boardDAO.totalRecordCount(search);
}
BoardDAO > Search 추가
public int totalRecordCount(String search) {
return sqlSession.selectOne("board.totalRecordCount", search);
}
보드매퍼 seach 넣어주기(페이지 하나만 나오게_)
<!-- 2024.02.29 서치 -->
<select id="totalRecordCount" parameterType="String" resultType="Integer">
SELECT COUNT(*) FROM board WHERE board_del='1'
<if test="search != null">
AND board_title LIKE CONCAT('%', #{search}, '%')
OR board_content LIKE CONCAT('%', #{search}, '%')
</if>
</select>
BoardController > SearchDTO 가져오기
SearchDTO searchDTO = new SearchDTO();
searchDTO.setPageNo(paginationInfo.getFirstRecordIndex());
searchDTO.setSearch(search);
SearchDTO 만들기 > 별명 만들기(mybatis-config)
package org.mask.dto;
import lombok.Getter;
import lombok.Setter;
@Setter
@Getter
public class SearchDTO {
private int pageNo;
private String search; {
}
}
mybatis-config
<configuration>
<typeAliases>
<typeAlias type="java.lang.Integer" alias="integer"/>
<typeAlias type="org.mask.dto.BoardDTO" alias="boardDTO"/>
<typeAlias type="org.mask.dto.WriteDTO" alias="writeDTO"/>
<typeAlias type="org.mask.dto.CommentDTO" alias="commentDTO"/>
<typeAlias type="org.mask.dto.LoginDTO" alias="loginDTO"/>
<typeAlias type="org.mask.dto.MemberDTO" alias="memberDTO"/>
<typeAlias type="org.mask.dto.GalleryDTO" alias="galleryDTO"/>
<typeAlias type="org.mask.dto.NoticeDTO" alias="notice"/>
<typeAlias type="org.mask.dto.SearchDTO" alias="Search"/>
</typeAliases>
</configuration>
BoardController > searchDTO 수정
List<BoardDTO> list = boardService.boardList(searchDTO);
BoardService> searchDTO 수정
public List<BoardDTO> boardList(SearchDTO searchDTO) {
return boardDAO.boardList(searchDTO);
}
BoardDAO > searchDTO 수정
// 2024.02.20 페이징
public List<BoardDTO> boardList(SearchDTO searchDTO) {
return boardDAO.boardList(searchDTO);
}
대망의 매퍼 모르겠다 망해라.
<select id="boardList" parameterType="search" resultType="boardDTO">
SELECT b.board_no, b.board_title, m.mname,
if(date_format(current_timestamp(),'%Y-%m-%d') = date_format(b.board_date,'%Y-%m-%d'),
date_format(b.board_date,'%h:%i'),date_format(b.board_date,'%m-%d')) AS board_date,
(select count(*) from visitcount where visitcount.board_no = b.board_no) AS board_count,
(select count(*) from comment where comment.board_no = b.board_no and comment.cdel = 1) AS comment
FROM (board b join member m on(b.mno = m.mno))
WHERE b.board_del = '1'
<if test="search != null">
AND b.board_title LIKE CONCAT('%', #{search}, '%')
OR b.board_content LIKE CONCAT('%', #{search}, '%')
OR m.mname LIKE CONCAT('%', #{search}, '%')
</if>
order by b.board_no desc
LIMIT #{pageNo}, 10
</select>
오전까지는 분명 괜찮았는데 중간부터 놓치니까 따라갈수가없었다.
'2023.11.21-2024.05.31' 카테고리의 다른 글
| 20240304 스프링(페이징, 검색, 게시글 수,searchTitle,postDel) (0) | 2024.03.04 |
|---|---|
| 20240304 스프링(관리자페이지-adminboard, 페이징, 검색, 게시글 수 ) (0) | 2024.03.04 |
| 20240228 스프링(데이터베이스 암호화, 회원가입 -비밀번호 확인) (2) | 2024.02.28 |
| 20240228 스프링(회원가입) (1) | 2024.02.28 |
| 20240227 스프링(공지 게시판-jsp만들기, detail만들기, 수정 삭제 버튼만들기, 페이징 ,배지(new)) (1) | 2024.02.27 |
