내일배움캠프 3일차

튜터님의 조언으로 쿼리스트링의 기본 사용을 배웠다.

 

@app.route('/members')
def member():
    name = request.args.get('id')
    print(name)
    
    return render_template('member.html')

value = request.args.get('key') 형식으로 fetch의 함수인 듯하다.

위의 코드는 예를 들어 주소창에 id = 1을 입력하면 터미널에서 1을 출력하는 코드다.

 

다음 코드를 사용해 쿼리스트링으로 페이지를 불러올 수 있다.

@app.route('/members')
def member():
    name = request.args.get('name')

    if name == '해인':
        return render_template('member.html')
    elif name == '정은':
        return render_template('member.html')
    elif name == '태훈':
        return render_template('member.html')
    elif name == '지상':
        return render_template('member.html')
    elif name == '형수':
        return render_template('member.html')

name은 추후 id로 바뀔 수 있다.

 

카드에 링크를 주어 페이지를 불러오려면 아래와 같이 하면 되는 듯하다.

<a href = "/주소?키=값">

 

쿼리스트링으로 페이지로 이동하는 방법은 알았지만 페이지에 DB 정보를 넣은 방법은 아직 모르겠다. 

팀원분이 불러온 값을 html에 반영하는 코드를 작성해 주셨다.

fetch("/getmember", { method: "POST", body: formData })
          .then((res) => res.json())
          .then((data) => {
            let rows = data["result"];

            console.log(rows);
            var count = 0;
            if (rows != undefined && rows != "") {
              $("#member_name").empty();
              $("#member_mbti").empty();
              $("#member_selfintro").empty();
              $("#member_mystyle").empty();
              $("#member_blog").empty();
              // 불러온 값 반영
              $("#member_name").text(rows["name"]);
              $("#member_mbti").text(rows["mbti"]);
              $("#member_selfintro").text(rows["selfintro"]);
              $("#member_mystyle").text(rows["mystyle"]);
              $("#member_blog").text(rows["blog"]);
              $("#member_image").attr("src", rows["image"]);
            }
          });
      }

 

오늘은 웹페이지의 마진 간격 정도의 간단한 css만 수정을 했다.

자기소개가 그리 길지 않을 것 같아서 그럴 경우에 좀 더 보기 좋도록 글자 범위를 줄였다.

.member {
        width: 50%;
      }

그 외에 헤더 이미지를 메인 페이지와 통일하고 사이즈를 약간 조정했다. 

 

메모

• 튜터님께서 알려주신 웹페이지와 DB 구성 로직

프론트에서 개별 정보에 대한 목록 표시 ->클릭하면 개별 정보에 있는 id가 백엔드에 전달 -> DB 조회

• 내일 해야 할 일 

MBTI, 블로그 주소 부분 CSS 수정하기