前面我們簡單的了解Django的一些工作原理，其中關于頁面展示的內容，也全部都是視圖（Views）返回的內容，那么我們也知道前端包括很多內容。如：HTML，CSS，JavaScript等以及各種插件，才具備完全的頁面，今天我們通過HTML的格式返回頁面內容
Templates
在Anjing目錄下創建一個templates文件夾，可能會有人問了，為什么要創建這個文件夾？不能創建其他的嗎？
這個是Django中自動定義的
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
# HTML配置相關TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [], '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', ], }, },] |
在文件夾中添加Login.html文件寫入以下內容
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>首頁</title></head><body> <h1> <p style="text-align:center" font size="2">歡迎來到安靜的博客：</p> </h1> <h1> <p style="text-align:center">請輸出賬號密碼：</p> </h1> <form action="/index/" method="post"> <p style="text-align:center">用戶：<input type="text" name="username" /><br /> </p> <p style="text-align:center">密碼：<input type="password" name="password" /><br /> <input type="submit" value="提交" /> </form></body></html> |
Views
添加完成后，我們還需要在視圖(Views)文件中進行寫入對應的方法，返回HTML頁面
|
1
2
3
4
5
|
# Virws.pyfrom django.shortcuts import render# 返回templates中的login.html文件def login(request): return render(request, 'login.html') |
其中render方法是用數據字典和請求元數據，渲染一個指定的HTML模板。
Urls
視圖已經添加完成了，根據我們前面寫的應該就差url地址了，我們需要通過urls文件把我們前面渲染的HTML根據這個路徑然后返回給前端
|
1
2
3
4
5
6
7
8
9
10
11
|
# Urls.py文件from django.contrib import adminfrom django.urls import path# 此文件一定要在setting.py文件中進行添加from Anjing import viewsurlpatterns = [ path('admin/', admin.site.urls), path('login/', views.login), # 加入關聯的函數和應用] |
前端展示
前面的工作都已經全部完成了，接下來就是展現正在技術的時刻了，打開cmd重啟服務
打開瀏覽器，輸入對應的路徑，發現頁面已經完全展示出來了。
異常報錯
當我們在輸入框中輸入一些數據后，點擊提交會發現，頁面出現了404，那么這是什么原因呢？
我們可以看到圖片異常報錯為，找不到index路徑，原來是我們這邊沒有在代碼中寫入index的路徑渲染內容，所以找不到，屬于正常，所有呢，大家在遇到報錯的時候不要著急，Django都會把報錯的一些信息全部返回給我們的。
到此這篇關于Django返回HTML文件的實現方法的文章就介紹到這了,更多相關Django返回HTML文件內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://www.cnblogs.com/qican/p/12083498.html
