这是我的第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、机器学习、深度学习、人工智能系列基础知识与应用案例。致力于只做原创，以最简单的方式理解和学习，关注我一起交流成长。需要数据集和源码的小伙伴可以关注底部公众号添加作者微信。
