Bottle Pug dans Visual Studio 2019

J'ai utilisé Pug (Jade?) Dans Node.js pour générer du HTML, utilisons donc Pug dans une bouteille python.

Efficace pour la génération html ???

image.png

Se préparer à utiliser carlin

image.png

image.png

Pour référence, requirements.txt ressemble à ceci

requirements.txt


bottle==0.12.18
bottle-pypugjs==0.1.1.post6
chardet==3.0.4
pip==19.0.3
pypugjs==5.8.1
setuptools==40.8.0
six==1.13.0

Création d'index.pug

index.pug


doctype html
html(lang="ja")
  head
    title {{title}}
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css",integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" ,crossorigin="anonymous")
    script(src="https://code.jquery.com/jquery-3.3.1.slim.min.js", integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo", crossorigin="anonymous")
    script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1",crossorigin="anonymous")
    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js", integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM",crossorigin="anonymous") 
  body
   style.
    .bsz {
        width: 137px;
        height: 70px;
        font-size: small;
        margin: 2px !important;
    }
   .container 
    .jumbotron
     h1.display-3 {{title}}
    - colors='primary,secondary,success,danger,warning,info,light,dark'.split(',')
    - for i,x in enumerate(colors)
     - cx="bsz btn m-2 btn-"+x;
     button(class=cx,id='sw#{i}') SW#{i}
  script.
   $(function(){
     $('.btn').click(function(){
     var id=$(this).attr('id');
     alert("id="+id);
     });
   });

Placez index.pug dans le dossier views

Gestion des variables pour carlin.

La chaîne de caractères de l'application. Mettez entre parenthèses comme {{title}}. Les scripts dans pub peuvent être entrés avec python pour le modèle après-. Les variables utilisées dans pug représentent i dans # {i}.

- colors='primary,secondary,success,danger,warning,info,light,dark'.split(',')
    - for i,x in enumerate(colors)
     - cx="bsz btn m-2 btn-"+x;
     button(class=cx,id='sw#{i}') SW#{i}

app.py


from bottle import *
from datetime import datetime
from bottle.ext.pypugjs import template, view, Plugin
@route('/')
@route('/home')
@view('index.pug')
def home():
    """Renders the home page."""
    return dict(
        year=datetime.now().year,title="Pug World"
    )
HOST,PORT='0.0.0.0',8080
run(server='wsgiref', host=HOST, port=PORT)

Résultat de sortie image.png

HTML généré

pugout.html



<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>None</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </head>
  <body>
    <style>.bsz {
    width: 137px;
    height: 70px;
    font-size: small;
    margin: 2px !important;
}
    </style>
    <div class="container">
      <div class="jumbotron">
        <h1 class="display-3">Pug World</h1>
      </div>
      <button id="sw0" class="bsz btn m-2 btn-primary">SW0</button>
      <button id="sw1" class="bsz btn m-2 btn-secondary">SW1</button>
      <button id="sw2" class="bsz btn m-2 btn-success">SW2</button>
      <button id="sw3" class="bsz btn m-2 btn-danger">SW3</button>
      <button id="sw4" class="bsz btn m-2 btn-warning">SW4</button>
      <button id="sw5" class="bsz btn m-2 btn-info">SW5</button>
      <button id="sw6" class="bsz btn m-2 btn-light">SW6</button>
      <button id="sw7" class="bsz btn m-2 btn-dark">SW7</button>
    </div>
  </body>
  <script>$(function(){
  $('.btn').click(function(){
  var id=$(this).attr('id');
  alert("id="+id);
  });
});
  </script>
</html>

Recommended Posts

Bottle Pug dans Visual Studio 2019
Installez numpy dans Visual Studio 2019
Développement Python avec Visual Studio 2017
Développement Python avec Visual Studio
Débogage à distance dans Visual Studio (Linux)
Exécutez Python en C ++ sur Visual Studio 2017
Conseils lorsque les amateurs utilisent Flask dans Visual Studio
Exécutez Python YOLOv3 en C ++ sur Visual Studio 2017
Heure à laquelle le terminal disparaît dans Visual Studio Code
Charges de travail de science des données et RTVS dans Visual Studio 2017
Paramètres de codage Python avec Visual Studio Code
Traduire de Visual Studio 2017 vers Python (API Microsoft Translator Text)
Développement d'applications pour tweeter en Python à partir de Visual Studio 2017
Comment installer Google Test / Google Mock dans Visual Studio 2019
Jusqu'à ce que vous exécutiez le serveur Django avec Visual Studio Code
Sortie japonaise lors de l'utilisation de python dans Visual Studio
Développement du kit SDK AWS pour Python (Boto3) dans Visual Studio 2017
Comment déboguer une bibliothèque Python standard dans Visual Studio
Faites quelque chose comme un interpréteur Python avec Visual Studio Code
Débogage à distance avec Visual Studio 2017
Une note à ceux qui utilisent Python dans Visual Studio (moi)
Visual Studio Code peut être bon
Comment masquer l'invite de commande lors de l'exécution de python dans Visual Studio 2015