pynecone을 사용하여 Python 웹 애플리케이션 개발

환경

•windows 10 64비트•python 3.8.15•pynecone 0.1.14

소개

Pyneconepython 개발을 위한 순수 기반 오픈 소스 프레임워크 이며 web app , 에 의존하지만 nodejs추가 프런트 엔드 코드를 작성할 필요가 없으므로 프런트 엔드를 건드리지 않은 친구에게 매우 친숙합니다.

설치하다

첫 번째 단계는 설치하고 nodejs공식 웹 사이트 https://nodejs.org/en/로 이동하여 LTS 버전을 다운로드하는 것입니다. 최신 버전은 현재 18.12.1 LTS

파일 다운로드 후 더블클릭해서 설치하니 어리석음

두 번째 단계는 설치 pynecone및 pip 사용 입니다.

pip install -U pynecone-io

시험

설치가 완료되면 데스크탑으로 이동하여 프로젝트를 생성합니다.

cd ~/Desktop
mkdir pc_app
pc init

그런 다음 관리자 권한으로 열고 powershell실행하십시오. pc run

그런 다음 브라우저로 이동하여 http://localhost:3000 주소를 입력합니다.

기본 페이지는 다음과 같으며 페이지는 또한 파일을 수정하여 페이지를 변경할 수 있다는 메시지를 표시합니다. 즉 , 페이지를 pc_app/pc_app.py 쓰지 않고 변경할 수 있습니다 html.javascriptcss

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 위의 예제로 돌아가서 file 파일의 코드를 살펴보십시오.

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


    pass

에서 애플리케이션의 모든 변수(여기서는 호출됨)가 정의되며 이러한 변수 pynecone 는 메서드에 의해 변경 될 수 있습니다 . 이러한 메서드는 이벤트 핸들러( )라고 하며 이 예제와 관련되지 않습니다. 2개의 이벤트 핸들러가 있고 , statevarsstateevent handlerincrementdecrement

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)를 사용할 수 있습니다. 자세한 내용 은 https://pynecone.io/docs/library 링크를 참조하십시오. 이 예제에서는 제목과 하이퍼링크를 사용 하고 이 세 가지 구성 요소를 내부에 압축합니다 . 즉, 수직으로 중앙에 배치합니다( ) . 각 구성 요소의 스타일은 해당 메서드의 매개 변수를 통해 조정할 수 있습니다.buttonboxheadingsliderheadingboxlinkvstackpc.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, 기본 포트를 변경하려는 경우 이렇게 할 수 있습니다.

그러면 액세스 url 가 됩니다. http://localhost:5000

또한 배울 가치가 있는 유사한 프로젝트가 많이 포함된 또 다른 예제 웨어하우스가 공식적으로 제공됩니다. 링크는 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