CRYPTO-OTAKU VScodeからPythonを使ったウェブページを表示する流れを解説【Django】 | CRYPTO-OTAKU

VScodeからPythonを使ったウェブページを表示する流れを解説【Django】

プログラミング

VScodeでアプリの作成が終わったので、ウェブページの表示方法までの流れを備忘録用にまとめました。

1、アプリ直下にtemplatesフォルダーを作成します。そのフォルダー内にindex.htmlファイルを作成します。

スクリーンショット_2021-06-24_21_55_38 スクリーンショット_2021-06-24_21_58_10

2、index.htmlファイルの中にページに表示したい文章を入力します。今回は下記を書いてみました。

<h1>hello, ようこそ!</h1>
スクリーンショット_2021-06-24_22_02_50

3、htmlをユーザーに返すために、アプリ直下のviews.pyを書き換えていきます。

from django.views.generic import TemplateView


class IndexView(TemplateView):
   template_name = "index.html”
スクリーンショット 2021-06-24 22.05.33

​4、ビューとURLを繋げるために、urls.pyを追加します。下記コードを書いたらアプリは完成です。
 .viewsの.(ドット)をつけることで、同じフォルダ内を指定しています。
※path(”, ←トップページを表示するためのコード。

from django.urls import path

from .views import IndexView

urlpatterns = [
   path('', IndexView.as_view()),
]
スクリーンショット_2021-06-24_22_12_25

5、アプリのurls.pyをプロジェクトのurls.pyにつないで教える必要がるので、プロジェクトurls.pyにincludeを追加で書きます

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
   path('admin/', admin.site.urls),
   path('', include("testapp.urls"))
]
スクリーンショット_2021-06-24_22_19_30

ユーザーがトップページにアクセスしてからの流れ〜

スクリーンショット_2021-06-24_22_19_30

トップページにユーザーがアクセスしたら、testapp(今回のアプリ)のurls.pyに飛ばされます。

スクリーンショット_2021-06-24_22_12_25

さらにtestappのurls.pyのトップページならば、つぎはviews.pyに飛ばされます。

スクリーンショット 2021-06-24 22.05.33

views.pyに見にいくと、index.htmlがあるので最後にindex.htmlに飛ばされてhtmlファイルの内容が表示される流れとなります。

スクリーンショット 2021-06-24 22.33.30