life is egg

22.12.08 [갑분 HTML] 본문

TIL

22.12.08 [갑분 HTML]

삶은계란진재혁 2022. 12. 9. 01:27

아 ~ 개고생 중이다

 

진짜 쓰기 싫지만 배운게 있기는 하니까 쓴다...

 

ajax 날릴때 json으로 날리자나 그때 변수명이랑 내가 백엔드 서버에서 받는 변수명이 일치해야해

 

안되면 오류는 안뜨는데 null값이 나와 @cloum  null값 허용 x하면 오류뜨고

 

그리고 이건... 테이블 형식으로 붙이기..!

와 진짜 여기까지 오는데 왜케 힘든지 모르겟어 ...  무튼 했다는거 .. 그것이 중요하단거..! 마지막에 팀원분의 도움이 컸다

 function getMessages() {
        // 1. 기존 메모 내용을 지웁니다.
        $('#cards-box').empty();

        // 2. 메모 목록을 불러와서 HTML로 붙입니다.
        $.ajax({
            type: "GET",
            url: "/api/memos",
            data: {},
            success: function (response) {
                for (let i = 0; i < response.length; i++) {
                    let message = response[i];
                    let id = message['id'];
                    let username = message['username'];
                    let title = message['title'];
                    let modifiedAt = message['modifiedAt'];
                    addHTML(id, username, title, modifiedAt);
                }
            }
        });
    }


    // 메모 하나를 HTML로 만들어서 body 태그 내 원하는 곳에 붙입니다.
    function addHTML(id, username, title, modifiedAt) {
        let tempHtml = makeMessage(id, username, title, modifiedAt);
        $('#cards-box').append(tempHtml);
    }

    function makeMessage(id, username, title, modifiedAt) {
        return `
                    <!-- date/username 영역 -->

        <tr>
            <th>${id}</th>
            <th>${title}</th>
            <th>${username}</th>
            <th>${modifiedAt}</th>
</tr>

             <!-- contents 조회/수정 영역-->

                    <!-- 버튼 영역>-->`;
    }

여기서 중요한 부분은 저기 `` 키사이에 어펜드 하는부분

 

저렇게 만들어야지 일단 테이블형식처럼 들어간다 이걸 부트스트랩이 적용된 바디에 알맞게 달아주면 된다

요렇게!!!~~   id="card-box" 부분에 슈슈슉 붙여진다 ~

<body>
<div class="background-header">

</div>
<div class="background-body">

</div>
<div class="wrap">
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
    <div class="container my-3">
        <table class="table">
            <thead class="table-dark">
            <tr>
                <th>번호</th>
                <th>제목</th>
                <th>작성자</th>
                <th>작성일시</th>

    </tr>

    </thead>
            <tbody id="cards-box"></tbody>

</table>

    </div>
</div>

</body>

 

 

긍정적인 마음으로....

 

어차피 알아야하는 부분  삽질하면서 잘 알았다고 하자자자자ㅏ자자자자자!

 

 

그리고 이건 어디 내놓기 부끄러운 작고 초라한 글쓰는칸 ... 난 디자니어 지망생이 아니니까.. 만족한다구....

 

 

쉽게생각했던 제목클릭하면 해당하는 내용나오는게 생각보다 잘안된다

 

내생각은 제목 append붙일때  아이디별로 a태그 url로 달고

 

컨트롤러에 그 url요청에 대한 겟매핑 메소드 + 패스배리어블(id) 이렇게해서 HTML인덱스 반환해주고

그 HTML인덱스에 ajax응답에 각각 값들 뽑아서 만들면 될 줄알았는데 안된다 ~~~~~~~~~~~~~인덱스 연결이 안된다

뭔가 다른 방법이 있는건가....아니 근데 다른데 찾아봐도 사용하는 툴이 다르니까 답답하구만

이것만하면 숭풍숭풍 잘될거같은데.....비번일치여부는 ...아직 잘 모르겠굽...

 

 

'TIL' 카테고리의 다른 글

22.12.12 [DDD+AOP 찍먹..]  (0) 2022.12.12
22.12.09 [~.~]  (0) 2022.12.09
22.12.07 [알수없는]  (0) 2022.12.07
22.12.06 [MVC]  (0) 2022.12.06
22.12.05 [Spring 입문-SQL]  (2) 2022.12.06
'TIL' Related Articles more
Comments