LoginSignup
0
1

More than 3 years have passed since last update.

@hiratarich(Richard Hirata)

Visual studio 2019でさくっとFlask Jade(Pug)　#1

Last updated at Posted at 2019-12-10

Flask vs Bottleの話は、どうでも良い。

Jade vs Pugの話もどうでも良い。

早い話が鹿児島弁と標準語の違いを語るのと等しい。

image.png
次にをクリック
image.png

作成をクリック
image.png

プジェクトが出来上がる。

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:Support@example.com') Support@example.com
    br
    strong Marketing: 
    a(href='mailto:Marketing@example.com') Marketing@example.com

以上のファイルがサクッと出来上がる。

実行すると

image.png

あっという間にひな形が出来上がる。

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,
    )

image.png
プログラムからテキストを変更することができました。

次にループの例です。

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から始まるので注意

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1