[웹개발스터디그룹] 기본 코드와 기본 설치 모듈 정리(Python, Flask)

코딩공부

by 취미부자 직장인 고라니 2021. 6. 16. 01:15

안녕하세요

오늘은 파이썬과 플라스크로 웹개발을 하기 위해 필요한

기초 코드들과 개발을 위해 기본적으로 설치할 모듈을 정리하는 시간을 가져볼 생각입니다

기본적으로는 스파르타코딩클럽에서 배웠던 것을 기초로 하고

제가 작업하는 방식대로 프리셋을 만들어둔다는 개념일 것 같습니다

1. 플라스크 기본 파일 구조 세팅

(api/)
static/
templates/index.html
venv/
app.py

저는 API를 활용하는 프로젝트를 작업할 때는 api라는 폴더를 별도로 두고

api마다 python파일을 개별 생성하여 각각 함수로 만들어두고

app.py 에서 api 콜을 하는 식으로 작업을 하는데요

app.py 에서는 라우팅을 주로 하고 최소한의 코딩을 하게 하기 위함입니다

그리고 static이나 templates 폴더는 플라스크로 웹개발을 하기 위한 필수 폴더로 생성합니다

2. html 기본 코드

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>제목을 입력하세요</title>
    <script>
    	
        $(document).ready(function () {
        	show_db()
        })
        
    	function show_db() {
            $.ajax({
                type: "GET",
                url: "/db",
                data: {},
                success: function (response) {
                    let db_data = response['all_data']
                }
            })
        }
        
    	function save_db() {
            let title = $('#title').val()
            let content = $("#content").val()
            
            $.ajax({
                type: "POST",
                url: "/db",
                data: {
                	'title_give': title,
                    'content_give': content
                },
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }
    </script>
</head>

<body>
<div class="wrap">

</div>
</body>

</html>

프런트앤드에서 다루기 위한 jquery와 부트스트랩을 불러오고

기본적으로 서버에 POST와 GET요청을 하기 위한 기본 ajax 코드로 구성한 default html 코드입니다.

3. app.py

from flask import Flask, render_template, jsonify, request

app = Flask(__name__)

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.projectname


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

@app.route('/db', methods=['GET'])
def show_db():
    data = list(db.table.find({}, {'_id': False}))
    return jsonify({'all_data': data})

@app.route('/db', methods=['POST'])
def save_db():
    title_receive = request.form['title_give']
    content_receive = request.form['content_give']
    
    doc = {
        'title':title_receive,
        'content':content_receive
    }

    db.table.insert_one(doc)

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

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

app.py는 db를 다루기 위해서 일단 pymongo를 개발환경으로 세팅하고

db에 저장하기 위한 POST 요청에 대한 라우팅

그리고 db에 있는 내용을 전달하기 위한 GET 요청에 대한 라우팅을 기본적으로 담고 있습니다

4. 기본 설치 모듈

flask
pymongo

이상 오늘은 웹개발스터디그룹 운영을 위한 파이썬과 플라스크 기본 코드와 필수 모듈을 정리해봤습니다

이것은 약간 프로젝트 시작을 위한 루틴을 만드는 과정 같은 것이었는데요

한 번은 필요한 작업이었기에 웹개발스터디그룹을 수행함에 앞서서 내용을 정리했습니다

저작자표시

'코딩공부' 카테고리의 다른 글

[Jupyter] 파이참(pycharm)에서 Jupyter notebook 실행하기 (0)	2022.04.27
Pycharm에서 Github 사용하기(1) (0)	2021.07.22
(번외) 티스토리 블로그 폰트 글씨체 바꾸는 방법 (4)	2021.06.04
패스트캠퍼스 환급반 후기03 - 클론코딩 앱 개발 입문 1주차 (복습으로 달라진 생각) (1)	2021.05.30
초간단 WebStorm에서 모듈 설치하기(package.json) (0)	2021.05.28