使用pynecone开发python web应用

news2025/1/21 12:16:19

环境

•windows 10 64bit•python 3.8.15•pynecone 0.1.14

简介

Pynecone 是一个基于纯 python 的用于开发 web app 的开源框架,它依赖于 nodejs,不过不需要另外编写前端代码,这对于没有接触过前端的朋友是非常友好的。

安装

第一步,安装 nodejs,来到官网 https://nodejs.org/en/,下载 LTS 版本,目前最新的是 18.12.1 LTS

74687dbd57950cc54a54df1a91f5e64e.png

文件下载后,双击进行傻瓜式安装即可

b973e4573ed7cb468e0a2dde1ea5d588.png

59be9551bef9f777a1e0647bccf03a48.png

第二步,安装 pynecone,使用 pip 进行

pip install -U pynecone-io

测试

安装完成后,我们来到桌面,创建一个项目

cd ~/Desktop
mkdir pc_app
pc init

1e5c91b2f1096635b65f7f7000b3f33f.png

然后,以管理员权限打开 powershell,执行 pc run

e9846c1fb48c9386ea9113b5cd6408dc.png

接着,来到浏览器,输入地址 http://localhost:3000

6c6cc8661aa9142dcc8426058abdf319.png

可以看到,默认的页面是长这个样子的,页面中也提示,修改文件 pc_app/pc_app.py 即可改变页面,也就是说不需要去写 htmljavascript 和 css 就可以更改页面了

如果碰到 pc run 中报错

Error: Multiple children were passed to <Link> with `href` of `one_value` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children

就需要升级下 pynecone-io,详情可以看看项目中的 issue,见文末的链接

样例解析

回到上面的例子,看看文件 pc_app/pc_app.py 文件中的代码

class State(pc.State):
    """The app state."""


    pass

在 pynecone 中,state 定义了应用中的所有变量(这里叫 vars),这些变量都可以被 state 中的方法改变,这些方法叫做事件处理器(event handler),本例中并没有涉及,可以看下面这个示例,有2个事件处理器,increment 和 decrement

class State(pc.State):
    count: int = 0


    def increment(self):
    self.count += 1


    def decrement(self):
        self.count -= 1

接下来的 index 方法负责前端页面的显示,也是需要重点关注的部分

def index():
    return pc.center(
        pc.vstack(
            pc.heading("Welcome to Pynecone!", font_size="2em"),
            pc.box("Get started by editing ", pc.code(filename, font_size="1em")),
            pc.link(
                "Check out our docs!",
                href=docs_url,
                border="0.1em solid",
                padding="0.5em",
                border_radius="0.5em",
                _hover={
                    "color": "rgb(107,99,246)",
                },
            ),
            spacing="1.5em",
            font_size="2em",
        ),
        padding_top="10%",
    )

在 pynecone 中,有50多个组件(component)可以使用,如常见的按钮 buttonboxheadingslider 等等,具体可以参考这个链接 https://pynecone.io/docs/library。在本例中使用了标题 headingbox 和超链接 link,这3个组件被装在了 vstack 里,也就是垂直排列,而且是居中的(pc.center)。各组件的样式,都可以通过对应方法中的参数进行调整。

组件可以引用应用中的变量,这里看个 button 的例子

pc.button(
    "Decrement",
    color_scheme="red",
    border_radius="1em",
    on_click=State.decrement,
),

on_click 中跟上的是事件处理器 decrement,也就是当按钮被点击一次,count 的值就减1

当页面写好之后,就需要设置路由了(Routing)

# 初始化app
app = pc.App(state=State)


# 设置应用的根URl
app.add_page(index)

如果要添加多个页面,在 add_page 时,可以跟上参数 route,比如

app.add_page(second_page, route="/demo")

访问的 url 就变成了 http://localhost:3000/demo

最后一步就是启动服务了,在 pynecone 中叫 compile

app.compile()

就这样,一个简单的 web 项目就完成了,没有写一点前端相关的代码

项目中还有个重要的配置文件,就是 pcconfig.py,比如要更改下默认的端口,可以这样

00b97c629b7550e065d880a596519ebc.png

