본문 바로가기
TIL

[23.05.14.]웹개발종합반 4주차

by heediv 2023. 5. 14.
반응형

백엔드 과정

4주차 서버만들기

라이브러리와 같은 프레임워크를 이용할 것(Flask 프레임워크)

1. 원하는 폴더로 이동하기

2. app.py 파일 만들기

3. 터미널을 켠다

4. 가상환경을 잡는다.(맥은 python 뒤에 3을 붙여야함)

python -m venv venv 

가상환경: 프로젝트별로 라이브러리를 담아두는 통

venv라는 폴더가 생긴것 확인

오른쪽 밑에 3.8.6누르고 3.8.6venv 클릭

터미널 X하고 다시 켬

(venv)나오는것 확인

5. 가상환경에 Flask라이브러리 담기

pip install flask

6. Flask 시작코드

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)

 

보충) hello.py써도 상관없지만 통상적으로 flask 프레임워크 사용할때 가장 기본이되는 python파일이름을 app.py라고 붙여줌

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is my Home!'

@app.route('/mypage')
def mypage():
   return '<button>버튼입니다.</button>'

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)

 

7. 웹주소창에 localhost:5000입력  (localhost:5000/mypage)

 

*프론트엔드와 백엔드 연결하기

1. 새폴더 templates만들고 index.html파일만들기

2.render_template

from flask import Flask, render_template
app = Flask(__name__)
 
@app.route('/mypage')
def mypage():
   return render_template('index.html')

5강. Flask시작하기 - 본격 API 만들기

1)Get 요청 : 통상적으로 데이터 조회요청할때 사용, 데이터를 안건드릴때

2)Post 요청 : 통상적으로 데이터 생성.변경.삭제 요청할때 사용, 데이터를 조작할 때

 

*Get 요청

app.py

from flask import Flask, render_template,  request, jsonify
app = Flask(__name__)

@app.route('/')
def home():
   return render_template('index.html')

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script>
      function hey() {
        fetch("/test").then((res) => res.json()).then((data) => {
            console.log(data);
          });
      }
    </script>
  </head>
  <body>
    <h1>제목을 입력합니다</h1>
    <button onclick="hey()">나는 버튼!</button>
  </body>
</html>

저장 후 localhost:5000 웹에서 나는버튼 누르고 콘솔확인하면 {'result':'success', 'msg': '이 요청은 GET!'}

이 내용이 뜸

 

*POST요청

app.py

from flask import Flask, render_template,  request, jsonify
app = Flask(__name__)

@app.route('/')
def home():
   return render_template('index.html')

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script>
      function hey() {
        let formData = new FormData();
        formData.append("title_give", "블랙팬서");

        fetch("/test", { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
            console.log(data);
          });
      }
    </script>
  </head>
  <body>
    <h1>제목을 입력합니다</h1>
    <button onclick="hey()">나는 버튼!</button>
  </body>
</html>

Ctrl + C

서버 종료

 

6~9강.[화성땅 공동구매] 미니프로젝트

새폴더 열기(02.mars)

app.py만들기

python -m venv venv

venv 폴더 확인

인터프리터 선택 3.8.6(venv)

templates폴더만들기 그 안에 index.html파일만들기

다시 app.py로 와서 pip install flask 설치

pip install pymongo 설치 - 데이터 쏘고 저장할 곳으로 DB 연결까지 한방에 시켜볼것 (라이브러리중 pymongo와 dnspython도 있다)

pip install dnspython

 

보충) 터미널에서 clear 입력시 입력했던것 지워짐

 

app.py 기본구조

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

@app.route("/mars", methods=["POST"])
def mars_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg':'POST 연결 완료!'})

@app.route("/mars", methods=["GET"])
def mars_get():
    return jsonify({'msg':'GET 연결 완료!'})

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

 

index.html 기본구조

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <link href=" https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap " rel="stylesheet" />

    <title>선착순 공동구매</title>

    <style>
        * {
            font-family: "Gowun Batang", serif;
            color: white;
        }

        body {
            background-image: linear-gradient(0deg,
                    rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)),
                url("https://cdn.aitimes.com/news/photo/202010/132592_129694_3139.jpg");
            background-position: center;
            background-size: cover;
        }

        h1 {
            font-weight: bold;
        }

        .order {
            width: 500px;
            margin: 60px auto 0px auto;
            padding-bottom: 60px;
        }

        .mybtn {
            width: 100%;
        }

        .order>table {
            margin: 40px 0;
            font-size: 18px;
        }

        option {
            color: black;
        }
    </style>
    <script>
        $(document).ready(function () {
            show_order();
        });
        function show_order() {
            fetch('/mars').then((res) => res.json()).then((data) => {
                console.log(data)
                alert(data['msg'])
            })
        }
        function save_order() {
            let formData = new FormData();
            formData.append("sample_give", "샘플데이터");

            fetch('/mars', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
                console.log(data);
                alert(data["msg"]);
            });
        }
    </script>
