Help us understand the problem. What is going on with this article?

python Bottleの基本6Htmlデコレータ

プログラマにとっていろんな言語使いながら仕事するのは、負担が多いし、嫌いである。

pythonは、単語だけの英語のような便利な言語である。

簡単なweb アプリケーションをpythonで作成するのにも、html,css,javascript,sql,jqueryなどを駆使しないと作成できない。

せっかくC#とかjavaとかSQLから逃亡してpythonの世界に来たのにviewのテンプレートを書くのにpythonの方言のsimple template pythonを書かなければならない。

sample.tpl
% for i in range(5):
<h1>test{{i}}</h1>
% end

書いている間にいつの間にかphpをコーディンクしてしまう。
できれば一つの言語で書いて、その他はデータにしたい。

そのようなわけでデコレータを使いBootstrap付のHTMLをデコレータを作ってみた。

こまごましたhtmlのは、デコレータに任せbodyの中身だけを書く。

image.png

ex6.py
from bottle import *
import json,os
#HTML デコレーション(Bootstrap4)
def Html(title):
    html='''
        <!DOCTYPE html>
            <html lang="ja">
            <head>
                <meta charset="utf-8" />
                <title>%s</title>
                <link rel="stylesheet" type="text/css" href="/static/content/bootstrap.min.css" />
                <link href="static/content/jumbotron.css" rel="stylesheet" />
                <link rel="stylesheet" type="text/css" href="/static/content/site.css" />
                <script src="/static/scripts/modernizr-2.6.2.js"></script>
                <script src="/static/scripts/jquery-1.10.2.min.js"></script>
                <script src="/static/scripts/bootstrap.min.js"></script>
                <script src="/static/scripts/respond.min.js"></script>
                <script src="/static/scripts/mindmup-editabletable.js"></script>
            </head>
            <body>
            %s          
            </body>
            </html>'''
    def f0(f):
        def f1(*a,**b):          
            return html%(title,f(*a,**b))
        return f1
    return f0
# Bodyデコレータ (Bootstrap4)
def Body():
    def f0(f):
        def f1(*a,**b):
            return '<div class="container body-content">%s</div>'%f(*a,**b)
        return f1
    return f0

@route('/')
@Html('Hello')
@Body()
def Home():
    return "<h1>Hello World</h1>"
#faviconの読み込み    
@route('/favicon.ico')
def favcon():
    return static_file('favicon.ico', root='./static')
#staic ファイルの読み込み
@route('/static/<filepath:path>')
def server_static(filepath):
    return static_file(filepath, root='./static')
#web server のhost portの設定
HOST,PORT='localhost',8080
if __name__ =='__main__':
    run(host=HOST,port=PORT)


/staticの下にbootstrapとjsのファイルを用意してください。

/static
│  favicon.ico
├─content
│      bootstrap-grid.css
│      bootstrap-grid.css.map
│      bootstrap-grid.min.css
│      bootstrap-grid.min.css.map
│      bootstrap-reboot.css
│      bootstrap-reboot.css.map
│      bootstrap-reboot.min.css
│      bootstrap-reboot.min.css.map
│      bootstrap.css
│      bootstrap.css.map
│      bootstrap.min.css
│      bootstrap.min.css.map
│      jumbotron.css
│      site.css
│
└─scripts
        bootstrap.bundle.js
        bootstrap.bundle.js.map
        bootstrap.bundle.min.js
        bootstrap.bundle.min.js.map
        bootstrap.js
        bootstrap.js.map
        bootstrap.min.js
        bootstrap.min.js.map
        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
        mindmup-editabletable.js
        modernizr-2.6.2.js
        respond.js
        respond.min.js
        _references.js

http://localhost:8080をアクセスすると下記のようなhtmlを作成する。

result.html
<!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>Hello</title>
        <link rel="stylesheet" type="text/css" href="/static/content/bootstrap.min.css" />
        <link href="static/content/jumbotron.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="/static/content/site.css" />
        <script src="/static/scripts/modernizr-2.6.2.js"></script>
        <script src="/static/scripts/jquery-1.10.2.min.js"></script>
        <script src="/static/scripts/bootstrap.min.js"></script>
        <script src="/static/scripts/respond.min.js"></script>
        <script src="/static/scripts/mindmup-editabletable.js"></script>
    </head>
    <body>
    <div class="container body-content"><h1>Hello World</h1></div>          
    </body>
    </html>
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away