항해99 2일차

오전에는 미니프로젝트를 위한 강의를 이어듣고 

내가 맡은 메인 페이지의 기능구현과 css를 이용한 웹페이지 꾸미기 까지 만들었다.

메인페이지

메인 페이지 기능 구현

 

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

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

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

2. 이때 url과 카페이름이 빈칸이면 입력하시오 라는 알람이뜬다.

3.입력한 url과 카페이름을 받아 서버로 전송한다.

(마지막의 else를 넣지않아 입력하시오라는 알람과 함께 바로 저장되었던것을 수정했다.

아직 익숙하지않아 미흡하게 수정했었다.)

function post() {

        let url = $("#url").val();

        let name = $("#name").val();

        if (url == ""){

          alert('http:// 넣어서 url을 입력해주세요')

        } else if (name == "") {

          alert('카페이름을 입력해주세요')

        } else {

        $.ajax({

          type: "POST",

          url: "/cafe",

          data: { url_give: url, name_give: name },

          success: function (response) {

            alert(response["msg"]);

            window.location.reload()

           },

          });

       }

      }

그후 몽고 db에 저장한다.(저장할때 각 각 개별적인 번호를 매겨준다.

 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을 한다

    doc = {

        'id' : count,

        'content' : "",

        'url': url_receive,

        'name': name_receive

    }

    db.cafes1.insert_one(doc)

    return jsonify({'msg': '저장완료'})

 

저장을 완료하고 저장된 정보들을 불러와서

@app.route("/cafes", methods=["GET"])

def cafes_get():

    cafes = list(db.cafes1.find({}, {'_id': False}))

    return jsonify({'cafes': cafes})

cafe-list 박스에 붙혀 넣는다

$.ajax({

          type: "GET",

          url: "/cafes",

          data: {},

          success: function (response) {

            let rows = response["cafes"];

            for (let i = 0; i < rows.length; i++) {

              // let num = rows[i]['num']

              let name = rows[i]["name"];

              let url = rows[i]["url"];

              let temp_html = `

                                        <a href="detail/1">

                                    <div class="card" style="width: 18rem;">

                                      <img class="card-img-top" src="${url}" alt="Card image cap">

                                      </a>

                                      <div class="card-body">

                                        <p style="font-size: 30px;"class="card-text">${name}</p>

                                      </div>

                                    </div>`;

              $("#cafe-list").append(temp_html);

            }

          },

        });

그리고 붙혀넣은 카페 정보 카드의 사진을 누르면 각각 개별페이지로 이동한다.

이렇게 구성을 했고 리스트를 서치하는거도 만들어 볼 예정이다.