Flask 보기에서 직접 프런트엔드를 빌드하는 방법

6948 단어 javascriptflaskpythonwebdev
과거에는 인스타그램 클론을 만들기 위해 Flask를 처음 배웠을 때 Flask를 사용하여 순전히 백엔드를 만들었습니다. 그 의미는 내가 Flask에 많은 api 끝점을 생성하여 당시 React에서 내 프런트엔드에서 가져올 수 있다는 것을 의미합니다.
네, Flask는 주로 백엔드 개발에 사용됩니다. 그러나 Flask에서는 일반적으로 html 파일인 템플릿을 만듭니다. 내 애플리케이션에 거대한 프런트엔드가 필요하지 않고 뷰에 직접 내 프런트엔드를 구축하려는 경우 좋지 않을까요?

Flask에 익숙하지 않은 분들을 위해 Flask은 Python으로 작성된 마이크로 웹 프레임워크입니다. Flask는 매우 가볍고 사용자가 단 한 페이지의 코드로 웹앱을 만들 수 있기 때문에 다른 Python 기반 웹 라이브러리/프레임워크보다 인기가 있습니다. 이 기사에서는 Flask에 대해 설명하지 않습니다. 온라인에서 훌륭한 블로그 게시물을 찾아 Flask가 얼마나 강력한지 확인할 수 있습니다.

그래서 방법?



설정
이것이 간단한 Flask 앱의 모습입니다.

> Folder (Flask App)
 > templates 
  > index.html
 > app.py


템플릿 폴더에는 Flask 앱용 보기인 index.html 파일이 포함되어 있습니다. 이는 Express의 view 폴더에 해당합니다. index.html 파일에 많은 html을 작성할 수 있기 때문에 기술적으로는 설정이 완료되었습니다. 그러나 우리 모두는 순수한 html이 갈 길이 아니라는 것을 알고 있습니다.index.html에 JavaScript를 추가하려면 루트 디렉토리에 static라는 폴더를 만드십시오.

최종 Flask 앱은 다음과 같아야 합니다.

> Folder (Flask App)
 > static
 > templates 
  > index.html
 > app.py


자바스크립트 추가
이제 static 폴더 안에 JavaScript 파일을 추가하겠습니다. 먼저 main.js라는 JavaScript 파일을 하나 추가하여 시작하겠습니다.

> Folder (Flask App)
 > static
  > main.js
 > templates 
  > index.html
 > app.py


이제 index.html 파일을 엽니다. 베어 스켈레톤 html 만 있다고 가정합니다.

<!DOCTYPE html>
<html>
<head>
    <title>Flask App!</title>
</head>

<body>
</body>
</html>


일반적으로 <script> 태그를 그대로 사용하여 JavaScript 파일을 추가합니다.

<script type='text/javascript' src='main.js'></script>


Flask 앱에서는 불가능합니다. 그러나 매우 간단한 수정 사항이 있습니다. main.js 폴더에 static가 있다고 가정하고 src 태그의 <script> 속성에 다음 코드를 삽입합니다.

src={{ url_for('static', filename='main.js') }}


최종index.html은 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <title>Flask App!</title>
</head>

<body>

...

<script type='text/javascript' src={{ url_for('static', filename='main.js') }}></script>
</body>
</html>


엄청난! 그러나 여러 JavaScript 파일은 어떻습니까?
번들링이 작동하는 때입니다.
자바스크립트 번들링
사용자 입장에서는 다양한 기능을 위한 여러 JavaScript 파일을 보유하는 것이 좋습니다. 그러나 DOM의 관점에서는 상관하지 않습니다. 오히려 여러 JavaScript 파일보다 하나의 JavaScript 파일을 렌더링하는 것이 좋습니다. 따라서 모든 JavaScript 파일을 함께 묶고 하나의 main.js 파일을 index.html 에 전달합니다.

먼저 명령줄에 flask_assets를 설치합니다.

pip install flask_assets


다음으로 Flask 앱(이 경우 app.py )에서 Bundle 및 Environment 를 가져옵니다.

from flask_assets import Bundle, Environment


다음과 같은 폴더 구조가 있다고 가정합니다. 묶고 싶은 JavaScript 파일이 세 개 있습니다.

> Folder (Flask App)
 > static
  > file1.js
  > file2.js
  > file3.js
 > templates 
  > index.html
 > app.py


이제 JavaScript 파일 번들을 만듭니다.

# your imports
...

app = Flask(__name__)

files = Bundle('file1.js', 'file2.js', 'file3.js', output = 'gen/main.js')


다음으로 우리 앱의 환경을 생성하는 assets 변수를 생성하고 등록합니다.

...

files = Bundle('file1.js', 'file2.js', 'file3.js', output = 'gen/main.js')
assets = Environment(app)
assets.register('main_js', js)


그게 다야 우리 app.py .

`index.html'로 이동하여 다음 코드를 추가하십시오.


그리고 그게 다야!
JavaScript 번들 또는 gen가 있는 main.js라는 새 디렉토리가 있음을 알아차렸을 것입니다.
CSS 번들링도 유사하므로 여러 css 파일을 index.html 에 전달해야 하는 경우 위의 단계를 다시 수행하십시오.

이것이 도움이 되기를 바라며 행복한 webdev!
마크다운 필요한 사촌만
코드 출현 2015 - 1일차

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage