20220330 Back-End

학습한 내용

Flask

Python의 마이크로(micro) 웹 프레임워크

기본형

# Flask 기본형
# from flask import Flask

# app = Flask(__name__)

# @app.route("/")
# def hello_world():
#     return "<p>Hello, World!</p>"

# app.run()

실행결과

random으로 숫자 출력하기

from flask import Flask
import random

app = Flask(__name__)

@app.route("/")
def hello_world():
  return "<strong>random</strong> : " + str(random.random())

app.run()

실행결과

create, update 결과 생성하기

python
from flask import Flask

app = Flask(__name__)

@app.route("/")
def index():
	return "Home"

@app.route("/create/")
def create():
 	return "Create"

@app.route("/update/")
def update():
	return "Update"

app.run()

WEB에 적용해보기

from flask import Flask

app = Flask(__name__)

# 기존 WEB html 코드 적용
@app.route("/")
def index():
    return '''
    <html>
        <body>
        <h1><a href="/">WEB</a></h1>
        <ol>
            <li><a href="1.html">html</a></li>
            <li><a href="2.html">css</a></li>
            <li><a href="3.html">js</a></li>
        </ol>
        <h2>Welcome</h2>
        Hello, WEB!
        </body>
    </html>
    '''
@app.route("/read/1/")
def read1():
    return f"""
    <html>
        <body>
        <h1><a href="/">WEB</a></h1>
        <ol>
            <li><a href = "/read/1">html</a></li>
            <li><a href = "/read/2">css</a></li>
            <li><a href = "/read/3">js</a></li>
        </ol>
        <h2>Read</h2>
        Hello, Read!
        </body>
    </html>
    """

app.run()

실행결과

이렇게 하면 "/read/2/", "/read/3" route를 더 만들어야 하므로 비효율적이다.

dictionary와 for문을 활용한 flask

from flask import Flask

app = Flask(__name__)

# topics list에 id, title, body 값을 딕셔너리로 입력
topics = [
    {"id":1, "title":"html", "body":"html is ...."},
    {"id":2, "title":"css", "body":"css is ...."},
    {"id":3, "title":"js", "body":"js is ...."}
  ]

# template 함수 선언
def template(content):
    liTags = ''	# 빈 문자열
    for topic in topics:
      # liTags에 topics의 value값 담기
      liTags = liTags + f'<li><a href="/read/{topic["id"]}/">{topic["title"]}</a></li>'
    # html형태로 결과값 출력
    return f'''
    <html>
      <body>
        <h1><a href="/">WEB</a></h1>
        <ol>
          {liTags}
        </ol>
        {content}
        <ul>
          <li><a href="/create/">create</a></li>
        </ul>
      </body>
    </html>
  '''

@app.route("/")
def index():
	# template 함수에 '<h2>Welcome</h2>Hello, WEB!'넣음. 
    # WEB을 클릭하면 'Welcome Hello, WEB!' 문구가 뜸.
	return template('<h2>Welcome</h2>Hello, WEB!')

실행결과

@app.route("/read/1/") 부분

# id변수를 int형식으로 입력 / 변수 값 전달 받을 때, default : string type
@app.route("/read/<int:id>/") 
def read(id):	# 'id' default : str
    title = ''
    body = ''  
    for topic in topics :
      # topic['id']의 값이 id와 같으면
      if topic['id'] == id:
          # title에 topic['title'] value값 넣기
          title = topic['title']
          # body에 topic['body'] value값 넣기
          body = topic['body']
          break;
    # template 함수에 f'<h2>{title}</h2>{body}'입력
    return template(f'<h2>{title}</h2>{body}')

실행결과

@app.route("/create/") 부분

# /create/ 페이지를 만들어 title과 body 값을 입력할 수 있게 함.
@app.route('/create/')
def create():
    content = '''
      <form action="/create/">
        <p><input type="text" name="title" placeholder="title"></p>
        <p><textarea name="body" placeholder="body"></textarea></p>
        <p><input type="submit" value="create"></p>
      </form>
    '''
    return template(content)

실행결과

@app.route('/update/')
def update():
  return 'Update'

app.run()

학습내용 중 어려웠던 점

Flask의 개념이 조금 어려웠다.
create를 클릭했을 때 입력하는 칸을 만드는 부분이 어려웠다.

해결방법

# "/create/" code
@app.route('/create/')
def create():
  content = '''		#-> content 변수
    <form action="/create/">   #-> action 생성
      <p><input type="text" name="title" placeholder="title"></p>  #-> "title" 입력하는 칸 생성
      <p><textarea name="body" placeholder="body"></textarea></p>  #-> "body" 입력하는 칸 생성
      <p><input type="submit" value="create"></p>  #-> "create"로 제출하는 버튼 생성
    </form>
  '''
  return template(content)

학습소감

Python으로 back-end 해보는 경험을 할 수 있었다.

참고

https://flask.palletsprojects.com/en/2.1.x/quickstart/

https://glitch.com/

Author And Source

이 문제에 관하여(20220330 Back-End), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ujamong/20220330-Back-End

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)