[不做怎麼知道系列之Android開發者的30天後端養成故事 Day5] - 當個小畫家 #改變我的首頁 #前後端怎麼結合 #讓Django讀取HTML

2020-02-07

Word count: 799 | Reading time≈ 3 min

大家好，我們又見面了，今天我們要做什麼呢? 今天 RS 想要讓 Django 顯示我自己的首頁，這樣我才可以開始做我想要的功能嘛!

那麼我要怎麼更改我的首頁呢 ?

我現在有一個 html 檔：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RS shop</title>
    <h1 align="center">RS 的 Django 測試</h1>
</head>
<body>
    <div align="center">
        <form method="post" action="./api/username">
            你的名字：<input type="text" name="username" placeholder="name">
						<button type="submit">送出</button>
        </form>
    </div>
</body>

<br>
<br>

<footer>
    <div align="center">Made by RS, 2020-02-07</div>
</footer>

</html>

長這樣，可以注意到網址是本地端網址：

我的專案架構是

我把要當成首頁的 index.html 檔，放在 /templates/blog/ 底下。

那麼該怎麼告訴 Django 我的首頁在這裡呢?

修改 `urls.py`

urls.py 所定義的是「告訴 Django，我們接收到這樣的一個網址，該怎麼做?」，該找出哪一個 html 頁面給使用者看呢?

from django.conf.urls import url

# 我們在 blog/views.py 裡面定義一個 hello 的 function
from blog.views import hello

urlpatterns = [
		# 代表 127.0.0.1:8000/
    url(r'^$', hello),

		# 代表 127.0.0.1:8000/blog/，
		# 將會執行 blog/views.py 裡面的 hello function
    url(r'^blog$', hello)
]

修改 `blog/views.py`

from django.shortcuts import render

def hello(request):
    context = {}

		# 表示會載入 templates/blog/index.html
    return render(request, 'templates/blog/index.html', context)

到底能不能成功呢!

Django 跑起來!

$ python manage.py runserver

最後你將看到

看到網址是 127.0.0.1:8000，就代表你成功了!

那我要怎麼拿到使用者填完的資料呢?

這就是我們明天要提的 API。

單日心得總結

大家應該能明顯感覺到，今天這篇文章和前幾天的文章很不一樣，因為我覺得前幾天實在是太貪心了，我很努力在一篇文章中，塞入整天所學習到的內容、想容易讓人看得懂的舉例，並且還要兼顧系統性、可閱讀性，這樣的工作量對我來說真的很硬。因為花很多時間在寫文章，反而壓縮到我學習的時間，所以我做了這樣的嘗試，限縮文章的主題、讓文章的目標更明確，不知道你們的想法如何，如果有任何建議歡迎在底下留言。

我是 RS，這是我的不做怎麼知道系列文章，我們明天見。

喜歡我的文章嗎? 趕快來看看我都發了什麼文章吧：我的文章目錄
歡迎閱讀我的上一篇: [不做怎麼知道系列之Android開發者的30天後端養成故事 Day4] - 動手做做看 #捲起袖子 #初探Django # DjangoHelloWorld
歡迎閱讀我的下一篇: [不做怎麼知道系列之Android開發者的30天後端養成故事 Day6] - 運用框架的槓桿 #前後端怎麼結合 #框架的威力 #Django Template Engine

Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.