翼度科技»论坛 编程开发 python 查看内容

nicegui太香了,跨平台开发和跨平台运行--使用Python+nicegui实现系统布局

5

主题

5

帖子

15

积分

新手上路

Rank: 1

积分
15
在现今国产化浪潮的驱动下,跨平台或者缩小范围说基于国产化Linux或者基于国产鸿蒙系统的开发才是未来的趋势了,风口浪尖上,我们开发人员也只能顺势而为,本篇随笔介绍在Python开发中,使用使用Python+nicegui实现系统布局界面的开发。
1、Nicegui的介绍和应用需求

我们先来介绍一个比较新兴的一个界面组件 nicegui 的资源:
nicegui的官网:https://nicegui.io/documentation
Github地址:https://github.com/zauberzeug/nicegui
它是一个可以创建基于服务器端运行的BS前端,也可以是一个独立运行的程序,类似Electron(https://www.electronjs.org/) 的独立运行程序。根据编译的方式不同,生成不同的文件。
我在随笔《基于Python后端构建多种不同的系统终端界面研究》中大致介绍了一下该组件的使用效果,其实主要优势就是能够利用Python跨平台的开发和部署运行能力,并结合nicegui能够编译独立App或者桌面程序,或者基于服务端的BS管理系统,皆可以一气呵成,一套代码按需发布不同的UI即可。
另外朋友有需要,要我为其AI模块的中控系统做一套管理各个终端设备的终端,要求使用这个nicegui来实现。一个小盒子Orange Pi 跑ubuntu的设备,还很顺滑。

2、系统界面和布局和模块化页面处理

基于这样的需求,我们可以先做一套管理面板来实现一些功能入口,首先有一个登录的界面,然后一个布局界面进行处理即可.

 接着就是设计一个主要框架的布局页面,如下所示。
 
 

如果主体框架是模块的页面管理,那么剩下的就是我们根据不同的需求设计不同的页面,放置在目录下即可,根据需要添加所需的菜单。
例如,我们在main.py入口页面上,可以添加模块的路由处理,如下所示。
  1. # 首页显示
  2. @ui.page("/")
  3. def index_page() -> None:
  4.     with theme.frame("Homepage"):
  5.         home.content()
  6. login.create_page()  # 登录页面
  7. # 使用APIRouter路由处理,每个模块独立一个路由
  8. # 参考文档: https://nicegui.io/documentation/page#modularize_with_apirouter
  9. app.include_router(example.router)
  10. app.include_router(customer.router)
复制代码
这样我们把Home页面、Login页面路由、其他页面路由都一并处理好,我们还可以优化一下,把路由放在一个独立的文件如router.api中实现统一管理页面的路由处理。
  1. #router.py
  2. from nicegui import app, ui
  3. import pages.example as example
  4. import pages.home as home
  5. import pages.customer as customer
  6. import pages.login as login
  7. # 使用APIRouter路由处理,每个模块独立一个路由
  8. # 参考文档: https://nicegui.io/documentation/page#modularize_with_apirouter
  9. def init_routes():
  10.     """初始化系统的路由"""
  11.     app.include_router(home.router)  # 首页显示
  12.     app.include_router(login.router)  # 登录页面
  13.     app.include_router(example.router)  # 示例页面
  14.     app.include_router(customer.router)  # 客户页面
  15.     # ............其他页面
复制代码
统一处理路由信息后,那么main.py的代码就可以优化如下所示。
  1. from nicegui import app, ui, language
  2. import router as router
  3. from auth_middleware import AuthMiddleware
  4. router.init_routes()  # 初始化路由
  5. app.add_middleware(AuthMiddleware)  # 自定义中间件,处理登录验证
  6. app.add_static_files("/public", "public")  # 添加静态文件目录
  7. # 启动运行,并设置全局语言配置为中文
  8. ui.run(
  9.     title="企业信息化平台-广州爱奇迪软件科技有限公司",
  10.     language="zh-CN",
  11.     storage_secret="THIS_NEEDS_TO_BE_CHANGED",
  12. )
复制代码
通过直接调用 init_routes 来处理路由即可。
测试一个简单的表格查询页面处理,如下所示。

可以打开或者折叠行的定义信息。

  主要通过ui.table和slot来实现多种表格的处理效果。
  1.         # 表格
  2.         table = ui.table(
  3.             columns=columns,
  4.             rows=rows,
  5.             title="客户列表",
  6.             pagination=10,
  7.             row_key="name",
  8.             selection="single",
  9.             on_pagination_change=lambda e: ui.notify(e.value),
  10.         )
复制代码
折叠信息我们通过下面的Slot处理展示。
  1. table.add_slot(
  2.     "body",
  3.     r"""
  4.     <q-tr :props="props">
  5.         <q-td auto-width>
  6.             <q-btn size="sm" color="accent" round dense
  7.                 @click="props.expand = !props.expand"
  8.                 :icon="props.expand ? 'remove' : 'add'" />
  9.         </q-td>
  10.         <q-td v-for="col in props.cols" :key="col.name" :props="props">
  11.             {{ col.value }}
  12.         </q-td>
  13.     </q-tr>
  14.     <q-tr v-show="props.expand" :props="props">
  15.         <q-td colspan="100%">
  16.             
  17.                 {{col.label}}:  {{col.value}}
  18.             
  19.         </q-td>
  20.     </q-tr>
  21. """,
  22. )
复制代码
我们也可以采用 nicegui_tabulator 第三方组件来丰富表格的处理效果。
Githhub地址:https://github.com/CrystalWindSnake/nicegui-tabulator
它是使用niceui来改造过著名表格组件:https://github.com/olifolkerd/tabulator,相关使用参数等也可以参考下官网文档:http://tabulator.info
案例代码:
  1. from nicegui_tabulator import tabulator, use_theme
  2. from nicegui import ui
  3. # use the theme for all clients
  4. # use_theme("bootstrap4")
  5. tabledata = [
  6.     {"id": 1, "name": "Oli Bob", "age": "12", "col": "red", "dob": ""},
  7.     {"id": 2, "name": "Mary May", "age": "1", "col": "blue", "dob": "14/05/1982"}
  8.    ]
  9. table_config = {
  10.     "height": 205,
  11.     "layout": "fitDataFill",
  12.     "pagination": "local",
  13.     "paginationSize": 10,
  14.     "movableColumns": True,
  15.     "resizableRows": True,
  16.     "data": tabledata,
  17.     "columns": [
  18.         {"title": "Name", "field": "name", "width": 150, "headerFilter": "input"},
  19.         {"title": "Age", "field": "age", "hozAlign": "left", "formatter": "progress"},
  20.         {"title": "Favourite Color", "field": "col"},
  21.         {
  22.             "title": "Date Of Birth",
  23.             "field": "dob",
  24.             "sorter": "date",
  25.             "hozAlign": "center",
  26.         },
  27.     ],
  28. }
  29. table = tabulator(table_config).on_event("rowClick", lambda e: ui.notify(e))
复制代码
界面效果如下:

汉化按钮后,界面效果如下所示。

另外,nicegui还集成了另一款表格组件aggrid,它的官网地址 : https://www.ag-grid.com/,效果也是非常不错。
我们如果仅仅是查看nicegui中的使用,可以查看地址:https://nicegui.io/documentation/aggrid
我们来看看它的效果:

 实例代码如下:
  1. # ag grid
  2. columns_agrid = [
  3.     {
  4.         "headerName": "姓名",
  5.         "field": "name",
  6.         "checkboxSelection": True,
  7.         "maxWidth": 120,
  8.     },
  9.     {
  10.         "headerName": "年龄",
  11.         "field": "age",
  12.         "cellClassRules": {
  13.             "bg-red-300": "x < 21",
  14.             "bg-green-300": "x >= 21",
  15.         },
  16.         "filter": "agNumberColumnFilter",
  17.         "floatingFilter": True,
  18.     },
  19.     {
  20.         "headerName": "地址",
  21.         "field": "address",
  22.     },
  23.     {
  24.         "headerName": "电话",
  25.         "field": "phone",
  26.     },
  27.     {
  28.         "headerName": "电子邮箱",
  29.         "field": "email",
  30.     },
  31.     {
  32.         "headerName": "客户链接",
  33.         "field": "url",
  34.     },
  35. ]
  36. # 中文本地化配置
  37. from utils.ag_locale_cn import AG_GRID_LOCALE_CN
  38. grid = ui.aggrid(
  39.     {
  40.         "defaultColDef": {"flex": 1},
  41.         "columnDefs": columns_agrid,
  42.         "rowData": rows,
  43.         "rowSelection": "multiple",
  44.         "pagination": True,
  45.         "paginationPageSize": 10,
  46.         "suppressRowClickSelection": True,
  47.         "paginationPageSizeSelector": [3, 6, 8, 10],
  48.         "localeText": AG_GRID_LOCALE_CN,  # 使用中文本地化
  49.         "headerHeight": 40,
  50.         "rowHeight": 30,
  51.         ":getRowId": "(params) => params.data.name",
  52.     }
  53. ).classes("h-full")
  54. grid.on(
  55.     "cellClicked", lambda event: ui.notify(f'Cell value: {event.args["value"]}')
  56. )
复制代码
总之,使用nicegui还是非常方便的, 根据需要我们可以整合更多的相关界面下效果,这样可以跨平台的运行在各个应用上,非常方便。

来源:https://www.cnblogs.com/wuhuacong/p/18463875
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复 使用道具