Python不错,但前端不行,照样可以做漂亮的WEB界面

后端程序员做前端

If you are good at Python but have only a basic understanding of JavaScript and HTML, and you need to create a web GUI application for projects involving AI, data analysis, or even comprehensive web software, it is recommended to use NiceGui. It manages the web development details, letting you focus on Python code for diverse applications, including robotics, IoT solutions, smart home automation, and machine learning.
如果您擅长 Python 但对 JavaScript 和 HTML 只有基本了解,并且需要为涉及人工智能、数据分析甚至综合性网络软件的项目创建 Web GUI 应用程序,建议使用 NiceGui。它能处理网络开发的细节,让您可以专注于为各种应用编写 Python 代码,包括机器人技术、物联网解决方案、智能家居自动化和机器学习。

NiceGUI极简入门程序

from nicegui import ui

ui.label('欢迎使用 NiceGUI')
name_input = ui.input('请输入您的姓名')
ui.button('打招呼', on_click=lambda: ui.notify(f'你好, {name_input.value}!'))

ui.run()

逐行解释

第1行:导入库

from nicegui import ui
  • 作用:从NiceGUI库中导入核心的ui模块
  • 说明ui模块包含了所有创建Web界面所需的组件(按钮、输入框、标签等)

第2行:创建文本标签

ui.label('欢迎使用 NiceGUI')
  • ui.label():创建文本标签组件的方法
  • '欢迎使用 NiceGUI':标签显示的文本内容
  • 作用:在网页上显示静态文本,用于展示信息或标题
  • 效果:浏览器中会显示"欢迎使用 NiceGUI"这段文字

第3行:创建输入框

name_input = ui.input('请输入您的姓名')
  • ui.input():创建输入框组件的方法
  • '请输入您的姓名':输入框的占位符提示文本
  • name_input:变量名,用于存储输入框对象
  • 作用:创建一个用户可以输入文本的文本框
  • 特点:用户可以在网页中输入任意文本内容

第4行:创建按钮并设置点击事件

ui.button('打招呼', on_click=lambda: ui.notify(f'你好, {name_input.value}!'))
  • ui.button():创建按钮组件的方法
  • '打招呼':按钮上显示的文本
  • on_click=:按钮的点击事件处理器参数
  • lambda::创建匿名函数,简化代码
  • ui.notify():显示通知消息的方法
  • f'你好, {name_input.value}!':格式化字符串,获取输入框的值
  • name_input.value:获取输入框当前输入的文本
  • 作用
    1. 创建一个"打招呼"按钮
    2. 当按钮被点击时,显示包含用户姓名的通知

第5行:启动Web应用

ui.run()
  • ui.run():启动NiceGUI Web服务器的方法
  • 作用
    1. 启动一个本地Web服务器(默认地址:http://localhost:8080
    2. 将前面定义的组件转换为HTML/CSS/JavaScript
    3. 开始监听浏览器请求
  • 效果:在浏览器中打开http://localhost:8080即可看到创建的界面

程序运行流程:

  1. 导入NiceGUI库
  2. 创建标签显示欢迎信息
  3. 创建输入框让用户输入姓名
  4. 创建按钮,点击时获取输入框内容并显示通知
  5. 启动Web服务器,在浏览器中打开应用

三个组件的总结:

  1. 标签 (Label) - 显示静态信息
  2. 输入框 (Input) - 收集用户输入
  3. 按钮 (Button) - 触发交互事件

程序运行界面

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值