파이썬 + 장고를 사용하여 웹 페이지 기반 화면을 출력하는 방법
개요
IT기술계의 온라인 살롱에서 페어 프로 개발을 하고 있습니다만, 그 리마인드도 겸해 공유하고 싶습니다.
저자의 상태
프런트 엔드 엔지니어입니다.
실무에서는 주로 JS계의 프로젝트가 많기 때문에, Python은 완전 초보자 레벨입니다.
이번 감촉으로서는 Django 독자적인 규칙등도 약간 어려운 부분도 있습니다만, routes나 루프등의 구조·기술 방법이 구현을 통해 알게 되어 왔습니다.
개발 환경
참고문헌
장고 공식 문서
첫 Django 앱 만들기, 1
장고 템플릿 기능 사용하기
개발 절차
장고 프로젝트, 앱 만들기
Python을 설치한 상태에서 터미널에서 개발 디렉토리로 이동하고 명령을 입력합니다.
이번에는 "todo_site"라는 프로젝트 이름을 사용하기 때문에 다음과 같습니다.
django-admin startproject todo_site
또한 아래 명령을 사용하여 프로젝트에 "todo_app"앱을 만듭니다.
python manage.py startapp todo_app
이 앱을 프로젝트에서 로드하려면 'todo_site'의 설정 파일에서 앱 목록에 해당 앱 이름을 추가합니다.
todo_site/settings.py(발췌)
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'todo_app', #追加した行
]
이제 아래 준비를 마쳤습니다.
Webview 구조 구현
이번에 만들고 있는 것은 이 2페이지입니다.
우선 각 페이지의 패스 구성을 정의하기 위해, 패스명이나 템플릿을 아래와 같이 기술합니다.
todo_site/todo_app/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('user_list/', views.user_list, name='user_list'),
]
views 가 views.py 로 정의된 함수의 호출이 되므로, 다음에 아래와 같이 정의합니다.todo_site/todo_app/views.py
from django.shortcuts import render
from django.http import HttpResponse
def index(request):
return HttpResponse("hogehogehoge")
def user_list(request):
# ユーザーリスト
context = {
"items" : [
{
"user_name" : "ユーザー1",
"talk" : "トーク内容",
"updatetime" : "12:00",
},
{
"user_name" : "ユーザー2",
"talk" : "トーク内容",
"updatetime" : "12:00",
},
{
"user_name" : "ユーザー3",
"talk" : "トーク内容",
"updatetime" : "12:00",
},
]
}
return render(request, 'todo_app/user_list.html', context)
index 페이지는 단순히 텍스트만을 표시시키기 때문에,
HttpResponse 를 임포트하고 있습니다.한편으로 유저 리스트 페이지는 카드 형식의 리스트를 루프로 표시시키는 사양의 구현이므로, 이 파일에서는 리스트의 내용을 변수
context 로 정의해, 다른 템플릿 파일을 사용해 view측에 떨어뜨리는 구성을 있습니다.템플릿을 사용한 view 구현
views.py 의 렌더링 문장에 기재된 todo_app/user_list.html 의 해당 템플릿 파일을 작성합니다.django의 파일 참조의 사양상, 복수의 index.html 파일을 작성했을 때를 고려해 디렉토리를 이중으로 하는 것이 추천되고 있다.
라는 부분에서 개인적으로 위화감이 남았지만, 규칙에 따라 아래와 같이 구현했습니다.
todo_site/todo_app/templates/todo_app/user_list.html
{% load static %}
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, world!</title>
<link rel="stylesheet" href="{% static 'todo_app/css/user_list.css' %}">
</head>
<body>
{% for item in items %}
<div class="item">
<div class="item-icon">icon</div>
<div class="item-detail">
<div class="item-detail-username">{{ item.user_name }}</div>
<div class="item-detail-talk">{{ item.talk }}</div>
</div>
<div class="item-status">
<div class="item-status-updatetime">{{ item.updatetime }}</div>
</div>
</div>
{% endfor %}
</body>
</html>
views.py 중, context 함수 안에서 정의한 items 를 읽어들여, python의 루프 처리로 출력하고 있다고 하는 구조입니다.또한
load static
<link rel="stylesheet" href="{% static 'todo_app/css/user_list.css' %}">
의 2문으로 아래의 외부 CSS를 읽고 있습니다.
외부 소스용의 디렉토리 「static」를 신규 작성하고 있습니다.
todo_site/todo_app/static/todo_app/css/user_list.css (발췌)
.item {
height: 60px;
width: 250px;
border: solid 1px #000;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 5px;
}
그리고 아래 명령이나 VSCode 메뉴에서 실행하여 앱을 시작합니다.
python manage.py runserver
최종적인 보기는 이렇게 되었습니다.
Reference
이 문제에 관하여(파이썬 + 장고를 사용하여 웹 페이지 기반 화면을 출력하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/xinome/items/df3103f66859460d4514텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
