プログラマにとっていろんな言語使いながら仕事するのは、負担が多いし、嫌いである。
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の中身だけを書く。
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>