这是我的第237篇原创文章。

一、引言

NiceGui 是一个轻量级的 Python 前端框架，旨在简化用户界面的创建。它侧重于提供简单、直观的界面，特别适用于小型项目和快速原型设计。

然而，NiceGui 并不是一个专为构建复杂项目而设计的框架。对于大型、复杂的项目，可能需要更强大的前端框架，例如 React、Vue.js 或 Angular。这些框架提供更多的功能、更好的组件化和更强大的状态管理，使得处理大规模应用变得更加容易。

二、实现过程

2.1 组件介绍

ui.card()：创建一个卡片（card）组件。卡片是一种常见的界面元素，用于包裹内容并提供视觉上的区分，通常用于显示相关的信息或功能。

ui.button():创建一个按钮组件，按钮是用户界面中常用的交互元素，用户可以点击按钮来触发特定的操作或事件。

ui.tooltip():创建一个工具提示（tooltip）组件，工具提示通常用于提供额外的信息或说明，当用户将鼠标悬停在特定元素上时显示。

ui.separator()：创建一个分隔符 (separator)。分隔符通常用于在用户界面中创建视觉上的分隔线或间隔，以帮助组织内容或增加可读性。

ui.row()：创建一个水平排列的行组件。通过调用 ui.row() 函数，可以将其他界面组件水平排列在同一行上，从而实现更灵活的布局和界面设计。

ui.aggrid()：用于创建一个 Ag-Grid 表格组件。Ag-Grid 是一个功能强大的 JavaScript 表格库，用于在 Web 应用程序中展示和处理大量数据。

ui.notify()：创建一个通知（notification）组件，通知通常用于向用户显示重要信息、警告或成功消息。

ui.label()：创建一个标签（label）组件，用于显示文本内容或信息。

ui.log()：创建一个日志（log）组件，用于显示应用程序的日志信息或其他文本输出。

ui.button()：创建一个按钮（button）组件，用户可以点击按钮执行特定的操作或触发事件。

ui.dialog()：创建一个对话框（dialog）组件，用于显示消息、警告或其他通知，并与用户进行交互。

2.2 示例代码

from nicegui import ui


def build_ui():
    global orgText, countText, grid
    orgText = ui.label(getOrgAndBranchText())
    countText = ui.label(getRepoCountText())

    tableData = getTableData()
    grid = ui.aggrid({
        'defaultColDef': {'flex': 1},
        'columnDefs': [
            {'headerName': 'ID', 'field': 'id', 'checkboxSelection': True, 'flex': 1},
            {'headerName': '仓库名', 'field': 'name', 'filter': 'agTextColumnFilter', 'floatingFilter': True, 'flex': 2},
            {'headerName': 'SPEC 版本', 'field': 'specVersion', 'filter': 'agTextColumnFilter', 'floatingFilter': True,
            'flex': 2},
            {'headerName': '上游版本', 'field': 'upstreamVersion', 'filter': 'agTextColumnFilter', 'floatingFilter': True,
            'flex': 2},
            {'headerName': '上游地址', 'field': 'upstreamURL', 'filter': 'agTextColumnFilter', 'floatingFilter': True,
            'flex': 4},
            {'headerName': '采集器', 'field': 'method', 'filter': 'agTextColumnFilter', 'floatingFilter': True, 'flex': 1},
            {'headerName': '上次更新', 'field': 'lastUpdate', 'filter': 'agTextColumnFilter', 'floatingFilter': True,
            'flex': 2},
        ],
        'rowData': tableData,
        'rowSelection': 'multiple',
    }).style('height: 600px')

    ui.separator()
    with ui.row():
        with ui.card():
            with ui.row():
                with ui.button('抓取数据索引', on_click=fetchDataList):
                    ui.tooltip('抓取当前组织下的仓库列表').classes('bg-grey text-body2')
                with ui.button('抓取 spec 文件', on_click=fetchSpecFile):
                    ui.tooltip('抓取当前数据库中所有包的 spec 文件').classes('bg-grey text-body2')
                with ui.button('解析 spec 文件', on_click=fetchRepoData):
                    ui.tooltip('解析 spec 文件中的上游信息、版本号').classes('bg-grey text-body2')

        with ui.card():
            with ui.row():
                with ui.button('抓取软件包上游数据', on_click=fetchUpstreamData).classes('bg-green'):
                    ui.tooltip('从上游抓取软件包的版本号').classes('bg-grey text-body2')
                with ui.button('搜索未知软件包', on_click=searchUnknownPackage).classes('bg-green'):
                    ui.tooltip('搜索未抓取到的软件的上游').classes('bg-grey text-body2')

        with ui.card():
            with ui.row():
                ui.button('导出 nvchecker TOML', on_click=exportNvchecker).classes('bg-teal')
                ui.button('导出 openEuler Advisor YAML', on_click=exportOpenEuler).classes('bg-teal')


        with ui.card():
            with ui.row():
                ui.button('刷新数据', on_click=updateUIText).classes('bg-grey')


def getOrgAndBranchText():
    pass

def getRepoCountText():
    pass

def getTableData():
    pass

def fetchDataList():
    pass

def fetchSpecFile():
    pass


def fetchRepoData():
    pass

def fetchUpstreamData():
    pass

def searchUnknownPackage():
    pass

def exportNvchecker():
    pass

def exportOpenEuler():
    pass

def updateUIText():
    pass

if __name__ in {"__main__", "__mp_main__"}:
    build_ui()
    ui.run(host="127.0.0.1", port=8081,
    title='Upstream-Observer GUI', favicon='', language='zh-CN')

三、结果

浏览器输入：127.0.0.1:8080

作者简介：

读研期间发表6篇SCI数据算法相关论文，目前在某研究院从事数据算法相关研究工作，结合自身科研实践经历不定期持续分享关于Python、数据分析、特征工程、机器学习、深度学习、人工智能系列基础知识与案例。致力于只做原创，以最简单的方式理解和学习，关注gzh：数据杂坛，获取数据和源码学习更多内容。

原文链接：

【Python程序开发系列】介绍一款轻量级高自由度web框架-NiceGUI