Visual studio 2019でさくっとFlask Jade(Pug) #1
Flask vs Bottleの話は、どうでも良い。
Jade vs Pugの話もどうでも良い。
早い話が鹿児島弁と標準語の違いを語るのと等しい。
次にをクリック
作成をクリック
プジェクトが出来上がる。
C:.
│ FlaskWebProject.pyproj
│ requirements.txt
│ runserver.py
│
├─FlaskWebProject
│ │ views.py
│ │ __init__.py
│ ├─static
│ │ ├─content
│ │ │ bootstrap.css
│ │ │ bootstrap.min.css
│ │ │ site.css
│ │ │
│ │ ├─fonts
│ │ │ glyphicons-halflings-regular.eot
│ │ │ glyphicons-halflings-regular.svg
│ │ │ glyphicons-halflings-regular.ttf
│ │ │ glyphicons-halflings-regular.woff
│ │ │
│ │ └─scripts
│ │ bootstrap.js
│ │ bootstrap.min.js
│ │ jquery-1.10.2.intellisense.js
│ │ jquery-1.10.2.js
│ │ jquery-1.10.2.min.js
│ │ jquery-1.10.2.min.map
│ │ jquery.validate-vsdoc.js
│ │ jquery.validate.js
│ │ jquery.validate.min.js
│ │ jquery.validate.unobtrusive.js
│ │ jquery.validate.unobtrusive.min.js
│ │ modernizr-2.6.2.js
│ │ respond.js
│ │ respond.min.js
│ │ _references.js
│ │
│ └─templates
│ about.jade
│ contact.jade
│ index.jade
│ layout.jade
runserver.py
"""This script runs the FlaskWebProject application using a development server.
"""
from os import environ
from FlaskWebProject import app
if __name__ == '__main__':
HOST = environ.get('SERVER_HOST', 'localhost')
try:
PORT = int(environ.get('SERVER_PORT', '5555'))
except ValueError:
PORT = 5555
app.run(HOST, PORT)
__init__.py
"""
The flask application package.
"""
from flask import Flask
app = Flask(__name__)
app.jinja_env.add_extension('pyjade.ext.jinja.PyJadeExtension')
import FlaskWebProject.views
views.py
"""
Routes and views for the flask application.
"""
from datetime import datetime
from flask import render_template
from FlaskWebProject import app
@app.route('/')
@app.route('/home')
def home():
"""Renders the home page."""
return render_template(
'index.jade',
title='Home Page',
year=datetime.now().year,
)
@app.route('/contact')
def contact():
"""Renders the contact page."""
return render_template(
'contact.jade',
title='Contact',
year=datetime.now().year,
message='Your contact page.'
)
@app.route('/about')
def about():
"""Renders the about page."""
return render_template(
'about.jade',
title='About',
year=datetime.now().year,
message='Your application description page.'
)
layout.jade
doctype html
html
head
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1.0')
title #{title} - My Flask/Jade Application
link(rel='stylesheet', type='text/css', href='/static/content/bootstrap.min.css')
link(rel='stylesheet', type='text/css', href='/static/content/site.css')
script(src='/static/scripts/modernizr-2.6.2.js')
body
.navbar.navbar-inverse.navbar-fixed-top
.container
.navbar-header
button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href='/') Application name
.navbar-collapse.collapse
ul.nav.navbar-nav
li
a(href='/') Home
li
a(href='/about') About
li
a(href='/contact') Contact
.container.body-content
block content
hr
footer
p © #{year} - My Flask/Jade Application
script(src='/static/scripts/jquery-1.10.2.js')
script(src='/static/scripts/bootstrap.js')
script(src='/static/scripts/respond.js')
block scripts
index.jade
extends layout
block content
.jumbotron
h1 Flask/Jade
p.lead Flask is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.
p
a.btn.btn-primary.btn-large(href='http://flask.pocoo.org/') Learn more »
.row
.col-md-4
h2 Getting started
p Flask gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and gives you full control over markup for enjoyable, agile development.
p
a.btn.btn-default(href='http://flask.pocoo.org/docs/') Learn more »
.col-md-4
h2 Get more libraries
p The Python Package Index is a repository of software for the Python programming language.
p
a.btn.btn-default(href='https://pypi.python.org/pypi') Learn more »
.col-md-4
h2 Microsoft Azure
p You can easily publish to Microsoft Azure using Visual Studio. Find out how you can host your application using a free trial today.
p
a.btn.btn-default(href='http://azure.microsoft.com') Learn more »
about.jade
extends layout
block content
h2 #{title}.
h3 #{message}
p Use this area to provide additional information.
contact.jade
extends layout
block content
h2 #{title}.
h3 #{message}
address
| One Microsoft Way
br
| Redmond, WA 98052-6399
br
abbr(title='Phone') P:
| 425.555.0100
address
strong Support:
a(href='mailto:[email protected]') [email protected]
br
strong Marketing:
a(href='mailto:[email protected]') [email protected]
以上のファイルがサクッと出来上がる。
実行すると
あっという間にひな形が出来上がる。
Jadeに変数でデータを渡す。
Getting started Get More Libraries Mcirosoft Azureを変数で入れ替えみよう。
h2とpのところを変数化します。#{変数}で書き直します。
index.jade
extends layout
block content
.jumbotron
h1 Flask/Pug(Jade)
p.lead Flask is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.
p
a.btn.btn-primary.btn-large(href='http://flask.pocoo.org/') Learn more »
.row
.col-md-4
h2 Getting started
p Flask gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and gives you full control over markup for enjoyable, agile development.
p
a.btn.btn-default(href='http://flask.pocoo.org/docs/') Learn more »
.col-md-4
h2 Get more libraries
p The Python Package Index is a repository of software for the Python programming language.
p
a.btn.btn-default(href='https://pypi.python.org/pypi') Learn more »
.col-md-4
h2 Microsoft Azure
p You can easily publish to Microsoft Azure using Visual Studio. Find out how you can host your application using a free trial today.
p
a.btn.btn-default(href='http://azure.microsoft.com') Learn more »
index.jade
block content
.jumbotron
h1 Flask/Jade
p.lead Flask is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.
p
a.btn.btn-primary.btn-large(href='http://flask.pocoo.org/') Learn more »
.row
.col-md-4
h2 #{header[0]}
p #{para[0]}
p
a.btn.btn-default(href='http://flask.pocoo.org/docs/') Learn more »
.col-md-4
h2 #{header[1]}
p #{para[1]}
p
a.btn.btn-default(href='https://pypi.python.org/pypi') Learn more »
.col-md-4
h2 #{header[2]}
p #{para[2]}
p
a.btn.btn-default(href='http://azure.microsoft.com') Learn more »
h2 を#{header[0]},#{header[1]},#{header[2]},#{header[3]}に置き換えています。配列形式にしました。
p を#{para[0]},#{para[1]},#{para[2]},#{para[3]}に置き換えています。配列形式にしました。
次にviews.pyに変数を書き込みます。
views.py
@app.route('/')
@app.route('/home')
def home():
"""Renders the home page."""
return render_template(
'index.jade',
title='Home Page',header='入門,多くのライブラリを取得,サーバー'.split(","),
para='''Flaskは、動的なWebサイトを構築するための強力なパターンベースの方法を提供します。これにより、関心事を明確に分離し、楽しいアジャイル開発のためにマークアップを完全に制御できます。
Python Package Indexは、Pythonプログラミング言語用のソフトウェアのリポジトリです。
Visual Studioを使用して、Microsoft Azureに簡単に発行できます。今日の無料試用版を使用してアプリケーションをホストする方法をご覧ください。'''.split('\n'),
year=datetime.now().year,
)
プログラムからテキストを変更することができました。
次にループの例です。
index.jadeを下記のように書き直します。
index.jade
extends layout
block content
.jumbotron
h1 Flask/Jade
p.lead Flask is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.
p
a.btn.btn-primary.btn-large(href='http://flask.pocoo.org/') Learn more »
.row
{% for x in header %}
.col-md-4
h2 #{x}
p #{para[loop.index-1]}
p
a.btn.btn-default(href='#') Learn more »
{% endfor %}
{% ... %}の神社(jinja)ステートメントでの変数は、そのまま headerと書きます。
そのほかのJadeステートメントは、#{prara[loop.index-1]}のように書きます。
loop.indexは、for loop のインデックスを扱うための変数です。[1,2,3,...]と1から始まるので注意
Author And Source
この問題について(Visual studio 2019でさくっとFlask Jade(Pug) #1), 我々は、より多くの情報をここで見つけました https://qiita.com/hiratarich/items/13b003638bd9c0b60f2a著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .