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

在现今国产化浪潮的驱动下，跨平台大概缩小范围说基于国产化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()
7. login.create_page()  # 登录页面
9. # 使用APIRouter路由处理，每个模块独立一个路由
10. # 参考文档： https://nicegui.io/documentation/page#modularize_with_apirouter
11. app.include_router(example.router)
12. app.include_router(customer.router)

复制代码

这样我们把Home页面、Login页面路由、其他页面路由都一并处置惩罚好，我们还可以优化一下，把路由放在一个独立的文件如router.api中实现同一管理页面的路由处置惩罚。

1. #router.py
3. from nicegui import app, ui
4. import pages.example as example
5. import pages.home as home
6. import pages.customer as customer
7. import pages.login as login
9. # 使用APIRouter路由处理，每个模块独立一个路由
10. # 参考文档： https://nicegui.io/documentation/page#modularize_with_apirouter
11. def init_routes():
12.     """初始化系统的路由"""
13.     app.include_router(home.router)  # 首页显示
14.     app.include_router(login.router)  # 登录页面
15.     app.include_router(example.router)  # 示例页面
16.     app.include_router(customer.router)  # 客户页面
18.     # ............其他页面

复制代码

同一处置惩罚路由信息后，那么main.py的代码就可以优化如下所示。

1. from nicegui import app, ui, language
2. import router as router
3. from auth_middleware import AuthMiddleware
5. router.init_routes()  # 初始化路由
6. app.add_middleware(AuthMiddleware)  # 自定义中间件,处理登录验证
7. app.add_static_files("/public", "public")  # 添加静态文件目录
9. # 启动运行，并设置全局语言配置为中文
10. ui.run(
11.     title="企业信息化平台-广州爱奇迪软件科技有限公司",
12.     language="zh-CN",
13.     storage_secret="THIS_NEEDS_TO_BE_CHANGED",
14. )

复制代码

通过直接调用 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")
6. tabledata = [
7.     {"id": 1, "name": "Oli Bob", "age": "12", "col": "red", "dob": ""},
8.     {"id": 2, "name": "Mary May", "age": "1", "col": "blue", "dob": "14/05/1982"}
9.    ]
10. table_config = {
11.     "height": 205,
12.     "layout": "fitDataFill",
13.     "pagination": "local",
14.     "paginationSize": 10,
15.     "movableColumns": True,
16.     "resizableRows": True,
17.     "data": tabledata,
18.     "columns": [
19.         {"title": "Name", "field": "name", "width": 150, "headerFilter": "input"},
20.         {"title": "Age", "field": "age", "hozAlign": "left", "formatter": "progress"},
21.         {"title": "Favourite Color", "field": "col"},
22.         {
23.             "title": "Date Of Birth",
24.             "field": "dob",
25.             "sorter": "date",
26.             "hozAlign": "center",
27.         },
28.     ],
29. }
31. table = tabulator(table_config).on_event("rowClick", lambda e: ui.notify(e))

复制代码

界面结果如下：

汉化按钮后，界面结果如下所示。

 根据需要我们可以整合更多的相干界面下结果，这样可以跨平台的运行在各个应用上，非常方便。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。