设计登陆需求页面
設(shè)計(jì)登陸需求頁面
1.靜態(tài)文件設(shè)置
settings.py文件中添加static路徑（根目錄下插件static目錄） STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"), )2.static下創(chuàng)建相關(guān)內(nèi)容
1.bootstrap 下載bootstrap，將目錄bootstrap-3.3.7-dist直接拷貝到static下 2.創(chuàng)建css和js目錄，將下載號(hào)的jquery文件拷貝至js中3.在templates下創(chuàng)建base.html的網(wǎng)頁模板文件
base.html中寫入以下內(nèi)容
{% load staticfiles %} <!--引用靜態(tài)文件--> <!DOCTYPE html> <html lang="zh-CN"><head><!--設(shè)置字符集、瀏覽器優(yōu)先渲染模式以及可視區(qū)域設(shè)置等，不用修改，按模板默認(rèn)的就行--><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --><title>{% block title %}base{% endblock %}</title> <!--通過模板設(shè)置title動(dòng)態(tài)加載--><!-- Bootstrap 將放入static下對(duì)應(yīng)的內(nèi)容加載進(jìn)來，導(dǎo)入bootstrap樣式文件，通過模板設(shè)置動(dòng)態(tài)加載--><link href="{% static '/bootstrap-3.3.7-dist/css/bootstrap.css' %}" rel="stylesheet">{% block css %}{% endblock %} <!--通過模板設(shè)置css動(dòng)態(tài)加載--><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><!--用于支持ie9以下的版本支持h5,按alt+enter點(diǎn)擊下載即可--><script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--><!-- 導(dǎo)入jquery插件,通過模板設(shè)置動(dòng)態(tài)加載 --><script src="{% static 'js/jquery-3.3.1.js' %}"></script><!-- 導(dǎo)入bootstrap的js文件,通過模板設(shè)置動(dòng)態(tài)加載--><script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script></head><body><!--下面的nav為導(dǎo)航條，是使用的bootstrap，可以作為模板頁面，供其他登陸注冊(cè)頁面公用--><nav class="navbar navbar-default" role="navigation"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#">登陸頁面</a></div><ul class="nav navbar-nav navbar-right"><li><a href="#"><span class="glyphicon glyphicon-user"></span> 注冊(cè)</a></li><li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登錄</a></li></ul></div></nav>{% block content %}{% endblock %} <!--為具體主體內(nèi)容留下接口--></body> </html>4.寫login.html登陸頁面
{% extends 'base.html' %} <!--繼承base網(wǎng)頁模板內(nèi)容,可以瀏覽網(wǎng)頁查看效果--> {% load staticfiles %} <!--載入靜態(tài)方法，用于加載static中的文件--> {% block title %}登陸{% endblock %} <!--設(shè)置title，默認(rèn)使用base模板中的--> {% block css %}<link href="{% static 'css/login.css'%}" rel="stylesheet" />{% endblock %} <!--使用自定義的css登陸樣式，不用base中的-->{% block content %} <!--該模板語言用于定義主體內(nèi)容，和模板中的結(jié)合使用--><div class="container"><div class="col-md-4 col-md-offset-4"><form class='form-login' action="/templates/login/" method="post"><h2 class="text-center">歡迎登錄</h2><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><button type="reset" class="btn btn-default pull-left">重置</button><button type="submit" class="btn btn-primary pull-right">提交</button></form></div></div> <!-- /container --> {% endblock %}5.css下創(chuàng)建login.css，寫樣式
body {background-color: #eee; } .form-login {max-width: 330px;padding: 15px;margin: 0 auto; } .form-login .form-control {position: relative;height: auto;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;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; }這個(gè)是最后看到的登陸頁面
那么到這里login.html的網(wǎng)頁設(shè)計(jì)部分就完成了，接下來需要做的就是后端的部分了，接收用戶輸入的表單數(shù)據(jù)，保存至數(shù)據(jù)庫，并做一些簡(jiǎn)單的邏輯判斷（如賬號(hào)密碼不能為空，賬號(hào)密碼不匹配等）
轉(zhuǎn)載于:https://www.cnblogs.com/endmoon/p/9744734.html
總結(jié)
- 上一篇： 并发编程-单元练习题
- 下一篇： 工作中涉及运维知识点的汇总