iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
自我挑戰組

BeautifulSoup網頁爬蟲佐Django伺服器框架附AWS雲端運算服務系列 第 29

[Day 29] 第二主餐 pt.5-django也能寫前端,templates簡易介紹

上一篇我們做完了背景執行跟定期執行
這一篇我們就要來教大家如何把html網頁加入django了
用簡易這個詞的理由是
如果我們要把templates跟後端搭配從頭開始介紹
那基本上可能要用一整個鐵人賽來講解
因此這裡就只講解最基本的網頁設定
如果未來有機會再開一篇主題跟大家完整講解前後端搭配
等一下我到底講了幾個主題說以後有機會再說
算了不重要啦,咱們累狗~

templates - 網頁架設的好搭當

前面提到django寫前後端不僅周全,還簡單
這篇就跟大家講解如何簡單快速的建立前端網頁
首先我們先到我們的資料夾列表,在manage.py的資料夾中再建立一個資料夾

為了方便我們就把資料夾叫做templates吧

然後我們在資料夾內加入index.html

接著開啟html,將這段html代碼加進去

<!DOCTYPE html>
<html>
    <head>
        <title>stonks index</title>
    </head>
    <body>
      <h1>歡迎來到財報查詢站!</h1>
      請輸入以下資料:<br>
      <form action="/stonks/get_stonks_data/" method="post">
        <label>年分: </label>
        <input id="team_name" type="text" name="name_field">
        <label>季度: </label>
        <input id="team_name" type="text" name="name_field">
        <label>公司代碼: </label>
        <input id="team_name" type="text" name="name_field">
        <input type="submit" value="OK">
      </form>
    </body>
</html>

接下來我們要進到stonks_root資料夾改各種py檔
首先是urls.py
我們前面提過不要讓預設頁面是404
所以我們加上url(r'^', views.index_page),
然後別忘了前面import要加上from . import views
所以現在你的urls.py應該長這樣

from django.contrib import admin
from django.urls import path
from django.conf.urls import include, url
from . import views
admin.autodiscover()

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^stonks/', include('stonks_index.urls')),
    url(r'^', views.index_page),
]

下一個要改的是settings.py
首先我們要去修改TEMPLATES這個變數
把變數改成如下

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates').replace('\\', '/')], #修改成資料夾位址
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

眼尖的你就會發現,我們只有改DIRS這個部分
因為這裡代表你讀HTML時要去找哪個資料夾
這裡就代表去找這個django專案內的templates資料夾
然後由於我們有多用到os這個套件,所以也別忘了

import os

最後我們還要修改views.py
將views.py改成如下

from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.
def index_page(request):
    return render(request, 'index.html')

這裡就代表著當有人call這個function時
就會去templates的index.html找出來,然後return回去

到這裡所有設定就算修改好啦
我們就把這些東西push上去,push三指令~

git add .
git commit -m "add templates"
git push

然後進入aws,pull

git pull

最後我們runserver
並且輸入
http://你的IP位址:8000

看到這頁面就成功啦

以上就是整個BeautifulSoup網頁爬蟲佐Django伺服器框架附AWS雲端運算服務的主要文章啦
下一篇就是心得總結
以及會變一些小魔術給大家看
想知道有甚麼小魔術,可以讓你變成console上的魔術師(?
且待下回分解~


上一篇
[Day 28] 第二主餐 pt.4-程式不求人,runserver背景執行及crontab自動執行
下一篇
[Day 30]餐後甜點-心得總結及Python小魔術分享
系列文
BeautifulSoup網頁爬蟲佐Django伺服器框架附AWS雲端運算服務30

尚未有邦友留言

立即登入留言