继而访问的 url 就变成了 http://localhost:5000 了

46c27fb0881480891dfb141c61323d78.png

另外官方提供了另一示例仓库,里面包含了很多类似的工程,非常值得学习借鉴,链接是 https://github.com/pynecone-io/pynecone-examples

参考资料

•https://pynecone.io/•https://github.com/pynecone-io/pynecone•https://github.com/pynecone-io/pynecone-examples•https://github.com/pynecone-io/pynecone/issues/224•https://github.com/pynecone-io/pynecone/issues/113

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408556.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue项目常见的错误以及解决办法

错误分类 vue项目中遇到的问题大体上分为两类&#xff1a;一类是基础的语法错误&#xff0c;另一类就是其它错误 这里简单分享以下我在项目中遇到的错误和解决办法&#xff0c;如果你也有&#xff0c;希望对你会有帮助 GET http://dida100.com:8888/api/cart 401 (Unauthoriz…

【前端修炼场】 — HTML常用的标志语言

此文为【前端修炼场】第三篇&#xff0c;上一篇文章链接&#xff1a;上一篇 文章目录前言标志语言基本结构介绍声明介绍标签修饰编码形式常用HTML标签标题标签段落标签换行标识水平线标识加粗标识倾斜标识删除线标识下划线标识上标 / 下标标识总结前言 之前我们使用过的那些标…

React 面向组件编程(上)

目录前言&#xff1a;一、组件的基本理解和使用1. 函数式组件2. 类式组件3. 注意事项4. 渲染函数式组件标签的基本流程5. 渲染类组件标签的基本流程二、组件三大核心属性 1&#xff1a;state1. 代码示例2. 效果展示3. 注意4. 设置状态:setState三、 组件三大核心属性 2&#xf…

小程序问题:封装公共组件的onLoad方法不生效

素材编辑 | 宋大狮 排版运营 | 小唐狮 ONE 问题描述 因为许久没有接触小程序项目&#xff0c;今天在做小程序项目时&#xff0c;为了节省时间&#xff0c;将要修改的页面组件直接拿出来封装成了公共组件&#xff0c;同时也没多想就直接使用了。于是就出现了页面数据不能加载的…

模板字符串基本使用

模板字符串是ES6添加的一个新的字符串编写形式。 1.【模板字符串】之拼接 在ES6之前&#xff0c;如果我们想要将字符串和一些动态的变量拼接到一起&#xff0c;是很麻烦的。 const name "aaa" const age 18console.log("my name is "name".Im &q…

三个案例掌握this.$nextTick()方法的使用/Vue中的$nextTick()

this.$nextTick() 解释为在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法&#xff0c;获取更新后的DOM. 也就是说&#xff0c;当dom元素发生改变&#xff0c;重新渲染dom树后&#xff0c;再执行vue.$nextTick()里面的内容。 其实用方法一般为 this.$n…

讲讲vue3下会造成响应式丢失的情况

题引&#xff1a; 在我们从vue2过渡到vue3的时候&#xff0c;对于数据响应式的变化其实是懵懵懂懂的。从以往直接在data函数里面定义变量到每一次都要使用ref/reactive时&#xff0c;是有些不适应的。但问题不大&#xff0c;毕竟在大前端时代中&#xff0c;如果不及时跟上时代…

TS中快速定义一个对象数组以及处理async await的异常

定义一个对象数组&#xff08;即数组成员为对象&#xff0c;对象的属性为我们所约束&#xff09; 方法一&#xff1a;接口字面量形式 export type Resource {_id: string,personID: {_id: stringage: stringidentifier: stringname: stringnation: stringgrade: stringscheme…

contentEditable属性

前言 我们最常用的输入文本内容便是input与textarea&#xff0c;但是有一个属性&#xff0c;可以让我们在很多标签中&#xff0c;如div,table,p,span,body等&#xff0c;可以像input输入框一样&#xff0c;实现文本编辑&#xff0c;这便是contentEditable属性 contentEditabl…

【vue2】近期bug收集与整理01

&#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;记录博主在vue2中遇到过的坑&#xff0c;本文是博主的学习使用总结 目录 1登陆token的问…

