S'il s'agit d'un grand site, il peut être nécessaire de le décomposer en différents fichiers, mais cette fois il s'agit d'un petit site, il n'est donc pas nécessaire de le séparer en un seul fichier.

Les contrôleurs pour toutes les routes et tout le code qui se connecte à la base de données peuvent être trouvés ici.

majutsu.py

import responder,sqlite3,urllib,os

#Fichier pour enregistrer les données
dbfile = 'dedicatus545.db'
#Objet API
api = responder.API(templates_dir='.', #Dossier de modèles
                    static_dir='librorum', #Dossier de fichiers statique
                    static_route='/librorum') #Racine de fichier statique

#Sommaire
@api.route('/')
def index(req,resp):
    with sqlite3.connect(dbfile) as conn:
        sql_select = '''
            select * from kyara
        ''' #Afficher les données de tous les caractères
        kyara = conn.execute(sql_select).fetchall()
        resp.html = api.template('index.html',kyara=kyara)

#Chaque page d'affichage et d'édition de données
@api.route('/toaru/{namae}')
def select(req,resp,*,namae):
    with sqlite3.connect(dbfile) as conn:
        sql_select = '''
            select * from kyara where namae==?
        ''' #Prenez les données du personnage avec ce nom
        kyara = conn.execute(sql_select,[namae]).fetchone()
        if(kyara):
            resp.html = api.template('toaru.html',namae=kyara[0],lv=kyara[1])
        else:
            print('Cette page n'existe pas')
            api.redirect(resp,'/no') #Si un nom inexistant est entré, accédez à la page d'erreur
    
#Page si quelque chose ne va pas
@api.route('/no')
def no(req,resp):
    resp.html = api.template('no.html')

#Après avoir ajouté des données
@api.route('/insert')
async def insert(req,resp):
    try:
        with sqlite3.connect(dbfile) as conn:
            param = await req.media() #Obtenir des données du formulaire
            namae = param['namae']
            lv = param['lv']
            sql_insert = '''
                insert into kyara (namae,lv)
                values (?,?)
            ''' #Ajouter de nouvelles données
            conn.execute(sql_insert,(namae,lv))
        api.redirect(resp,'/') #Revenir à la page d'index
    except Exception as err:
        print(f'Error: {type(err)} {err}')
        api.redirect(resp,'/no') #Si quelque chose ne va pas

#Après la mise à jour des données
@api.route('/update/{namae0}')
async def update(req,resp,*,namae0):
    try:
        with sqlite3.connect(dbfile) as conn:
            param = await req.media() #Obtenir des données du formulaire
            namae = param['namae']
            lv = param['lv']
            
            sql_update = '''
                update kyara set namae=?,lv=? where namae==?
            ''' #Mise à jour des données
            conn.execute(sql_update,(namae,lv,namae0))
        #Revenir à la page d'affichage des données**Si vous n'échappez pas au nom ici, vous pouvez obtenir une erreur, donc urllib.parse.besoin d'un devis
        api.redirect(resp,f'/toaru/{urllib.parse.quote(namae)}')
    except Exception as err:
        print(f'Error: {type(err)} {err}')
        api.redirect(resp,'/no') #S'il y a quelque chose qui ne va pas

#Après avoir supprimé les données
@api.route('/delete/{namae}')
def delete(req,resp,*,namae):
    try:
        with sqlite3.connect(dbfile) as conn:
            sql_delete = '''
                delete from kyara where namae==?
            ''' #Suprimmer les données
            conn.execute(sql_delete,[namae])
        api.redirect(resp,'/') #Revenir à la page d'index
    except Exception as err:
        print(f'Error: {type(err)} {err}')
        api.redirect(resp,'/no') #Si quelque chose ne va pas

#Charger des données
@api.route('/download')
def download(req,resp):
    with sqlite3.connect(dbfile) as conn:
        #Données vers fichier JSON
        data = conn.execute('select * from kyara').fetchall()
        resp.media = [{'namae': d[0], 'lv': d[1]} for d in data]
        #Spécifiez dans l'en-tête pour créer la page de téléchargement du fichier
        resp.headers['Content-Disposition'] = 'attachment; filename=data.json'



if(__name__=='__main__'):
    #Créez une nouvelle table lorsque vous l'exécutez pour la première fois
    if(not os.path.exists(dbfile)):
        with sqlite3.connect(dbfile) as conn:
            sql_create = '''
                create table kyara (
                    namae text,
                    lv integer,
                    primary key (namae)
                )
            '''
            conn.execute(sql_create)
    
    #Démarrage du serveur
    api.run()

Il y a 7 itinéraires, mais j'utilise en fait le modèle

• '/'
• '/toaru/{namae}'
• '/no'

Seulement trois.

En plus de cela

• '/insert'
• '/update/{namae0}'
• '/delete/{namae}'

Ils interagissent avec la base de données et redirigent vers d'autres pages.

Les pages ** '/ insert' ** et ** '/ update / {namae0}' ** utilisent la fonction async car elles ont besoin de recevoir des données du formulaire et wait est utilisé.

Je viens d'apprendre l'async et j'attends en python récemment. J'ai lu divers articles de qiita et cela a été utile, je vais donc le présenter ici

• Asyncio Python à comprendre avec les sushis
• Traitement asynchrone en Python: référence inverse asyncio
• Python asyncio

Lors de l'utilisation de responder, même si nous n'écrivons pas async et attendons directement, il est très utile de comprendre le traitement asynchrone car il existe de nombreuses fonctions qui fonctionnent avec async et attendent dans responder en premier lieu.

Enfin, ** '/ download' ** est une page permettant de sauvegarder toutes les données de la base de données dans un fichier json.

La base de données est créée la première fois que vous exécutez le serveur. Après cela, un fichier contenant la base de données (ici nommé dedicatus545.db) apparaîtra.

L'objet responder.API est défini comme ceci

templates_dir = '.'
static_dir    = 'librorum'
static_route  = '/librorum'

templates_dir est le dossier avec les modèles. Par défaut, il se trouve dans un dossier appelé templates, mais cette fois nous n'utiliserons pas le dossier, alors spécifiez-le comme «.

static_dir est le dossier contenant les fichiers statiques. Le dossier par défaut est statique, mais ici il s'agit de "librorum".

static_route est la racine du fichier statique, qui par défaut est «/ static», mais devrait également être «/ librorum».

css

La décoration de site Web n'est pas le but principal de cette période, donc css assez approprié pour être un petit spectacle

librorum/prohibitorum.css

div,li,h3 {
    padding: 2px;
    font-size: 20px;
}
input {
    border: solid #194 2px;
    font-size: 19px;
}
form {
    margin: 3;
}

Exécution et résultats

Une fois le code prêt, il est temps d'exécuter le code .py du serveur.

python majutsu.py

Accédez ensuite à http://127.0.0.1:5042/ avec votre navigateur.

Ici, nous irons avec Firefox.

S'il n'y a pas d'erreur, vous devriez voir une page comme celle-ci.

Puisqu'il n'y a pas encore de données, ajoutons-les d'abord.

Entrez un nom et un niveau et cliquez sur le bouton Ajouter pour ajouter les données. Ajoutez-en un autre pour essayer.

Cliquez sur le lien "Télécharger" et les données seront téléchargées sous forme de fichier json.

Cependant, si cette méthode est utilisée, le kanji sera unicode comme celui-ci lors de la conversion en json.

[{"namae": "\u4e0a\u6761\u5f53\u9ebb", "lv": 0}, {"namae": "\u5fa1\u5742\u7f8e\u7434", "lv": 5}]

Comment éviter cela est décrit dans cet article https://qiita.com/nassy20/items/adc59c4b7abd202dda26

Cependant, même ainsi, quand je l'ai recherché avec Firefox, il est revenu correctement aux kanji, donc je pense que ça va cette fois.

Ensuite, si vous essayez de cliquer sur le bouton Ajouter sans remplir le formulaire, une erreur se produira et vous serez redirigé vers cette page.

La cause de l'erreur est que lors de l'utilisation de req.media () parce que le nom n'est pas entré, l'appel de param ['namae'] sans la touche'namae 'entraînera une erreur.

Il est préférable d'utiliser .get () pour éviter les erreurs, mais cette fois, il n'est pas nécessaire qu'il soit vide en premier lieu, vous pouvez donc le laisser tel quel ici.

Revenez à l'index, cliquez sur un nom et entrez le lien pour accéder à la page d'édition des données.

Lorsque j'essaye de vider le niveau et que je clique sur le bouton de mise à jour, une erreur apparaît et je reviens à la page no.

Si vous revenez à cette page, entrez de nouvelles données cette fois, et cliquez sur le bouton, les données seront mises à jour.

Lorsque vous revenez à l'index, vous pouvez confirmer que les données ont été correctement mises à jour.

Enfin, lorsque vous entrez à nouveau dans la page d'édition et cliquez sur le bouton Supprimer

Ces données disparaîtront.

Ceci termine le test de toutes les fonctions.

À la fin

C'est ainsi que le site Web a été créé avec responder et sqlite3.

Il s'agit peut-être d'un site Web simple et inutilisable, mais je pense qu'il peut être utilisé comme pratique de base pour créer un site à part entière.

Un exemple d'ajout de javascript, etc. pour créer SPA est écrit dans l'article suivant >> https://qiita.com/phyblas/items/f3f40df76f85d61d5286