환경
•windows 10 64비트•python 3.8.15•pynecone 0.1.14
소개
Pynecone
python
개발을 위한 순수 기반 오픈 소스 프레임워크 이며 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
.javascript
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
위의 예제로 돌아가서 file 파일의 코드를 살펴보십시오.
class State(pc.State):
"""The app state."""
pass
에서 애플리케이션의 모든 변수(여기서는 호출됨)가 정의되며 이러한 변수 pynecone
는 메서드에 의해 변경 될 수 있습니다 . 이러한 메서드는 이벤트 핸들러( )라고 하며 이 예제와 관련되지 않습니다. 2개의 이벤트 핸들러가 있고 , state
vars
state
event handler
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
)를 사용할 수 있습니다 . 자세한 내용은 https://pynecone.io/docs/library 링크를 참조하십시오. 이 예제에서는 제목과 하이퍼링크를 사용 하고 이 세 가지 구성 요소를 내부에 압축합니다 . 즉, 수직으로 중앙에 배치합니다( ) . 각 구성 요소의 스타일은 해당 메서드의 매개 변수를 통해 조정할 수 있습니다.button
box
heading
slider
heading
box
link
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
, 기본 포트를 변경하려는 경우 이렇게 할 수 있습니다.
그러면 액세스 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