【学姐面试宝典】前端基础篇Ⅴ——JS深浅拷贝、箭头函数、事件监听等

前言 博主主页&#x1f449;&#x1f3fb;蜡笔雏田学代码 专栏链接&#x1f449;&#x1f3fb;【前端面试专栏】 今天继续学习前端面试题相关的知识&#xff01; 感兴趣的小伙伴一起来看看吧~&#x1f91e; 文章目录什么是事件监听事件委托以及冒泡原理介绍一下 promise&#x…

uniapp 小程序嵌套H5开发总结

项目需求是在uniapp小程序项目中嵌套H5页面&#xff0c;H5返回小程序需要传值给小程序进行通信。 好,百度一查确实可以实现 用的uniapp提供的web-view&#xff08;https://uniapp.dcloud.io/component/web-view.html#web-view经验证实&#xff0c;做功能之前先看官网&#xff…

一天时间迅速准备前端面试|JavaScript——异步进阶

&#x1f308;本系列文章是博主精心整理的面试热点问题&#xff0c;吸收了大量的技术博客与面试文章&#xff0c;总结多年的面试经历&#xff0c;带你快速建立前端面试知识体系。抓住每一场面试的机会&#xff0c;知己知彼才能百战百胜&#xff01; 上期回顾 JS基础–异步 本系…

【中秋快乐】如何用three.js实现我的太空遐想3D网页

目录 创作背景 功能分解 创建3d地球 创建3d月球 创建3d小火箭

解决element-ui动态加载级联选择器默认选中问题(Cascader)

前言 最近在开发任务中碰到需要在新增和修改时使用动态加载级联选择器&#xff0c;但是当在修改时设置默认选中项&#xff0c;出现了后端数据返回较慢&#xff0c;导致无法选中和级联框选中了但input框不显示的问题&#xff0c;网上找到的方法也不是很有效&#xff0c;还得使用…

Vue - v-for 循环渲染多个 “重复“ 子组件(仅 ref 不同,this.$refs.xx 使用时依然能准确找到子组件)将子组件 ref 设为动态,这样每个子组件都是 “独立“ 的!详细教程

前言 本教程更多版本:uni-app | 微信小程序 我们会通过给组件绑定 ref 值,然后通过 this.$refs.xx 来获取这个组件上的方法和变量。 如果 在 v-for 中循环渲染组件(绑定固定 ref),那么这个 ref 就会 “一摸一样”,导致根本无法找到(this.$refs.xx 谁?), 要解决这个问…

【前端】vue模板语法知识了解一下,是不是只知道用element-ui组件?

vue写在前面Vue模板语法文本原始HTML属性开源Vue模板和主题框架集合BootstrapVueelement-ui最后总结写在前面 上一篇总结了在实操过程中如果遇到了nodejs版本的问题&#xff0c;我们该如何去解决的&#xff0c;还有就是总结了vue2和vue3生命周期的区别&#xff0c;如果感兴趣的…

【JavaScript】JS实用案例分享:动态生成分页组件 | 通过按键实现移动控制

CSDN话题挑战赛第2期 参赛话题&#xff1a;学习笔记 &#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff08;源创征文一等奖作品&#xff09;&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三学长的万字自述&am…

React 路由v6 - 超全详解

React router v6 路由 已经习惯了 v5 版本的路由 &#xff0c;那么 v6 版本的路由 该怎么应用呢&#xff1f; 文章目录React router v6 路由Ⅰ、路由 v6 (两种形式)Ⅱ、 动态路由Ⅲ、路由重定向Ⅳ、路由跳转 (两种形式)Ⅴ、路由懒加载Ⅰ、路由 v6 (两种形式) 方案一 &#xff…

JS原生——编写简易计算器

一个非常适合新手练习的小案例&#xff01;&#xff01;&#xff01; 使用JS的ES5语法HTMLCSS及企业级代码规范&#xff0c;方便后续良好的代码习惯养成&#xff01;&#xff01;&#xff01; 先来看一下样式吧&#xff01;&#xff01;&#xff01;&#xff08;后附代码&…