柠檬叔的博客

1、环境准备

mkdir LinkVault

cd .\LinkVault\
python -m venv venv
.\venv\Scripts\Activate.ps1

记得切到venv下

========================================

2、nicegui

https://nicegui.io/#installation

pip3 install nicegui

from nicegui import ui

ui.label('Hello NiceGUI!')

ui.run()

好嘞，准备工作就算做完了

========================================

3、实现具体逻辑

https://github.com/zauberzeug/nicegui/tree/main/examples/sqlite_database/

所以这个肯定是脱不开数据库了

行

先装一下依赖：

 pip3 install tortoise-orm

https://tortoise.github.io/

https://tortoise.github.io/fields.html

tortoise.fields.data.DatetimeField

from tortoise.models import Model
from tortoise import fields


class Vault(Model):
    id = fields.IntField(pk=True)
    name = fields.TextField()
    create_date = fields.DatetimeField(auto_now_add=True)
    update_date = fields.DatetimeField(auto_now=True)
    front_cover_image = fields.TextField()

还挺方便，我新建了一个文件叫models.py

然后定义了一个类

from tortoise import Tortoise, run_async

async def init():
    # Here we create a SQLite DB using file "db.sqlite3"
    #  also specify the app name of "models"
    #  which contain models from "app.models"
    await Tortoise.init(
        db_url='sqlite://db.sqlite3',
        modules={'models': ['models']}
    )
    # Generate the schema
    await Tortoise.generate_schemas()

# run_async is a helper function to run simple async Tortoise scripts.
run_async(init())

紧接着又新建了一个叫init_db.py的文件

里面的modules={'models': ['models']}这么写的

接着

python inti_db.py之后

就有了数据库结构

可以的

from tortoise import Tortoise, run_async
from models import Vault

async def test():
    await Tortoise.init(db_url='sqlite://db.sqlite3', modules={'models': ['models']})

    # Create instance by save
    vault = Vault(name='New Vault',front_cover_image='')
    await vault.save()

    # Or by .create()
    await vault.create(name='Another Vault',front_cover_image='')

    # Now search for a record
    tour = await Vault.filter(name__contains='Another').first()
    print(tour.name)

    await Tortoise.close_connections()

# run_async is a helper function to run simple async Tortoise scripts.
run_async(test())

OK的，这就可以了，列表名称，创建时间，保存时间，以及封面图片

================================================

4、移植示例程序到我的应用：

from typing import List

import models
from tortoise import Tortoise

from nicegui import app, ui

async def init_db() -> None:
    await Tortoise.init(db_url='sqlite://db.sqlite3', modules={'models': ['models']})

async def close_db() -> None:
    await Tortoise.close_connections()

app.on_startup(init_db)
app.on_shutdown(close_db)

@ui.refreshable
async def list_of_vaults() -> None:
    async def delete(vault: models.Vault) -> None:
        await vault.delete()
        list_of_vaults.refresh()

    vaults: List[models.Vault] = await models.Vault.all()
    print(vaults)
    for vault in reversed(vaults):
        with ui.card():
            with ui.row().classes('items-center'):
                ui.input('Name', on_change=vault.save) \
                    .bind_value(vault, 'name').on('blur', list_of_vaults.refresh)
                ui.input('front_cover_image', on_change=vault.save) \
                    .bind_value(vault, 'front_cover_image').on('blur', list_of_vaults.refresh).classes('w-20')
                ui.button(icon='delete', on_click=lambda u=vault: delete(u)).props('flat')


@ui.page('/')
async def index():
    async def create() -> None:
        await models.Vault.create(name=name.value, front_cover_image='')
        name.value = ''
        front_cover_image.value = None
        list_of_vaults.refresh()

    with ui.column().classes('mx-auto'):
        with ui.row().classes('w-full items-center px-4'):
            name = ui.input(label='Name')
            front_cover_image = ui.input(label='front_cover_image').classes('w-20')
            ui.button(on_click=create, icon='add').props('flat').classes('ml-auto')
        await list_of_vaults()

ui.run()

效果还不错

开始汉化

效果还行

把两个时间也显示出来

https://tortoise.github.io/query.html?h=filter

LinkVault 项目笔记