항해 99 3일차 09/21일

APP.PY 어제의 서버 코드 수정

url_receive = request.form['url_give']     name_receive = request.form['name_give']     counts = list(db.cafes1.find({}, {'_id': False})) //디비에 저장된 데이터를 불러와서 counts라는 변수에 넣어준다.     count = len(counts) + 1 //counts라는 변수에 + 1을 한다. //데이터베이스의 저장된 길이에 +1해준다     doc = {         'id' : count,         'content' : "",         'url': url_receive,         'name': name_receive   }     db.cafes1.insert_one(doc)     return jsonify({'msg': '저장완료'})

이 코드에서 카운트의 갯수가 데이터 베이스 길이에 +1을 해줬었는데 기존에 저장된 데이터를 지우게 되면 숫자가 중복이 되는 문제점을 발견했다

url_receive = request.form['url_give']
name_receive = request.form['name_give']
address_receive = request.form['address_give']
content_receive = request.form['content_give']
counts = list(db.cafes1.find({}, {'_id': False}))
i = randint(1,100)
count = len(counts) + i
doc = {
    'id' : count,
    'content' : content_receive,
    'address' : address_receive,
    'url': url_receive,
    'name': name_receive
}
db.cafes1.insert_one(doc)
return jsonify({'msg': '저장완료'})

그래서 i라는 변수에 디비에 저장된 목록의 길이를 구하고  1~100지의 랜덤 숫자를 더해서 id를 만들었다(최대한 중복 방지)

-반복문을 사용하면 중복제거를 할수있는데 문법이 익숙하지 않아서 사용을 못하였다.(연습하기)

HTML

로그인 버튼을 누르면 로그인 페이지로 이동한다.( onclick 으로 구현 폴더안에 html 로 이동한다.)

조인버튼을 누르면 회원가입 페이지로 이동한다. ( onclick 으로 구현 폴더안에 html 로 이동한다.)

1.url 를 입력하고 카페이름 주소, 소개를 입력한후 기록하기 버튼을 누른다.

2. 이때 각 항목이 빈칸이면 입력하시오 라는 알람이뜬다.

3.입력한 정보를 받아 서버로 전송한다.

function post() {
  let url = $("#url").val();
  let name = $("#name").val();
  let address = $("#address").val();
  let content = $("#content").val();
  if (url == "") {
    alert("url을 입력해주세요");
    return;
  }
  if (name == "") {
    alert("카페이름을 입력해주세요");
    return;
  }
  if (address == "") {
    alert("카페 주소를 입력해주세요");
    return;
  }
  if (content == "") {
    alert("카페 소개를 적어주세요");
    return;
  } else {
    $.ajax({
      type: "POST",
      url: "/cafe",
      data: {
        url_give: url,
        name_give: name,
        address_give: address,
        content_give: content,
      },
      success: function (response) {
        alert(response["msg"]);
        window.location.reload();
      },
    });
  }
}

 

로그인 회원가입 로그아웃 버튼 구현

               -기능설명-

로그인을 했는지 안했는지 확인한다.(로그인을 하면 각 암호화된 토큰 정보가 있는데 그정보를 불러와야한다)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

(위 코드는 쿠키를 사용할때 쓰는 코드)

 

document(브라우저가 불러온 웹 페이지를 나타낸다.)를 사용하여 웹페이지를 불러오면 function을 사용 하여

show_sign를 활성화 시킨다.

cookie 라는 변수에 불러온 토큰을 넣는다.

if 문 사용

cookie 값이 있으면 login,join 버튼은 사라지고 logout 버튼이 보인다.

cookie 값이 없으면 logout 버튼은 사라지고 login,join 버튼이 보인다

 

$(document).ready(function () {
  show_sign();
});
let cookie = $.cookie("mytoken");
function show_sign() {
  if (cookie) {
    $("#login").hide();
    $("#join").hide();
  } else {
    $("#logout").hide();
  }
}

 

login,join,logout 버튼 코드

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a id="login" onclick="login()" class="nav-link active">login</a>
  </li>
  <li class="nav-item">
    <a id="join" onclick="join()" class="nav-link">join</a>
  </li>
  <li class="nav-item">
    <a id="logout" onclick="logout()" class="nav-link hidden">logout</a>
  </li>
</ul>

로그아웃시 cookie를 삭제하고 메인 페이지로 이동

function logout() {
  $.removeCookie("mytoken");
  window.location.href = "/";
}

최종화면

로그인을 해야하는 상태