1. 程式人生 > >開始學習Django,配置靜態登入頁面

開始學習Django,配置靜態登入頁面

# 開始學習Django,配置靜態登入頁面 ## 準備階段 眾所周知,Django是一個重量級的裝置齊全的web開發框架。在學習Django前我們需要具備如下的知識點: + python基礎程式設計 + 併發 + 網路程式設計 + HTTP協議的一些基礎知識 + 前端的基礎知識(html+css+js) 這裡主要是http相關的事情,首先,我們需要知道當我們在瀏覽器輸入地址後到瀏覽器顯示內容所發生的操作。 1. 首先, DNS域名伺服器解析地址,獲取伺服器 2. 計算機嘗試連線伺服器 3. 連線成功後,發生請求 4. 伺服器收到請求,並返回響應資料 5. 計算機斷開TCP連線 6. 計算機通過伺服器返回的資料渲染頁面 http的請求方法,主要有八種,但是最常用的只有兩種 + get 傳送請求資料 + post 傳送響應資料 + head + put + delete + options + trace + connection http狀態碼 + 1xx處理: 伺服器收到後繼續處理 + 2xx成功: 伺服器成功接收、處理、理解請求 + 3xx重定向:伺服器不做繼續處理 + 4xx請求錯誤:請求資料有誤(檔案不存在、域名有問題) + 5xx伺服器錯誤:伺服器發生問題(機房突然斷電) http/https地址解析 `https://deepnote.com/project/926fc86b-4ba5-44c2-b77b-c9f6d3e6ab7d#%2Fstudy%2Fstudy1213.ipynb` + https:協議 + //: 層級劃分符 + 訪問資源的憑證資訊,表示特殊許可權才能訪問(預設沒有) + deepnote.com: 伺服器(域名) + 埠號,http預設80,https預設443 + project/926fc86b-4ba5-44c2-b77b-c9f6d3e6ab7d#%2Fstudy%2Fstudy1213.ipyn: 檔案路徑 + ?key=value&...: 查詢 + \#xx:片段 http請求 ![](https://img2020.cnblogs.com/blog/2061063/202012/2061063-20201214151151650-1430717653.png) 我們可以知道http請求的格式為: ``` 請求方式 路徑 協議版本\r\n 。。。請求頭\r\n \r\n 。。。。請求資料 ``` 可以對著檢視下面的: ``` # 請求傳送的資料 ''' GET / HTTP/1.1 Host: 127.0.0.1:8888 Connection: keep-alive Cache-Control: max-age=0 Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9 Sec-Fetch-Site: none Sec-Fetch-Mode: navigate \Sec-Fetch-User: ?1 Sec-Fetch-Dest: document Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9 \''' ``` Http響應 ![](https://img2020.cnblogs.com/blog/2061063/202012/2061063-20201214151430335-1995908280.png) 我們可以知道響應的主要格式為: ``` 協議版本 響應碼 狀態描述\r\n 響應行\r\n \r\n 響應資料 ``` 可以檢視如下的程式碼: ```python from socket import * if __name__ == '__main__': s = socket() s.bind(('localhost', 8888)) s.listen() while True: new_socket, new_addr = s.accept() data = new_socket.recv(1024) new_socket.send(b"""HTTP/1.1 200 OK\r\ncontent-type:text/html;charset=utf-8\r\n\r\n""") # 注意回覆http響應的格式 # 粘包 new_socket.send("""

哈哈哈哈

""".encode('utf-8')) s.close() ``` ## Django 首先我們需要安裝Django: ```python pip install Django -i 源地址(清華源、豆瓣)# 加快下載速度 ``` 安裝好以後,建立專案: ![](https://img2020.cnblogs.com/blog/2061063/202012/2061063-20201214152329635-1297995511.png) 假設我們專案取名為web_test,那麼我們可以看到我們存在著:2個資料夾(templates、web_test)和一個manager.py的檔案。 我們點選如下地方: ![](https://img2020.cnblogs.com/blog/2061063/202012/2061063-20201214152648486-451535311.png) 然後瀏覽器框輸入:127.0.0.1:8000,若沒有什麼其他的錯誤就表示安裝完成了。 其中我們最主要使用的就是setting.py和urls.py,其中前者是對於一些路徑的配置,而後者則是對於瀏覽器要請求的頁面進行一個返回,比如: ![](https://img2020.cnblogs.com/blog/2061063/202012/2061063-20201214153008441-386034549.png) 其中:index和login都是可以訪問的,我們可以直接在瀏覽器輸入:127.0.0.1/index或者127.0.0.1/login進行訪問。 接下來就是配置一個靜態的登入頁面,效果如下: ![](https://img2020.cnblogs.com/blog/2061063/202012/2061063-20201214153320294-459519670.png) 首先,我們在bootstrap上找到模板,並把body的程式碼複製下來,並下載bootstrap。 ![](https://img2020.cnblogs.com/blog/2061063/202012/2061063-20201214153452217-753829934.png) 鍵盤上按下F12,然後複製body裡的內容: ![](https://img2020.cnblogs.com/blog/2061063/202012/2061063-20201214153521078-678959761.png) 然後再templates裡建立一個login.html,並把內容貼上進去,如下: ![](https://img2020.cnblogs.com/blog/2061063/202012/2061063-20201214153702847-1346925249.png) 然後在setting.py的最後一句進行如下設定,並且建立一個statc資料夾用於存放靜態的css、js、images,注意:每一個頁面都應該有一個static資料夾: ![](https://img2020.cnblogs.com/blog/2061063/202012/2061063-20201214153753163-2040757738.png) 在static資料夾中建立一個plugins資料夾,並把下載的bootstrap解壓進去,如下: ![](https://img2020.cnblogs.com/blog/2061063/202012/2061063-20201214154024730-731197051.png) 然後引入相應的css檔案: ![](https://img2020.cnblogs.com/blog/2061063/202012/2061063-20201214154110858-1478634535.png) 另外,在urls.py檔案中,每一個頁面都應該有一個處理的函式,如下: ![](https://img2020.cnblogs.com/blog/2061063/202012/2061063-20201214154211676-177580670.png) 這裡需要導包:`from django.shortcuts import render` 最後的話,在pycharm中點選那個綠色的小三角,並在瀏覽器輸入:127.0.0.1:8000/login 就可以看到效果啦!!!! 若有什麼問題請評論區回覆