5. 前端頁面設計 · Python / Linux / Mysql / 軟件測試等等

[TOC] 基本框架搭建好了后，我們就要開始豐富頁面內容了。最起碼，得有一個用戶登錄的表單不是么？（注冊的事情我們先放一邊。） ## 一、使用原生HTML頁面刪除原來的`login.html`文件中的內容，寫入下面的代碼： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登錄</title> </head> <body> <div style="margin: 15% 40%;"> <h1>歡迎登錄！</h1> <form action="/login/" method="post"> <p> <label for="id_username">用戶名：</label> <input type="text" id="id_username" name="username" placeholder="用戶名" autofocus required /> </p> <p> <label for="id_password">密碼：</label> <input type="password" id="id_password" placeholder="密碼" name="password" required > </p> <input type="submit" value="確定"> </form> </div> </body> </html> ~~~ 簡單解釋一下： * form標簽主要確定目的地url和發送方法； * p標簽將各個輸入框分行； * label標簽為每個輸入框提供一個前導提示，還有助于觸屏使用； * placeholder屬性為輸入框提供占位符； * autofocus屬性為用戶名輸入框自動聚焦 * required表示該輸入框必須填寫 * passowrd類型的input標簽不會顯示明文密碼以上功能都是HTML5原生提供的，可以減少你大量的驗證和JS代碼，更詳細的用法，請自行學習。 **特別聲明：所有前端的驗證和安全機制都是不可信的，惡意分子完全可以脫離瀏覽器偽造請求數據！** 啟動服務器，訪問`http://127.0.0.1:8000/login/`，可以看到如下圖的頁面： ![](https://img.kancloud.cn/02/13/0213b8580864ef98dcb9836929487ae4_421x287.png) <br /> ## **二、引入Bootstrap 4** 如果你的實際項目真的使用上面的那個頁面外觀，妥妥的被老板打死。代碼雖然簡單，速度雖然快，但沒有CSS和JS，樣子真的令人無法接受，在顏值即正義的年代，就是錯誤。 <br /> 然而，大多數使用Django的人都不具備多高的前端水平，通常也沒有專業的前端工程師配合，自己寫的CSS和JS卻又往往慘不忍睹。怎么辦？沒關系，我們有現成的開源前端CSS框架！Bootstrap4就是最好的CSS框架之一！ <br /> 想要在HTML頁面中使用Bootstrap4，最方便的方法就是使用國內外的免費CDN（如果app的使用環境不可以使用外部網絡，也可以使用內部的CDN，或者靜態文件）。 <br /> 這里推薦BootCDN：[https://www.bootcdn.cn/](https://www.bootcdn.cn/)，速度比較快，有大量的不同版本的CDN。 ![](https://img.kancloud.cn/37/dc/37dcc18d651eea304e932d3d642cca30_1240x486.png) 這里直接給出HTML標簽，復制粘貼即可： ~~~ CSS： <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> 以及JS： <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> ~~~ 由于Bootstrap依賴JQuery，所以我們也需要使用CDN引用JQuery 3.3.1: ~~~ <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> ~~~ 另外，從Bootstrap4開始，額外需要popper.js的支持，依舊使用CDN的方式引入: ~~~ <script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js"></script> ~~~ 下面，我們就可以創建一個漂亮美觀的登錄頁面了，具體代碼如下： ~~~ <!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">   <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <title>登錄</title> </head> <body> <div class="container"> <div class="col"> <form class="form-login" action="/login/" method="post"> <h3 class="text-center">歡迎登錄</h3> <div class="form-group"> <label for="id_username">用戶名：</label> <input type="text" name='username' class="form-control" id="id_username" placeholder="Username" autofocus required> </div> <div class="form-group"> <label for="id_password">密碼：</label> <input type="password" name='password' class="form-control" id="id_password" placeholder="Password" required> </div> <div> <a href="/register/" class="text-success "><ins>新用戶注冊</ins></a> <button type="submit" class="btn btn-primary float-right">登錄</button> </div> </form> </div> </div>    {# 以下三者的引用順序是固定的#} <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html> ~~~ 訪問一下login頁面，看起來如下： ![](https://img.kancloud.cn/12/cd/12cd383c569238daabcbf526cca57477_1240x289.png) <br /> ## **三、添加靜態文件** 然而，上面的登錄頁面在寬度上依然不太合適，背景也單調，所以一般我們會寫一些CSS代碼，同時使用背景圖片。 <br /> 在工程根目錄下的login目錄下，新建一個static目錄，再到static目錄里創建一個login目錄，這種目錄的創建方式和模板文件templates的創建方式都是一樣的思維，也就是讓重用app變得可能，并且不和其它的app發生文件路徑和名稱上的沖突。 <br /> 繼續在`/login/static/login`目錄下創建一個css和一個image目錄，css中添加我們為登錄視圖寫的css文件，這里是`login.css`，image目錄中，拷貝進來你想要的背景圖片，這里是`bg.jpg`。最終目錄結構如下： ![](https://img.kancloud.cn/77/8b/778bbb39c5e50178c74ab640fd42305d_248x634.png) 下面我們修改一下login.html的代碼，主要是引入了login.css文件，注意最開頭的`{% load static %}`，表示我們要加載靜態文件。 ~~~ {% load static %} <!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">   <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <link href="{% static 'login/css/login.css' %}" rel="stylesheet"/> <title>登錄</title> </head> <body> <div class="container"> <div class="col"> <form class="form-login" action="/login/" method="post"> <h3 class="text-center">歡迎登錄</h3> <div class="form-group"> <label for="id_username">用戶名：</label> <input type="text" name='username' class="form-control" id="id_username" placeholder="Username" autofocus required> </div> <div class="form-group"> <label for="id_password">密碼：</label> <input type="password" name='password' class="form-control" id="id_password" placeholder="Password" required> </div> <div> <a href="/register/" class="text-success "><ins>新用戶注冊</ins></a> <button type="submit" class="btn btn-primary float-right">登錄</button> </div> </form> </div> </div>    {# 以下三者的引用順序是固定的#} <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html> ~~~ 而login.css文件的代碼如下，注意其中背景圖片bg.jpg的引用方式： ~~~ body { height: 100%; background-image: url('../image/bg.jpg'); } .form-login { width: 100%; max-width: 330px; padding: 15px; margin: 0 auto; } .form-login{ margin-top:80px; font-weight: 400; } .form-login .form-control { position: relative; box-sizing: border-box; height: auto; padding: 10px; font-size: 16px; } .form-login .form-control:focus { z-index: 2; } .form-login input[type="text"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .form-login input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } form a{ display: inline-block; margin-top:25px; font-size: 12px; line-height: 10px; } ~~~ 好了，現在可以重啟服務器，刷新登錄頁面，看看效果了： ![](https://img.kancloud.cn/41/73/41732513c38a8b6fce2fc7dfb2887f40_577x535.png) <br /> 以上關于前端的相關內容，實在難以一言述盡，需要大家具備一定的基礎。做Django開發，其實就是全棧開發，沒有一定的前端能力，很難做好。前端知識薄弱的同學，不會太難太深入，那是前端工程師的要求；也不會太簡單，足以應付Django的前端開發需求。