下載bootstrap
bootstrap是一個前端框架，有很多已經做好的比較好看的css js效果，如果你前端想快點寫好（或者你前端寫的不是很漂亮），可以借助這個框架
bootstrap (http://www.bootcss.com/）下載bootstrap源碼，放到djagno的static目錄
引入bootstrap css
然后在你需要使用bootstrap精美效果的html文件中去使用這些樣式
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css"> <title>Title</title> <style> body { background-color: #eee; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4" style="margin-top: 100px"> <h1 class="text-center">請登錄</h1> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label"></label> <div class="input-group col-sm-8"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span> <input type="" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label"></label> <div class="input-group col-sm-8"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="input-group col-sm-offset-2 col-sm-8"> <div class="checkbox"> <label> <input type="checkbox"> 記住我 </label> </div> </div> </div> <div class="form-group"> <div class="input-group col-sm-offset-2 col-sm-8"> <button type="submit" class="btn btn-primary btn-block">登錄</button> </div> </div> </form> </div> </div> </div> </body> </html>
你會發現，很多class for 屬性使用的不是你自己寫的css樣式，對，它們是bootstrap樣式，如果你想深入學習bootstrap常用效果，可以去官網學習這些樣式如何使用
配置django url/view
效果圖
啟動django，頁面返回成功了
但是，這只是一個頁面，你還不能登陸
用戶登陸
准備好三個頁面
有三個頁面：首頁 index.html、登陸頁login.html、登陸成功后的頁面 vippage.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/commons.css" /> </head> <body> <h2><a href="/login/">登陸</a></h2> <h1>Hello Django</h1> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css"> <title>mysite-登錄頁面</title> <style> body { background-color: #eee; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4" style="margin-top: 100px"> <h1 class="text-center">請登錄</h1> <form class="form-horizontal" action="/login/" method="post"> {% csrf_token %} <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label"></label> <div class="input-group col-sm-8"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span> <input type="" name="username" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label"></label> <div class="input-group col-sm-8"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span> <input type="password" name="pwd" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="input-group col-sm-offset-2 col-sm-8"> <div class="checkbox"> <label> <input type="checkbox"> 記住我 </label> </div> </div> </div> <div class="form-group"> <div class="input-group col-sm-offset-2 col-sm-8"> <button type="submit" class="btn btn-primary btn-block">登錄</button> </div> </div> <p class="text-danger text-center">{{ error }}</p> </form> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2><a href="/">首頁</a></h2> <h1>VIP界面...</h1> </body> </html>
補充
action 表單提交給哪個url methon 提交方式 csrf_token csrf 表單安全機制 name 提交的字段
用戶操作
request.POST輸出信息為
<QueryDict:
{'csrfmiddlewaretoken': ['9avjvBpq4kChezl1DTjR0cCq467DccMfaguQrQB23rDTL51xH5gUElX0Bi8bqxrq'],
'username': ['admin'], 'pwd': ['admin123']}
>
QueryDict是django自定義類型（說白了就是定義了一個類...）
django源碼
因此，當你發現一些你不知道的數據類型，那就是django定義的類
用戶賬號判斷
這里的"admin" "admin123" 應該從數據庫中取出來，由於還沒有設計數據庫，因此用模擬數據
render 用於返回html，第三個參數可以是一個字典，用於html接收 redirect 用於重定向到某個url HttpResponse 用於返回一個字符串（說白了功能比render少唄）
提交方式
1.瀏覽器默認的提交方式是GET
2.GET 得到，表達的是獲取數據，POST 提交，表達的是輸入數據，不過這只是一種規范。
你也可以通過GET提交，POST獲取，但是要注意的是，GET方式提交的數據大小有限制，且安全性不高（數據會出現在地址欄）
最后，其實提交方式有這些： GET、POST、PUT、PATCH（修改）、DELETE（刪除）、OPTIONS、HEAD、TRACE，
一般只用get post就夠了，查用get,剩下的操作可以交給post