Python Bottle Hello World Bootstrap4

휴대전화에서 여러 가지를 위한 Hello World



(소요시간 30분)



Stupid Phone 용 CSS를 가능한 한 많이 쓰지 않으려면 기본


  • 디렉토리 배치
  • 프로그램 소스 아래에 static/views 폴더를 배치합니다.
  • static 폴더에는 bootstrap4 에서 다운로드한 js/css 파일을 넣는다.
  • favicon.png/favicon.ico는 정적 바로 아래에 배치됩니다
  • Stupid Phone을 시작 ICON으로 만들기 위해 필요
  • views의 아래에는 layout.tpl/index.tpl을 배치한다.
  • BottleHelloWorld.py
    ├─static
    │  │  favicon.ico
    │  │  favicon.png
    │  ├─css
    │  │      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
    │  └─js
    │          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-3.3.1.min.js
    │          popper.min.js
    └─views
        │  index.tpl
        │  layout.tpl
    

    BottleHelloWorld.py
    from bottle import *
    @route('/')
    @view('index.tpl')
    def home():
        return dict()
    @route('/static/<file_path:path>')
    def static(file_path):
        return static_file(file_path, root='./static')
    run(host="192.168.1.10",port=911,debug=True)
    

    index.tpl
    % rebase('layout.tpl', title='Home Page')
    <div class="jumbotron"><h1>Hello World</h1></div>
    

    {{titl}}에 위에서 지정한 홈페이지가 삽입됨
    {{!base}}에 index.tpl이 삽입됨
    {{}}로 둘러싸인 동안 변수로 처리되어 html이 생성됩니다.

    layout.tpl
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ title }}</title>
        <link href="/static/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
        <link rel="apple-touch-icon" href="/static/favicon.png" />
        <script src="/static/js/jquery-3.3.1.min.js"></script>
        <script src="/static/js/bootstrap.min.js"></script>
        <script src="/static/js/popper.min.js"></script>
    </head>
    <body>
    <div class="container">
    {{!base}}
    </div>
    </body>
    </html>
    

    "Stupid Phone"에서 http://192.168.1.10:911 액세스합니다.

    좋은 웹페이지 즐겨찾기