Use pynecone to develop python web applications

environment

•windows 10 64bit•python 3.8.15•pynecone 0.1.14

Introduction

Pynecone It is a purely based  python open  web app source framework for development, it depends on  nodejs, but does not need to write additional front-end code, which is very friendly to friends who have not touched the front-end.

Install

The first step is to install  nodejs, go to the official website https://nodejs.org/en/, download  LTS the version, the latest is currently 18.12.1 LTS

After the file is downloaded, double-click to install it foolishly

The second step is to install  pyneconeand  pip use

pip install -U pynecone-io

test

After the installation is complete, we come to the desktop and create a project

cd ~/Desktop
mkdir pc_app
pc init

Then, open it with administrator privileges  powershelland execute pc run

Next, come to the browser and enter the address http://localhost:3000

It can be seen that the default page looks like this, and the page also prompts that the page can be changed by modifying the file  , that is to say  , the page can be changed pc_app/pc_app.py without writing  html, javascript and css

If you encounter  pc run an error

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

It needs to be upgraded  pynecone-io. For details, please refer to the project  issue. See the link at the end of the article.

Sample analysis

Going back to the example above, take a look at  pc_app/pc_app.py the code in the file file

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


    pass

In  pynecone , state all the variables in the application (called here  vars) are defined, and these variables can be  state changed by the methods in, these methods are called event handlers ( event handler), which are not involved in this example, you can see the following example, there are 2 event handlers, increment and decrement

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


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


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

The next  index method is responsible for the display of the front-end page, which is also the part that needs to be focused on

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%",
    )

In  pynecone , there are more than 50 components ( component) that can be used, such as common buttons  button, box, heading, slider etc. For details, please refer to this link https://pynecone.io/docs/library. In this example, the title and hyperlink are used  heading, box and  linkthese three components are packed inside  vstack , that is, arranged vertically and centered ( pc.center). The style of each component can be adjusted through the parameters in the corresponding method.

Components can refer to variables in the application, see an  button example here

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

on_click What follows is the event handler  decrement, that is, when the button is clicked once, count the value of the button is reduced by 1

When the page is written, you need to set the route ( Routing)

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


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

If you want to add multiple pages,  add_page you can keep up with the parameters  route, such as

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

access  url becomes http://localhost:3000/demo

The last step is to start the service,  pynecone called  incompile

app.compile()

In this way, a simple  web project is completed without writing any front-end related code

There is also an important configuration file in the project, that is  pcconfig.py, if you want to change the default port, you can do this

 Then access  url becomes http://localhost:5000

In addition, another example warehouse is officially provided, which contains many similar projects, which are worth learning from. The link is https://github.com/pynecone-io/pynecone-examples

References

•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