</head>

<body>
    <div class="mask"></div>
    <div class="order">
        <h1>화성에 땅 사놓기!</h1>
        <h3>가격: 평 당 500원</h3>
        <p>
            화성에 땅을 사둘 수 있다고?<br />
            앞으로 백년 간 오지 않을 기회. 화성에서 즐기는 노후!
        </p>
        <div class="order-info">
            <div class="input-group mb-3">
                <span class="input-group-text">이름</span>
                <input id="name" type="text" class="form-control" />
            </div>
            <div class="input-group mb-3">
                <span class="input-group-text">주소</span>
                <input id="address" type="text" class="form-control" />
            </div>
            <div class="input-group mb-3">
                <label class="input-group-text" for="size">평수</label>
                <select class="form-select" id="size">
                    <option selected>-- 주문 평수 --</option>
                    <option value="10평">10평</option>
                    <option value="20평">20평</option>
                    <option value="30평">30평</option>
                    <option value="40평">40평</option>
                    <option value="50평">50평</option>
                </select>
            </div>
            <button onclick="save_order()" type="button" class="btn btn-warning mybtn">
                주문하기
            </button>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">이름</th>
                    <th scope="col">주소</th>
                    <th scope="col">평수</th>
                </tr>
            </thead>
            <tbody id="order-box">
                <tr>
                    <td>홍길동</td>
                    <td>서울시 용산구</td>
                    <td>20평</td>
                </tr>
                <tr>
                    <td>임꺽정</td>
                    <td>부산시 동구</td>
                    <td>10평</td>
                </tr>
                <tr>
                    <td>세종대왕</td>
                    <td>세종시 대왕구</td>
                    <td>30평</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

 

mongoDB Atlas주소

https://cloud.mongodb.com/

 

MongoDB Cloud

MongoDB Cloud is a unified data platform for modern applications and includes a global cloud database, search, data lake, mobile, and application services.

www.mongodb.com

 

저장하는 것과 불러오는것이 있으면 저장하는것 먼저하기!

 

POST 연습( 주문 저장하기 )

클라이언트와 서버연결 확인하기, 잘작동하는지 확인

서버만들기- 서버는 이름 주소 평수를 받아서 DB에 넣어주면돼

클라이언트만들기

 

모두 만들고 실행결과 오류가 났다

    from Flask import Flask, render_template, request, jsonify
ModuleNotFoundError: No module named 'Flask'

 

3.8.6(venv) 인터프리터 선택을 다시 하고 실행하였더니

 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:5000
 * Running on http://172.30.1.36:5000
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 핀번호

 

그리고  syntax오류까지 있었다.

        function save_order() {
            let name = ${'#name'}.val()
            let address = ${'#address'}.val()
            let size = ${'#size'}.val()

중괄호{}가 아닌 ()를 썼어야 했다...

위의 에러는 이 주소로 들어가야 실행이 되었다. http://127.0.0.1:5000

 

 

데이터를 입력했을때 refresh가 되었으면 좋겠다.

            fetch('/mars', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
                alert(data["msg"]);
                window.location.reload()
            });

위 코드중 window.location.reload() 를 이용할 경우 refresh가 된다.

 

9강. GET 연습(주문보여주기)

서버만들기-갖고있는 data를 다 내려다 주는것이 서버

DB에서 여러개 찾기로 가져온다

 

DB에 저장하는것 까지 되었으나 불러오는데 또다시 막히는것이 있었다...

계속된 오류로 계획한 곳까지 하지못하였다... 

조금더 시간을 넉넉하게 잡고 계획을 짜야할듯 싶다.

참고로 mongoDB 사용할때마다 인증서 설치를 다시해야한다.

 

 

 

오늘의 회고

 

내일은 본캠프 시작인데 틈틈이 남은 4주차와 5주차 강의를 들어야할 것 같다.

그리고 조만간 모니터와 키보드를 따로 구비해야할것 같다. 노트북으로 강의와 코딩을 함께하려니 여간 답답한게 아니다. 

그럼이만 내일 오전 9시부터 오후 9시까지 본캠프 진행을 위해서 하루를 정리해야겠다.

 

 

 

반응형

'TIL' 카테고리의 다른 글

TIL[23.05.16.]내일배움캠프 1주차 -2일  (0) 2023.05.16
TIL[23.05.15.]내일배움캠프 1주차-1일  (0) 2023.05.15
TIL[23.05.12.]웹개발종합반 3주차  (1) 2023.05.12
TIL[23.05.11.]웹개발종합반 3주차  (0) 2023.05.11
TIL[23.05.11]웹개발종합반 2주차 후반  (0) 2023.05.11

관련글

티스토리툴바