DjangoとVue.jsでシンプルなTodoアプリを作る 03.Djangoで文字を表示させよう
前回の記事では、アプリを作るセットアップをしていきました。
今回は、html をbootstrapで整え、views.pyとurls.pyにコードを書いて、Djangoを通してhtmlに文字を表示できるようにします!
bootstrapでhtmlを整える
まず、前回作成した、 templates > base.html にコードを書いていきます。
base.html 内で!を入力し、下記の html の雛形を表示させます。
これは vscode のみの機能かもしれないので、!を入力してもそうならない場合は、すみませんが、コピペしてください。
templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>todo</title>
</head>
<body>
</body>
</html>
続いて、head 内に bootstrap の cdn と、style.css の設定を書き込みます。
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 下記を追加 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'style.css' %}">
<title>Todo</title>
</head>
bootstrap とは?
<button type="button" class="btn btn-primary">Primary</button>
cdn とは?
{% %}とは何?
{% load static %}
<link rel="stylesheet" href="{% static 'style.css' %}">
<link rel="stylesheet" href="/static/style.css">
続いて、今回の SPA の todo アプリ を作るにあたって必要な cookie と、vue の cdn の url、vue.js の内容を書く、main.js のパス を書きます。
<body>
{# 追記 #}
<div class="container">
<div class="row">
<div class="col-sm-10 mx-auto mt-4">
{% block content %}
{% endblock %}
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.0/dist/js.cookie.min.js"></script>
<script src="{% static 'main.js' %}"></script>
</body>
class="container"などの class は、bootstrap のデザインの設定です。
今回はデザインについては、スルーしてもらって大丈夫だと思います。
詳しくbootstrapについて知りたい方は、bootstrap>componentsを読んでみてください。
{% block content %}{% endblock %}とは
index.html
{% block content %}
<h1>index</h1>
{% endblock %}
<div class="container">
<div class="row">
<div class="col-sm-10 mx-auto mt-4">...
最終的な base.html のコードは下記のようになります。
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="{% static 'style.css' %}" />
<title>Todo</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-10 mx-auto mt-4">
{% block content %}
{% endblock %}
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.0/dist/js.cookie.min.js"></script>
<script src="{% static 'main.js' %}"></script>
</body>
</html>
Djangoを通して文字を表示させる
続いて、task 配下に、task/urls.py を作成します。
todo アプリの task を管理するページの url を追加していきます。
作成したら、今度は、config/urls.py のほうに、作成した task/urls.py の url を読み込めるようにします。
config/urls.py
from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path("admin/", admin.site.urls),
path("", include("task.urls")),
]
include とは
admin とは
次にtask/views.py に、下記を追記します。
task/views.py
from django.shortcuts import render
from django.views.generic import View
class TaskView(View):
def get(self, request):
return render(request, "task_list.html", context={"name": "テスト"})
task/urls.py に下記を追記します。
task/urls.py
from django.urls import path
from .views import *
urlpatterns = [
path("", TaskView.as_view(), name="task_list"),
]
task/templates配下に、task/templates/task_list.htmlを作成し、下記を記述します。
task/templates/task_list.html
{% extends 'base.html' %}
{% block content %}
{{ name }}
{% endblock %}
この状態で、ターミナルで、
$ python manage.py runserver
をし、http://localhost:8000 にアクセスしてみてください。
すると、テストと表示されると思います!
views.pyとurl.pyとhtmlの関係
次回の記事では、models.pyで、Taskモデルを定義し、やることリストを登録して、htmlに表示させることができるようにしていきます!
次回も読みたい方は、スキを貰えると嬉しいです。
おまけ記事
⏩webサービスの作り方が気になったら
⏩webエンジニアの働き方が気になったら
作者のプロフィール
https://veil-vinca-83f.notion.site/b5b066fb0fd24f0684901973bd6f895d
この記事が気に入ったらサポートをしてみませんか?