이미지 썸네일 삭제
[Flask 입문] 플라스크로 웹 프로그래밍 입문하기
이번 포스팅을 시작으로 필자는 파이썬의 웹 개발 프레임워크인 Flask에 대해 공부한 내용을 정리해볼까 ...
blog.naver.com
플라스크는 파이썬으로 작성된 웹 개발 도구로 마이크로 프레임워크라고도 부른다.
그 이유는 플라스크로 웹 개발을 하는 데에 특별한 도구나 라이브러리가 전혀 필요 없기 때문에
플라스크는 파이썬을 알고 있다면 매우 배우기 쉽고,
짧은 시간 안에 웹 어플리케이션 하나를 뚝딱 만들어낼 수 있다.
물론 너무나 간단하다 보니,
보다 복잡한 기능의 구축에 있어선 다른 프레임워크에 비해 효율이 떨어졌지만 꾸준히 업데이트가 되고 있어 큰 걱정은 필요 없다.
데이터 수집
- 정형화 데이터 -> oracle(RDBMS)로 갈 수 있음
- 비정형화 데이터 -> NoSQL 기반 SQL제품이 필요하다. (대표적인 제품 : MongoDB)
* 이것을 일명 infra(인프라) 라고 한다. (이걸 쉽게 해주는 것이 AWS)
- AWS 사용량에 따라 요금 책정
- AWS 는 public 공간과 private 공간으로 나뉘어진다.( private 은 외부에서 접속 불가능(기업전용))
-> 리눅스 기반 서버(서버용 리눅스)가 구축되어있어야 한다.(기본적으로 4개 서버가 존재해야 한다.) -(Master 1개 , Slave 3개)
-> 해당 서버 밑에 storage 가 있어야 한다.(slave 하나당 3개씩 storage 필요)
-> 이러한 시스템이 구축되어 있어야 데이터 처리가능
--> 이러한 시스템을 구축하기 위해선 Hadoop 프레임워크 필요
*포트폴리오 주제 잡을 때
1) 지원 분야 - FRONT(JSP, Servlet, DB SQL 등 기초를 모두 알아야 한다.),
Publisher(HTML, CSS, JS등을 다룬다.)
BACKEND(관리자 화면(HTML, 결제, 환불 등 내부코드))
+ SERVER 관리(구직 사이트에 올라오는 Server 관리자는 보통 백엔드를 칭함)
* 자기소개서 : 회사 홈페이지(대표이름을 찾아서 기사를 검색, 최신정보를 확인하고 자기소개서를 믹싱) - ex) 강연 등의 기사정보를 언급
- 면접을 모두 참여하여 질문에 대한 족보를 만들어야한다. -> 가고싶은 회사의 최종면접에 붙어서 합격한 경우
1) IT 관련 회사 & 잡플래닛에 검색하되 믿지 말고 참고만 할 것.
2) 포트폴리오(스크린샷, 제목, 사용한 언어, 프레임워크, 개발기간, 학습기간 명시)
가상환경 구축하기
프로그램을 개발할 때는 항상 독립적인 개발환경을 구축한 뒤, 그 안에서 깔끔하게 작업하는 걸 추천한다. 가상환경을 구축함으로 샌드박스 역할을 하기 때문에 기존 시스템에 설치된 라이브러리는 영향을 주지 않게 된다.
가상환경 구축을 위해 파이썬 패키지인virtualenv를 사용하겠다. 설치는 pip로 해주자.
C:\>md worf_f C:\>cd worf_f C:\worf_f>python -m venv work C:\worf_f>cd work C:\worf_f\work>Scripts\activate (work) C:\worf_f\work>
$ pip install virtualenv
전송중...
사진 설명을 입력하세요.
전송중...
사진 설명을 입력하세요.
전송중...
사진 설명을 입력하세요.
전송중...
사진 설명을 입력하세요.
dir_a*.* : a로 시작하는 모든 파일
dir_test.* : 파일명이 test인 모든 애들
dir_*t*.* : t를 포함하는 모든 것들
dir_*t*.*/s : 서브폴더까지 전부다 찾아달라고 요청
dir_*t*.*/s/p : 서브폴더 / 서브서브폴더 등 페이지를 끊어서 볼 수 있다.
리눅스에서는 ls 가 dir 명령어를 대체한다.
~.bat : 일괄처리 시켜주는 배치파일(batch file)(어떤 명령을 파일 안에 다 담아놓은 것)
-> 우리가 activate 시킨 것은 원래 activate.bat 이다.
type_activate.bat(내가보고싶은 파일명.확장자) 치면 해당 내용을 볼 수 있다.
전송중...
사진 설명을 입력하세요.
Java 가 컴파일 되기 위해 필요한 것은 javac.exe
실행할 때 필요한 것 : java.exe
javac.exe, java.exe를 가지고 있는 폴더명 : bin(binary) ( 환경변수 잡아줄 때 bin 폴더까지 잡는다 - 이 폴더 안에 실행파일 있어서 )
환경변수를 설정하는 이유 : 실행파일들의 위치와 내가 작업하는 폴더의 위치가 다르기 때문에 실행파일이 있는 위치를 잡아놓고자 함(javac, java.exe)
* 환경변수의 종류
1) 사용자용 ( 여기에 걸어두면 자동으로 잡아주지 않는다. )
2) 시스템용(우리가 잡은 용도는 모두 시스템용) - 혼자서 컴퓨터를 사용하고 개발 외에는 사용하지 않기 때문
virtualenv를 설치했다면 다음과 같이 사용하여 해당 이름의 가상환경 폴더를 만들 수 있다.
전송중...
pip install flask 설치
전송중...
사진 설명을 입력하세요.
전송중...
사진 설명을 입력하세요.
전송중...
사진 설명을 입력하세요.
전송중...
실행 화면
전송중...
사진 설명을 입력하세요.
이미지 썸네일 삭제
[Flask 입문] 기본적인 플라스크 사용법
지난번에는 맛보기 용으로 간단하게 코드를 작성하여 웹을 띄워 보았다면, 이번엔 그 코드들이 각각 어떤 ...
blog.naver.com
app = Flask(__name__)
가장 먼저 전역에서 Flask 클래스 객체를 선언하였다.
해당 app 객체를 통해 플라스크를 사용할 수 있게 된다.
__name__의 경우, 해당 코드를 직접 실행시킬 경우, "__main__"이라는 문자열이 들어온다.
@app.route('/')
데코레이터(어노테이션)를 사용하여 hello_world 함수를 wrapping 되었음을 알 수 있다.
이 데코레이터를 통해 웹으로 접근한 사용자가 어떤 URL에 따라 어떤 함수를 실행시켜야 할 지 정해주게 된다.
위의 예제의 경우 '/'(즉, 메인페이지)가 URL 파라미터인 셈이다. ( '/'이 URL 패턴명이다. )
app.run()
app의 run() 메소드를 통하여 Flask 웹 어플리케이션을 실행할 수 있다. (flask 객체가 가지고 있는 run() 어플리케이션으로 실행한다. )
아무런 인자도 넘겨주지 않을 경우,
적당히 포트를 잡고 127.0.0.1 로 실행시키게 된다.
주로 사용하는 인자는 다음과 같다.(기본포트번호)
port ( ex : port = 5000 )
수동적으로 특정 포트 번호를 잡고 싶다면 이걸 사용하자.
host(ex : 0.0.0.0, 127.0.0.1, ...)
해당 웹 서비스로 접근을 허용하는 IP 혹은 Domain을 적을 수 있다. 예를 들어 (127.0.0.1)를 보내면 웹 서버를 실행시킨 해당 PC 외에는 접속이 불가능하지만, 모든 IP를 뜻하는 (0.0.0.0)을 보내면 외부에서도 접속이 가능해지는 셈이다.
debug(True or False)
해당 옵션을 True로 보내주면, 웹 서버가 실행 중에 코드가 변경되어도 해당 작업을 그대로 반영시킨다. 실제로 개발 중에 구현 현황을 실시간으로 확인할 수 있어 엄청 편리하다. 아무 인자도 주지 않을 경우, False 인자로 보내진다.
전송중...
사진 설명을 입력하세요.
전송중...
실행화면
전송중...
숫자타입으로 받을 경우
전송중...
실행화면
Java를 이용해서 web 작업을 하려면
- Tomcat 웹 서버 필요(WAS - web application server)
- JSP(lib를 http servlet을 가져다 쓴다.)
- ?___ = 11 은 Integer.parseInt() 로 형변환시켜줘야 하지만 Flask는 '<int:___>' 로 가져다 쓸 수 있다.
Flask는 이 자체가 하나의 웹 서버(WAS), 언어도 별도의 언어 필요 없고 파이썬 언어를 가져다 쓴다.
전송중...
사진 설명을 입력하세요.
# routes.py from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello World!' # ex) user/IML, user/ash123 @app.route('/user/<username>') def show_user_profile(username): # show the user profile for that user return 'User %s' % username # ex) post/123 @app.route('/post/<int:post_id>') def show_post(post_id): # show the post with the given id, the id is an integer return 'Post %d' % post_id # 자기 자신이 실행될 때 실행 if __name__ == '__main__': app.run()
상단의 세 가지를 모두 사용하여 메인을 호출한 경우, user로 호출하는 경우, post 로 호출한 경우 확인 가능
인자로 받을 변수 규칙에는string(%s), Int(%d), float(%f)등이 있으며아무것도 적지 않을 경우,
자동으로 string 형태로 인자를 주게 된다.
또한, 특정 함수 1개에 복수의 데코레이터를 덮어씌울 수 있다. 예를 들어 아래처럼 2개의 데코레이터를 씌워준 후, 기본 함수 인자 설정을 None으로 해주면 인자가 없을 경우 첫 번째 URL이고, 있을 경우 2번 째 URL이 되는 것이다.
전송중...
사진 설명을 입력하세요.
# routes.py from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello World!' # ex) user/IML, user/ash123 @app.route('/user/<username>') def show_user_profile(username): # show the user profile for that user return 'User %s' % username # ex) post/123 @app.route('/post/<int:post_id>') def show_post(post_id): # show the post with the given id, the id is an integer return 'Post %d' % post_id # 복수의 데코레이터 @app.route('/hello/') @app.route('/hello/<name>') def hello(name=None): return 'User %s' % name # 자기 자신이 실행될 때 실행 if __name__ == '__main__': app.run()
전송중...
값이 있는 경우
전송중...
값이 없는 경우
웹 페이지 소스 보는 방법 view-source:소스를 보고 싶은 URL 예) view-source:https://www.naver.com/
Java 를 이용해서 Web 프로젝트를 하는 경우
1. Tomcat
2. JDK / JRE(순수자바/엔터프라이즈 버전)
3. 언어
- 순수 Java를 이용해서 lib을 만든다
- JSP
- 기본 문법
1) <% ~ %> : 자바코드를 쓰는 방법
2) <%= %> : 자바코드에서 변수만 쓰는 방법(단일연산, 변수값 출력(해당 페이지 내부에 있는 변수))
3) <%@ %> :<%@ page contentType = "text/html;charset=utf-8"%> (https://hyeonstorage.tistory.com/73)
- 태그라이브러리 :* taglib을 사용하는 목적 : <c:if >, (c는 core), fnc(function), fmt(format), xml, sql 태그를 사용하려면
JSTL이 있어야 하고 .jar 가 있어야 한다. 이렇게 태그들을 사용하기 위해 taglib이 있어야 한다.
※★면접★ JSTL을 사용하는 목적 : JSP 를 마치 HTML 태그형태로 만들어놓기 위함.
*JDBC 역할 : 순수 JAVA로는 DB에 접근할 수 없으니 접근하기위한 JDBC(Java Data Base Connection) 이 필요하다.
전송중...
사진 설명을 입력하세요.
- JSP 내부에
- <%={ } %>
- ${param.파라미터명}
- forward 시키는 방법
1) <jsp:forward : 액션태그 ( 액션태그 종류 : include, beans, set property, get property ) - 액션태그를 사용하려면 taglib가 필요없음
4) <%! %> : 선언하는 부분(변수나 메서드 선언)
* 클래스 밖에, 클래스 내부, 메소드 내부에 클래스 선언 가능
- Servlet ( 서블릿 클래스 사용하려면 tomcat api가 필요하다)
이미지 썸네일 삭제
[Flask 입문] Template 사용하기
이전까지는 그저 특정 문자열을 반환하는 것으로 웹 페이지를 보여주었지만 실제 웹 사이트들은 대부분그렇...
blog.naver.com
Template 사용하기
이전까지는 그저 특정 문자열을 반환하는 것으로 웹 페이지를 보여주었지만
실제 웹 사이트들은 대부분그렇지 않다.
사진이나 영상같은 정적 파일 등과 예쁜 폰트 등의 글씨를 보여주기 위해
수많은 코드가 포함된 HTML 파일을 사용하는 것이 대부분이다.
-> Flask에서 html 문서를 사용하는 방법
Templates
플라스크의 경우, HTML 문서를 보관하기 위한 디렉터리를 따로 만들어주어야
해당 파일들을 인식할 수 있는데,
해당 폴더의 위치는 반드시 플라스크를 실행시키는 코드와 같은 경로이며,
templates라는 이름이여야 한다. (바꿀 수는 있지만 굳이 바꿀 이유는 없음)
전송중...
폴더 생성
전송중...
사진 설명을 입력하세요.
전송중...
jinja2 문법 : {{ }} = JSP문법의 <%= %>
전송중...
routes.py 수정
from flask import Flask, render_template app = Flask(__name__) # ex)hello/IML @app.route('/hello/<user>') def hello_name(user): return render_template('hello.html', name = user) # 원래 외부 파일을 불러낼 때 필요한 함수 # 현재 작업폴더 안에 들어가서 hello.html 파일을 찾아내는 것. 그 파일 내부에 name 이라는 변수에 # user(매개변수)에 전달받은 값을 대입시키라는 의미 if __name__ == '__main__': app.run(debug = True)
전송중...
실행 결과값
Java web에서
서블릿 -----------> JSP 를 호출할 수 있다. 이 때 사용하는 클래스와 메소드
1. RequestDispatcher -> request.
render_template('hello.html', name = user)
플라스크에서 외부의 html 파일을 불러오기 위해 사용하는 메소드가 바로 이것이다.
templates 폴더에서 인자로 받은 hello.html파일을 탐색한 후,
name 인자를 건네주며 페이지를 실행시켰다.
<h1>Hello {{ name }}!</h1>
인자로 받은 name 변수는 이런 형태로 html 문서에서 출력할 수 있다.
이렇게{ } 등을 사용하여 html 문서 내에서 직접 코드를 실행시키는 문법을
Template Engine이라고 부르며, 이 템플릿 엔진의 이름은Jinja2라고 한다.
Jinja2
이 템플릿 엔진을 사용하여 HTML 문서에서 몇 가지 파이썬 구문을 작성하고 실행시킬 수 있다.
(if 문, for 문 및 일부 메소드들 사용가능) 코드에 용도에 따라 적절한 괄호를 감싸주어서 사용하면 된다.
{% ... %} for Statements (for문, if문)
{{ ... }} for Expressions to print to the template output ( 변수 바로 출력하는 문법 )
{# ... #}for Comments not included in the template output ( 출력에 포함하지 않게하는 문법 )
# ... ## for Line Statements ( 주석처리하는 문법 )
{{...}} : 변수나 표현식의 결과를 출력하는 구분자(delimeter)
{% ... %}
if문이나 for문 같은 제어문을 할당하는 구분자(delimeter)
{# ... #} : 주석
{%- ... %}, {%+ ... %}, {% ... -%} ... : 공백 제거 혹은 유지(trim 기능)
기본적으로 jinja 템플릿 엔진은 템플릿 줄 끝의 개 행 문자를 제외한 나머지 공백은
그대로 출력.
실제로 보이는 화면에는 이러한 공백을 제외하고 싶을 경우에
템플릿 태그 앞뒤에 +나 -를 붙여
+를 붙이면 공백 유지, -를 붙이면 공백 제거의 형태가 되는 것입니다.
{% raw %} ... {% endraw %} : 이스케이프(escape)
우리가 템플릿 형태와 동일한 "텍스트"를 출력하고자 할 때 사용.
{% raw %} 와 {% endraw %} 사이에 이스케이프 할 문자들을 입력.
# xml escape = True
그러나 {{'{{' }} 와 같이 따옴표로 간단하게 이스케이프 할 수도 있다.
작은 문자열의 경우는 이런식으로 사용하는 것이 편리
# for문 작성방법 {% for <개별요소> in <리스트> %} <실행코드> {% endfor %} {% for item in navigation %} <li><a href = "{{ item.href }}" > {{ item.caption }} </a></li> {% endfor%} {% for n in datalist %} <li>n</li> {% endfor %}
#일반 if문 사용방법 {% if <조건> %} <실행코드> {% elif <조건> %} <실행코드> {% else %} <실행코드> {% endif %} #3항 연산 사용방법 {% <실행코드> if <조건> else <거짓일 때 실행코드> %}
# for문과 if문을 섞어서 사용하는 방법 {% for user in users if users %} #user에 데이터가 있으면 true, 없으면 false(데이터가 있으니까 users 로부터 하나씩 뽑는다.) <li> {{ user.username }} </li> {% endfor %}
이미지 썸네일 삭제
플라스크(Flask) ; Jinja2 템플릿 엔진 기본문법
플라스크에서는 템플릿을 이용하여 html을 구성한다는 설명을 지난 포스팅에서 했었습니다. 그렇다면 이 템플릿을 해석하는 템플릿 엔진인 Jinja2의 기본적인 문법에 대해서도 조금 알아야겠다 싶어 포스팅합니다...
snacky.tistory.com
locals() 메소드 활용하기
웹 페이지의 성격에 따라 HTML 문서에서 보여주어야 할 변수나 자료형이 매우 많을 수도 있다. 그래서 해당 함수 내의 지역 변수 전체를 인자로 보내주는locals()메소드를 사용하면 매우 편리하다.
#routes.py from flask import Flask, flash, redirect, render_template, request app = Flask(__name__) @app.route("/") def index(): return "Flask App!" @app.route("/user/") def hello(): users = [ "Frank", "Steve", "Alice", "Bruce" ] var = 1 return render_template('user.html', **locals()) if __name__ == "__main__": app.run(host='0.0.0.0',debug = True)
locals() 메소드를 사용함으로 지역 내에서 선언된 users 리스트와 var 변수를 모두 render_template함수 내에 보내준다.
<!-- user.html --> <ul> {% for user in users %} <li>{{ user }}</a></li> {% endfor %} {% if var %} <h1>Hello {{ var }}!</h1> {% endif %} </ul>
{% %} 내에서 파이썬 문법에 맞는 if 문과 for문을 사용하였다.
두 문법 모두 해당 변수가 존재할 경우, 실행되며 존재하지 않으면 그냥 스킵된다.
전송중...
실행화면
전송중...
사진 설명을 입력하세요.
https://blog.naver.com/shino1025/221348321746
이미지 썸네일 삭제
[Flask 입문] URL 및 HTTP 메소드 다루기
이번 포스팅에서는 Flask를 통한 웹 구동 중, 각 URL 간의 이동(Redirect) 및 HTTP 메소드 사용법...
blog.naver.com
URL 및 HTTP 메소드 다루기
Flask를 통한 웹 구동 중, 각 URL 간의 이동(Redirect) 및 HTTP 메소드 사용법
Redirect(리다이렉트)
Flask에서는 URL 간의 쉽고 편한 이동을 위해 redirect 메소드를 제공한다. 사용 방법은 다음과 같다.
from flask import Flask, redirect, url_for app = Flask(__name__) @app.route('/admin') def hello_admin(): return 'Hello Admin' @app.route('/guest/<guest>') def hello_guest(guest): return 'Hello %s as Guest' % guest @app.route('/user/<name>') def hello_user(name): if name =='admin': # URL을 통해 얻어지는 값이 admin 이면 hello_admin 이 출력되고, 아니면 hello_guest가 바로 출력되도록 return redirect('/admin') # URL 을 직접 사용 #return redirect(url_for("hello_admin")) # URL을 위한 함수를 이용해서 해당 함수 호출(hello_admin) else: return redirect(url_for('hello_guest',guest = name)) if __name__ == '__main__': app.run(debug = True)
전송중...
실행화면
전송중...
user/원하는 값을 입력해도 바로 guest/hohoho로 이동된다.
전송중...
admin 입력 화면
~~~ :5000/admin -> hello_admin() 함수 호출
~~~ :5000/guest -> hello_guest() 함수 호출
~~~ :5000/user -> /admin 이면 @app.route('user/<name>')을 타고 name 매개변수로 이동.
직후 redirect로 /admin으로 이동한다.(hello_admin 함수 호출)
#return redirect(url_for("hello_admin")) 로 함수명을 직접 써서 바로 호출할 수 있다.
위의 코드는 /user/<name> URL에 입력된 name 값에 따라 다른 URL로 향하게 되어 있다.
name 값이 admin일 경우, /admin URL(hello_admin())를 실행시키고,
나머지는 guest/<guest> URL(hello_guest)를 실행시키는 구조이다.
return redirect('/admin') == return redirect(url_for("hello_admin"))
해당 URL로 리다이렉트시키는 함수이다. URL을 줘도 되고,
url_for() 메소드를 사용하여 실제 함수 이름을 인자로 주어도 된다.
return redirect(url_for('hello_guest',guest = name))
url_for의 경우, 나머지 인자를 넘겨 줄때, 위 코드처럼 변수로 나눠서 넘겨줄 수 있다.
파이썬은 문자열 접근이 워낙 편하니까 실제 URL로 줘도 비슷하니, 편한걸 쓰도록 하자.
HTTP Methods
http 메소드를 통해 작동하는 웹 페이지를 만들어보자.
http 프로토콜은 WWW(월드 와이드 웹)에서 데이터 통신의 기본 토대이다.
필자는 Flask를 사용해GET 및 POST메소드를 사용하는 코드를 만들어 보겠다.
아래의 코드를 읽어보자.
from flask import Flask, redirect, url_for, request app = Flask(__name__) @app.route('/success/<name>') def success(name): return 'welcome %s' % name @app.route('/login',methods = ['POST', 'GET']) # post방식과 get 방식을 모두 허용하겠다는 의미 def login(): if request.method == 'POST': # 전송방식이 post로 전달되면 user = request.form['nm'] # nm 입력값을 찾아서 return redirect(url_for('success',name = user)) # user를 name 에다가 넣어준다. else: user = request.args.get('nm') # get방식으로 넘어올 때 받는 방식 return redirect(url_for('success',name = user)) if __name__ == '__main__': app.run(debug = True)
@app.route('/login',methods = ['POST', 'GET'])
기본적으로 Flask의 라우팅은 GET Method로 응답하지만,
필요한 경우 특정 메소드에만 응답하도록 선언할 수 있다.
위의 코드의 경우 POST 및 GET 2개의 메소드에 대한 응답이 가능하도록 하였다.
if request.method == 'POST':
조건문의 첫 번째 분기는 POST 메소드로 요청이 왔을 때이다.
user = request.form['nm']
이 코드는 해당 요청에서입력된 form 정보의 'nm' 필드 값을 가져오겠다는 뜻이다.
해당 결과를 확인하기 위해서는 직접 form을 만들어서 실행시켜야 한다.
아래와 같은 html 파일을 작성하여 그대로 열어보자.
<!-- asd.html --> <html> <body> <form action = "http://localhost:5000/login" method = "post"> <!-- 전송방식 지정 --> <p>Enter Name:</p> <p><input type = "text" name = "nm" /></p> <p><input type = "submit" value = "submit" /></p> </form> </body> </html>
웹 서버에 연결하는 것이 아닌, 직접 파일을 열어야 한다.
해당 폼이 담긴 html 문서는 딱히 flask와 연결된 게 아니기 때문이다.
그러나 form의 action 필드에 해당 URL로 해두면
POST 요청을 웹 서버로 보내서 결과를 확인할 수 있게 된다.
전송중...
파일 실행
전송중...
사진 설명을 입력하세요.
전송중...
사진 설명을 입력하세요.
전송중...
사진 설명을 입력하세요.
from flask import Flask, redirect, url_for, request, render_template app = Flask(__name__) @app.route('/hello') def hello(): return render_template('asd.html') @app.route('/success/<name>') def success(name): return 'welcome %s' % name @app.route('/login',methods = ['POST', 'GET']) def login(): if request.method == 'POST': user = request.form['nm'] return redirect(url_for('success',name = user)) else: user = request.args.get('nm') return redirect(url_for('success',name = user)) if __name__ == '__main__': app.run(debug = True)
전송중...
locathost:5000/hello로 해당 파일 호출 가능
http://localhost:5000/login?nm=hojisoo
해당 주소로 get방식 실행 가능
전송중...
get방식으로 실행한 결과
Static 파일 다루기
Static Files
보통 정적 파일은 HTML 문서를 꾸미기 위한 CSS와, 각종 기능(알림 창 등등)을 넣기 위한 javascript인 2가지로 분류한다. 딱히 필자가 여기서 CSS나 javascript 등의 문법을 알아볼 건 아니고, 간단하게 적용하는 법에 대해서만 알아보겠다.
/static
html 파일들을 templates에 보관하듯이 Flask에 사용되는 모든 static 파일들은 static 경로에 해주도록 하겠다.
전송중...
폴더 추가
전송중...
파일 생성(파일형식 - 모든파일, 인코딩 = utf-8)
// /static/hello.js function sayHello() { alert("Hello World") }
전송중...
사진 설명을 입력하세요.
<html> <head> <script type = "text/javascript" src = "{{ url_for('static', filename = 'hello.js') }}" ></script> </head> <body> <input type = "button" onclick = "sayHello()" value = "Say Hello" /> </body> </html>
전송중...
사진 설명을 입력하세요.
from flask import Flask, render_template app = Flask(__name__) @app.route("/") def index(): return render_template("hello.html") if __name__ == '__main__': app.run(debug = True)
전송중...
실행화면 - 버튼 클릭 시 Hello World 이벤트 발생
CSS
이번엔 CSS도 적용시켜 보자. 내부 기능은 따로 구현되지 않는 로그인 폼을 만들어 보자.
먼저 /static 폴더에 style.css 파일을 만들고 아래의 코드를 복붙
* { box-sizing: border-box; } *:focus { outline: none; } body { font-family: Arial; background-color: #3498DB; padding: 50px; } .login { margin: 20px auto; width: 300px; } .login-screen { background-color: #FFF; padding: 20px; border-radius: 5px } .app-title { text-align: center; color: #777; } .login-form { text-align: center; } .control-group { margin-bottom: 10px; } input { text-align: center; background-color: #ECF0F1; border: 2px solid transparent; border-radius: 3px; font-size: 16px; font-weight: 200; padding: 10px 0; width: 250px; transition: border .5s; } input:focus { border: 2px solid #3498DB; box-shadow: none; } .btn { border: 2px solid transparent; background: #3498DB; color: #ffffff; font-size: 16px; line-height: 25px; padding: 10px 0; text-decoration: none; text-shadow: none; border-radius: 3px; box-shadow: none; transition: 0.25s; display: block; width: 250px; margin: 0 auto; } .btn:hover { background-color: #2980B9; } .login-link { font-size: 12px; color: #444; display: block; margin-top: 12px; }
<!-- hello.html --> <html> <head> <script type = "text/javascript" src = "{{ url_for('static', filename = 'hello.js') }}" ></script> <link rel="stylesheet" href="/static/style.css" type="text/css"> </head> <body> <form action="/login" method="POST"> <div class="login"> <div class="login-screen"> <div class="app-title"> <h1>Login</h1> </div> <div class="login-form"> <div class="control-group"> <input type="text" class="login-field" value="" placeholder="username" name="username"> <label class="login-field-icon fui-user" for="login-name"></label> </div> <div class="control-group"> <input type="password" class="login-field" value="" placeholder="password" name="password"> <label class="login-field-icon fui-lock" for="login-pass"></label> </div> <input type="submit" value="Log in" class="btn btn-primary btn-large btn-block" > <br> </div> </div> </div> </form> </body> </html>
전송중...
routes.py 파일 코드
전송중...
cmd창에서 실행
전송중...
실행화면
https://blog.naver.com/shino1025/221348391338
이미지 썸네일 삭제
[Flask 입문] 폼으로 데이터 전송받기
이번 포스팅에서는 Flask에서 폼을 통해 데이터를 전송받는 방법에 대해 알아보자.Form 플라스크에서 폼...
blog.naver.com
Form
플라스크에서 폼의 데이터를 사용하는 방법은 매우 간단
# routes.py from flask import Flask, render_template, request app = Flask(__name__) @app.route('/') def student(): return render_template('student.html') # 실행하면 바로 student.html 실행 @app.route('/result',methods = ['POST', 'GET']) def result(): if request.method == 'POST': # 메소드가 POST 면(submit버튼을 눌렀을 때 전송방식이 POST면) result = request.form # 내부에 쓰인 값들은 모두 꺼낸다.(result에 입력 데이터를 모두 저장) return render_template("result.html",result = result) # 모든 입력 데이터값을 result.html에 전달 # 좌측 result는 result.html에 쓰여있는 값이다. if __name__ == '__main__': app.run(debug = True)
result = request.form
폼 관련 데이터를 다루는 부분은 이 코드이다. 요청이 POST일 경우,
reqeust의 form 객체에 해당 폼에 입력된 모든 데이터가 들어있다.
만약 특정 필드 값만 뽑아내고 싶다면
request.form['name']- (전체값['파라미터명'])와 같은 식으로 처리하면 된다.
[request가 param에 저장, form이 value에 저장 --> 이 값을 result로 저장시켰다.]
[ 이 때 키와 밸류 값을 result.items() 로 꺼낸다. -> result.html ]
위의 코드는 student.html에 form에 데이터를 작성하여 보내면
result.html에서 해당 값을 확인할 수 있는 구조이다.
각각 html 파일도 작성
<!doctype html> <!-- student.html --> <html> <body> <form action = "http://localhost:5000/result" method = "POST"> <p>Name <input type = "text" name = "Name" /></p> <p>Physics <input type = "text" name = "Physics" /></p> <p>Chemistry <input type = "text" name = "chemistry" /></p> <p>Maths <input type ="text" name = "Mathematics" /></p> <p><input type = "submit" value = "submit" /></p> </form> </body> </html>
<!doctype html> <!-- result.html --> <html> <body> <table border = 1> {% for key, value in result.items() %} <!-- result 함수에서 값이 전달되는 부분(param은 key에, value는 value에 저장 --> <tr> <th> {{ key }} </th> <!-- 출력 --> <td> {{ value }} </td> </tr> {% endfor %} </table> </body> </html>
폼 객체의 경우 각 데이터를 딕셔너리 형태로 보관하기 때문에
기존에 파이썬에서 사용하는 items() 등의 메소드를 사용하여 출력할 수 있다.
전송중...
실행 결과 : 값 입력
전송중...
사진 설명을 입력하세요.
'PYTHON' 카테고리의 다른 글
| 20200507 - 파이썬 플라스크 Flask (웹 프로그래밍 기초) (0) | 2020.05.07 |
|---|---|
| 20200428 - 파이썬 머신러닝(Tensorflow, 이미지 분석, 영화 리뷰 텍스트 분석(긍정|부정 평가) (0) | 2020.04.28 |
| 20200427 - 파이썬 머신러닝, KNN 지도학습, SVM, DT, LR 교차검증 (0) | 2020.04.27 |
| 20200424 - 파이썬, 자연어처리, 워드클라우드, 문장 유사도 측정, 넘파이 행렬, 넘파이 기본 함수 (0) | 2020.04.24 |
| 20200423 - 파이썬, CCTV, 인구수, 서울시 범죄율 분석, 시각화, 피벗테이블 (0) | 2020.04.23 |
댓글