天天看點

django之三--如何編寫一個html頁面并展示到浏覽器

一、前言

在django中,視圖的概念是:具有相同功能和模闆的網頁,都可以稱為視圖。通俗一點來說,就是你平常打開任一浏覽器,輸入一個位址A後看到浏覽器視窗展示出來位址A所對應的頁面内容B,頁面内容B就算是視圖。

頁面内容B可以是純文字内容,也可以是一個html頁面。

在第一章【​​django之一--簡單的認識從hello world!開始​​】有講過:通過任一浏覽器通路【​​http://127.0.0.1:8000​​】就能在對應一個頁面上展示出這樣的純文字内容【Hello world ! lucas的django項目首頁 !】。

但是按照正常使用者操作,每次使用者在浏覽器輸入一個任意正确的位址X,都希望展示的是一個位址X對應的html頁面。

本篇,就重點講下【每次使用者在浏覽器輸入一個任意正确的位址X,如何給使用者展示一個位址X對應的html頁面的基本操作步驟?】。

二、基本操作步驟

1、第一步:建立一個應用。

相關知識點:一個django項目【helloworld】裡可以有不限數量的多個應用(app)。

我們在pycharm的【Terminal】終端裡進入到django項目【helloworld】的manage.py所在的目錄位址下,并使用該固定的指令行【python manage.py startapp app(任意一個新的應用名)】建立成功一個新的應用。

比如我們要新建立一個名為【hello】的應用,可以用該指令行【python manage.py startapp hello】。

指令行【python manage.py startapp hello】執行成功後,可以看到新生成的一個應用的目錄結構如下:

django之三--如何編寫一個html頁面并展示到浏覽器

2、第二步:進行setting配置。

建立成功了一個應用【hello】後,接下來一定要在【helloworld/helloworld】目錄下的【settings.py】檔案裡,把應用【hello】的名稱【hello】添加到INSTALLED_APPS這個資料類型為list的常量裡的其中一個值。

具體添加操作如下:

# Application definition



INSTALLED_APPS = [

    'django.contrib.admin',

    'django.contrib.auth',

    'django.contrib.contenttypes',

    'django.contrib.sessions',

    'django.contrib.messages',

    'django.contrib.staticfiles',

    'hello'

]      
django之三--如何編寫一個html頁面并展示到浏覽器

3、第三步:建立一個template模闆/檔案。

3.1、在【helloworld/hello】/在應用【hello】目錄下,我們需要手動建立一個名為【templates】的檔案夾;

3.2、接着,在【templates】檔案夾下再手動建立一個名為【demo.html】的html模闆/檔案(注:模闆和檔案其實指的都是html檔案。);

django之三--如何編寫一個html頁面并展示到浏覽器

注意: 預設配置下,Django 的模闆系統會自動找到每個app下面的名為【templates】檔案夾中的模闆/檔案。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>這是lucas的第一個html頁面demo</title>

</head>

<body>



<p>

    <h4> 這是我的部落格位址,可以百度搜:LYX_WIN  </h4>

    <a href="https://blog.csdn.net/LYX_WIN" target="_blank" >LYX_WIN-CSDN</a>

    <hr>

    <h4> 《基于 Pytest 架構的接口自動化測試開發實踐》 </h4>

    <p>pytest是最強大最好用的python自動化架構之一。<br>

        本篇文章大概講下如何進行一個項目的接口自動化架構搭建。<br>

        有相關疑問,可以加QQ一起交流:674116231。

    </p>

    <a href="https://blog.csdn.net/LYX_WIN/article/details/108148548" target="_blank" >點選該文案,可以跳轉到《基于 Pytest 架構的接口自動化測試開發實踐》文章并進行閱讀!</a>

</p>



</body>

</html>      
django之三--如何編寫一個html頁面并展示到浏覽器

頁面效果如下:

django之三--如何編寫一個html頁面并展示到浏覽器

4、第四步:視圖函數和url的配置。

【demo.html】頁面的内容我們已經有了,接下來我們就是要如何能【demo.html】在指定的一個url位址上展示出來。

4.1、首先,我們要在【helloworld/hello/views.py】裡寫需要的視圖函數。

既然我們已經有建立了至少一個應用,那麼【helloworld/helloworld】目錄下的之前由我們自己手動建立的【view.py】檔案可以删除了,或者【view.py】在【helloworld/helloworld】目錄下的【urls.py】裡不要調用該【view.py】。(因為之前手動建立的【view.py】隻是用于前期的學習,實際嚴謹的開發過程中不會在【helloworld/helloworld】目錄下由我們自己手動建立【view.py】檔案。)

django之三--如何編寫一個html頁面并展示到浏覽器

4.2、接着,我們要在【helloworld/hello/urls.py】裡寫配置url通路路徑。

既然我們已經有建立了至少一個應用,那麼【helloworld/helloworld】目錄下的之前由我們自己手動建立的【view.py】檔案可以删除了,或者【view.py】在【helloworld/helloworld】目錄下的【urls.py】裡不要調用該【view.py】。(因為之前手動建立的【view.py】隻是用于前期的學習,實際嚴謹的開發過程中不會在【helloworld/helloworld】目錄下由我們自己手動建立【view.py】檔案。)

django之三--如何編寫一個html頁面并展示到浏覽器

4.3、最後在谷歌浏覽器上輸入位址:http://127.0.0.1:8000/demo後,可以正确展示【demo.html】的内容