Notice

Recent Posts

Recent Comments

Link

« 2025/10 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Engineering Note

Web-Backend 2 본문

Server/Flask

Web-Backend 2

Software Engineer Kim 2021. 7. 18. 01:32

Blueprint

API들을 분류/관리 하는 기능
API를 기능 별로 따로 파이썬 파일을 만들어서 Blueprint 객체를 만들어주고 urp 등록을 객체.route로 해준다. 그리고 app.py에 import를 해주고 register.blueprint로 등록을 해주면 파일로 분류된 api를 사용할 수 있다.

from flask import Flask,render_template,jsonify,request, redirect

app = Flask(__name__)

# 기능을 모듈화하고 Blueprint를 등록하세요.
user_list=[
    {"name":"elice","password":'1234'},
    {"name":"oliver","password":'1111'},
    {"name":"tony","password":'1257'},
    {"name":"timber","password":'1357'},
]

board_list= []

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

@app.route("/register" ,methods=["GET"])
def regist_page():
    return render_template("register.html")



@app.route("/login", methods=["GET"])
def login_page():
    return render_template("login.html")


@app.route("/register", methods=["POST"])
def register_service():
    id = request.form['username']
    pw = request.form['password']

    user = {'name':id,'password':pw}
    user_list.append(user)
    return redirect("/")

@app.route("/board" ,methods=["POST"])
def resgist_service():
    name = request.form['usernmae']
    content = request.form['content']
    data = {'name':name,'content':content}
    board_list.append(data)

    return redirect("/board")

@app.route("/board/<id>")
def edit_board(id):
    content=request.form['content']
    board_list[id+1]['content'] = content
    return redirect("/board")

@app.route("/login", methods=["POST"])
def login_service():
    id = request.form['username']
    pw = request.form['password']

    for user in user_list:
        if user['name'] == id and user['password'] == pw:
            return jsonify("유저 로그인!")

    return jsonify("로그인 실패!")

if __name__ == '__main__':
    app.run(debug=True)

위처럼 길었던 api 코드를 분류해서 아래처럼 사용

Jinja2

서버에서 받아온 데이터를 효과적으로 보여주고 비교적 간략한 표현으로 데이터를 가공할 수 있습니다.
html 파일에서 파이썬 문법을 사용하도록 해줌
html 에서 데이터를 출력하기 위해서 서버로 부터 전달 받은 변수명을 중괄호 두개 사이에 넣어 주면된다. {{ 변수명 }}

클라이언트 코드

    <h2>과일 작성하기</h2>
    <form action="/" method="POST">
        <p>
            <input name='fruit'>
        </p>
        <button type="submit">제출</button>
    </form>
    <hr>

POST 방식으로 클라이언트에서 서버로 전송을 해주면 fuit이라는 곳에 담겨서 온 데이터를 request.form으로 받아서 input_fruit 변수에 저장해준다. 그리고 이 데이터를 fruit_list라는 리스트 변수에 다시 저장해주고 redirect로 다시 원하는 url로 return
서버코드

def home():
    if request.method == 'POST':
        input_fruit = request.form['fruit']
        # 입력받은 과일을 fruit_list에 저장하세요.
        fruit_list.append(input_fruit)

        return redirect('/')

    # 과일 리스트를 매개변수로 넘겨주세요.
    return render_template("index.html", data = fruit_list)

이렇게 입력 받은 데이터를 render_template로 클라이언트로 전송해주면 Jinjatemplate으로 데이터를 한번에 출력하거나 반복문을 이용해서 출력해주면된다.

    <h5>한 번에 출력하기</h5>
    <p>
    <!-- 과일 리스트를 한 번에 출력하세요. -->
    {{data}}
    </p>
    <hr>

    <h5>한 개씩 출력하기</h5>
    <!-- 과일 리스트를 한 개씩 출력하세요. -->
    {% for fruit in data %}
       <p> {{fruit}} </p>
    {% endfor %}

서버 전체코드

from flask import Flask, render_template, request, redirect

app = Flask(__name__)

fruit_list = ['수박']


@app.route("/", methods=["GET", "POST"])
def home():
    if request.method == 'POST':
        input_fruit = request.form['fruit']
        # 입력받은 과일을 fruit_list에 저장하세요.
        fruit_list.append(input_fruit)

        return redirect('/')

    # 과일 리스트를 매개변수로 넘겨주세요.
    return render_template("index.html", data = fruit_list)


if __name__ == "__main__":
    app.run(debug=True)

클라이언트 전체 코드

<!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">
    <title>JINJA Practice</title>
</head>

<body>
    <h2>과일 작성하기</h2>
    <form action="/" method="POST">
        <p>
            <input name='fruit'>
        </p>
        <button type="submit">제출</button>
    </form>
    <hr>

    <h5>한 번에 출력하기</h5>
    <p>
    <!-- 과일 리스트를 한 번에 출력하세요. -->
    {{data}}
    </p>
    <hr>

    <h5>한 개씩 출력하기</h5>
    <!-- 과일 리스트를 한 개씩 출력하세요. -->
    {% for fruit in data %}
       <p> {{fruit}} </p>
    {% endfor %}
</body>

</html>