m5k1umn 发表于 2024-10-10 05:15:17

Python用20行代码就能实现美丽的网页界面？你确定不来瞧瞧


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span>在写一个网站<span style="color: black;">或</span>一个网页界面的时候，需要学习<span style="color: black;">非常多</span>东西，对小白<span style="color: black;">来讲</span>很困难！<span style="color: black;">例如</span>我要做一个简单的网页交互：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">要懂后端，<span style="color: black;">例如</span>Python里面的Django<span style="color: black;">或</span>Flask，<span style="color: black;">或</span>是Java里面的SpringBoot</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">要懂前端，<span style="color: black;">此刻</span>都叫大前端了(<span style="color: black;">由于</span>很<span style="color: black;">繁杂</span>)，<span style="color: black;">例如</span>前端的框架Vue/React, <span style="color: black;">而后</span>页面的美化框架Bootstrap ，还有html ,csss 和Javascript 三驾马车.</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">天啊，听听头都大呢！其实我就给老板做一个简单的交互的页面，<span style="color: black;">况且</span>我只会Python ,有<span style="color: black;">无</span>很简单的办法<span style="color: black;">能够</span>做到呢。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">今天<span style="color: black;">博主</span>在Github上逛的时候，找到一个非常酷的神器，名字叫remi ,<span style="color: black;">日前</span>收获了2300个赞。</strong></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/ea67c46a37744615abf200d02ac82e7f~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728744542&amp;x-signature=CqDjM3chzTX3BaRM2E%2FKBxYWK%2BA%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">star并不是<span style="color: black;">非常多</span>， <span style="color: black;">然则</span>这个库可是选入2018年的十大明星库 ，号<span style="color: black;">叫作</span>是一个独立的GUI库，<span style="color: black;">况且</span>最牛逼的<span style="color: black;">便是</span>这个库 竟然<span style="color: black;">少于</span> 100K ，<span style="color: black;">是不是</span>很神奇呢，<span style="color: black;">咱们</span><span style="color: black;">一块</span>来体验一下特性：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">跟其他GUI库区别？ Kivy，PyQT和PyGObject都需要主机操作系统的本机代码，这<span style="color: black;">寓意</span>着安装或编译大型依赖项。Remi只需要一个Web浏览器<span style="color: black;">就可</span><span style="color: black;">表示</span>您的GUI。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">我需要懂HTML吗？ 不，只需要<span style="color: black;">运用</span>Python进行编码。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">它是开源的吗？ 当然！Remi是<span style="color: black;">按照</span>Apache许可发布的。开源，免费！</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">我需要某种网络服务器吗？ 不，自带网络服务器。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">1、安装</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">怎样</span>安装呢，<span style="color: black;">由于</span>是Python 库，直接用pip <span style="color: black;">就可</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">pip install remi</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>是<span style="color: black;">无</span>网络的，<span style="color: black;">或</span>服务器跟外网不通的，<span style="color: black;">能够</span>离线安装。下载这个包，<span style="color: black;">而后</span>用install 安装</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">python setup.py install</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">2、快速体验</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span>来快速看一下，这个简单的Hello world网页。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/c9c93d63ff5045ba90afde1243709f2d~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728744542&amp;x-signature=NS8PhMGL2xsdfZO36rM2d8O48%2B0%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">这儿</span>面<span style="color: black;">包括</span>了一个 2个元素：</p>文本Hello world ；一个Press me的按钮；<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">点击这个按钮还会改变Hello world的文本内容，看点一下就变<span style="color: black;">成为了</span>Button pressed.</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/8fedc8419dd3492d9e1df88ae2bb2d79~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728744542&amp;x-signature=mJJau3se4l55en54z8W7bt1BsYo%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上面这个简单的效果，其实只用了20来行Python代码，都是原生的Python代码，<span style="color: black;">无</span>用一行HTML .</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span>来看一下源码：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/4becdc6ce1c949e58cdeb3c1bd0b0ecf~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728744542&amp;x-signature=nKsoKBRBHEudLJK%2FnBI663Vfd%2Fs%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">全部</span>代码的结构层次还很清晰的：</p><span style="color: black;">首要</span>声明一个MyApp类，这个类会继承母框架App里面的功能，<span style="color: black;">能够</span>认为是一个网页画布；<span style="color: black;">而后</span>在这个画布里面有3个函数：<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">init<span style="color: black;">重点</span>是做类的初始化工作；</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">main<span style="color: black;">重点</span>对这个画布布局进行设计，<span style="color: black;">包括</span>一个文本和一个按钮。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">on_button_pressed<span style="color: black;">重点</span>是控件的相应，点击触发函数</p>最后是start来<span style="color: black;">起步</span>这个类，就会生成一个本地的网站链接<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/ec5489caaa2044f5955edd7817154a1d~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728744542&amp;x-signature=CzFxNz28%2Bv%2BRU1zeDe1I%2BXAErs0%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">3、<span style="color: black;">更加多</span><span style="color: black;">繁杂</span>的网页元素</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">看完上面的设计是不是就觉得跟Python里面大名鼎鼎的tk库很<span style="color: black;">类似</span>啊，上面的只是开胃菜，这个remi还能<span style="color: black;">供给</span>更<span style="color: black;">繁杂</span>的gui界面元素。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/8693ecce18274152973ed0c5136db9b4~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728744542&amp;x-signature=DIBmiEy4bJVdtsyN1ujfqrgikT4%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上面的是一个完整的demo页面,基本上<span style="color: black;">平常</span>的控件元素的都<span style="color: black;">包括</span>了，<span style="color: black;">例如</span>有菜单栏，文本，按钮，单选框，进度栏，下拉框，表格，弹出框，按钮<span style="color: black;">选择</span>文件路径，文件树形结构，日期等几十种控件。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">有了这个神器，是不是<span style="color: black;">能够</span>告别Python里面的tk库，<span style="color: black;">亦</span><span style="color: black;">能够</span>省去学习HTML的时间，还等啥，赶紧下载尝鲜一下吧。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">对Python感兴趣<span style="color: black;">或</span>是正在学习的小伙伴，<span style="color: black;">能够</span>点赞关注<span style="color: black;">保藏</span>支持一波哦， <span style="color: black;">连续</span>更新中</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">原文链接：</p>https://blog.csdn.net/NNNJ9355/article/details/107319582




1fy07h 发表于 2024-11-13 16:24:37

回顾过去一年，是艰难的一年；展望未来，是辉煌的一年。

wrjc1hod 发表于 7 天前

你的言辞如同繁星闪烁，点亮了我心中的夜空。

b1gc8v 发表于 7 天前

感谢你的精彩评论，带给我新的思考角度。
页: [1]
查看完整版本: Python用20行代码就能实现美丽的网页界面？你确定不来瞧瞧