[Web] 최종프로젝트(5) 프론트단 . 이가 없이 잇몸으로! 꼭 알아야할 팁

hyewon jeong·2023년 2월 21일

목록 보기

7/24

벡앤드 입장에서 프론단 구현

📌 로드실행

  $(document).ready(function () {

📌 ajax 실행 -- 예

[검사]-콘솔창으로 response 찍어서 원하는 데이터 변수를 확인 후
아래와 같이 값을 가져온다.

 let inquiryId = response['id']

 $.ajax(settings).done(function (response) {
          
          console.log(response);

            let inquiryId = response['id']
            let title = response['title']
            let content = response['content']
            let createdDate = response['createdDate']
            let username = response['username']
            let nickName = response['nickName']

📌 response로 받아온 값을 프론트로 보여줄때

값을 변수로 받아서 temp_html로 저장하여
append() 로 $('# ') 위치에 지정하여 붙여준다.

.ajax(settings)
.done(function (response) {
    console.log(response);
    let rows = response.data
    for (let i = 0; i < rows.length; i++) {
        let inquiryId = rows[i]['id']
        let number = inquiryId
        let title = rows[i]['title']
        let createdDate = rows[i]['createdDate']

        let temp_html = ` <tr>
            <td>${number}</td>
            <td><a href ="contactDe-inquiry.html?${inquiryId}">${title}</td>
            <th>${createdDate}</th> 
            </tr>`

        $('#inquiryList').append(temp_html)
    }

벡앤드 값을 프론트 단에서 받아올때??

📌 @PathVaiable로 받을 값 가져오기

    var para = document.location.href.split("?");
    console.log(para[1])

document.location.href : 현재페이지 url을 가져온다.
split("?") : ? 물음표 기준으로 url을 쪼개어
para[1] : @PathVaiable로 받을 값을 가져온다.
아래와 같이 가져온 값을 url 에 적용한다.

"http://localhost:8080/api/contact/inquiries?page=" + para[1],

function showInquiry() {
    var para = document.location.href.split("?");
    console.log(para[1])
    var settings = {
        "url": "http://localhost:8080/api/contact/inquiries?page=" + para[1],

        "method": "GET",
        "timeout": 0
    };

📌 @RequestParam로 받을 값 가져오기

## ?size = " + $('#id').val() + ""

 <script>
  function contactWrite(){
    var settings = {
      "url": "<http://localhost:8080/api/managers/notices> ?size = " + $('#id').val() + ""
      "method": "POST",
      "timeout": 0,

예

// 검색창 조회 
      function noticeSearch(){
        var settings = {
  "url": "http://localhost:8080/api/managers/notices/check?keyword="+$('#keywordInput').val(),

📌 temp_html 안에 있는 { 변수 } 값에 온클릭과 같은 이벤트를 적용시

에러남 . 아래와 같이 적용을 시켜줘야함
부모.있는 버튼? 자식이벤트 버튼에 직접 온클릭을 적지 말고 버튼 네임만 적어서 저렇게 적용시켜줌

$('#t_exePosting').on("click", "button[name='enrollComment']", function()

📌 html 테이블 만들기

Table

Div+css가 레이아웃 구성을 대체함
td 또는 tr, td와 같이 써야 함
th: 헤더 이름, 자동으로 볼드 처리됨
tr: 행
td: 열
셀 병합: 왼쪽에서 오른쪽, 위에서 아래로만 가능
1. colspan: 열 병합
2. rowspan: 행 병합

▽ 예제 코드 1 ▽

<!DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <tr>
            <td colspan="2" align=center>A</td>
        </tr>
        <tr>
            <td>C</td>
            <td>D</td>
        </tr>
    </table>
    <hr>
    <table border="1">
        <tr>
            <td>A</td>
            <td rowspan=2>B</td>
        </tr>
        <tr>
            <td>C</td>
        </tr>
    </table>
</body>
</html>

📌 로컬스토리지 이용하여 데이터 가져오기

📌 성공 또는 실패시 메세지 처리

성공 시 done() 함수로 alert로 알려주고,
실패 시 fail() 함수로 에러메세지 알려주기

$.ajax(settings)
    .done(function (response) {
        console.log(response);
        alert("수정 성공")
        window.location = './contactPageIndex-inquiry.html'
    }).fail(function (response) {   //실패시 실행 
            console.log(response.responseJSON);
            if (response.responseJSON.statusCode === 404) {
                alert(response.responseJSON.message)
            }
            if (response.responseJSON.statusCode === 500) {
                alert(response.responseJSON.message)
            }
        });

📌 상대경로 , 절대경로 (/)찾아보기

에러발생 : /index.html 을 해도 그 경로로 가지 않았다.
원인 : 프로젝트 자체가 폴더 속에 있는데 폴더이름이 properties-main 이여서

경로를 window.location./properties-main/index.html 하거나 아래와 같이 해줌

//window.location='/index.html'
}).fail(function(response){
  console.log(response)
});
}
  </script>
</html>

<!-- //상대경로 , 절대경로 (/)찾아보기

. 나 자신 
.. 나보다 한단계 위 ^^ -->