设计登陆需求页面
設計登陸需求頁面
1.靜態文件設置
settings.py文件中添加static路徑（根目錄下插件static目錄） STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"), )2.static下創建相關內容
1.bootstrap 下載bootstrap，將目錄bootstrap-3.3.7-dist直接拷貝到static下 2.創建css和js目錄，將下載號的jquery文件拷貝至js中3.在templates下創建base.html的網頁模板文件
base.html中寫入以下內容
{% load staticfiles %} <!--引用靜態文件--> <!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"><!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --><title>{% block title %}base{% endblock %}</title> <!--通過模板設置title動態加載--><!-- Bootstrap 將放入static下對應的內容加載進來，導入bootstrap樣式文件，通過模板設置動態加載--><link href="{% static '/bootstrap-3.3.7-dist/css/bootstrap.css' %}" rel="stylesheet">{% block css %}{% endblock %} <!--通過模板設置css動態加載--><!-- 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點擊下載即可--><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]--><!-- 導入jquery插件,通過模板設置動態加載 --><script src="{% static 'js/jquery-3.3.1.js' %}"></script><!-- 導入bootstrap的js文件,通過模板設置動態加載--><script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script></head><body><!--下面的nav為導航條，是使用的bootstrap，可以作為模板頁面，供其他登陸注冊頁面公用--><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> 注冊</a></li><li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登錄</a></li></ul></div></nav>{% block content %}{% endblock %} <!--為具體主體內容留下接口--></body> </html>4.寫login.html登陸頁面
{% extends 'base.html' %} <!--繼承base網頁模板內容,可以瀏覽網頁查看效果--> {% load staticfiles %} <!--載入靜態方法，用于加載static中的文件--> {% block title %}登陸{% endblock %} <!--設置title，默認使用base模板中的--> {% block css %}<link href="{% static 'css/login.css'%}" rel="stylesheet" />{% endblock %} <!--使用自定義的css登陸樣式，不用base中的-->{% block content %} <!--該模板語言用于定義主體內容，和模板中的結合使用--><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下創建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; }這個是最后看到的登陸頁面
那么到這里login.html的網頁設計部分就完成了，接下來需要做的就是后端的部分了，接收用戶輸入的表單數據，保存至數據庫，并做一些簡單的邏輯判斷（如賬號密碼不能為空，賬號密碼不匹配等）
轉載于:https://www.cnblogs.com/endmoon/p/9744734.html
總結
- 上一篇： 并发编程-单元练习题
- 下一篇： 工作中涉及运维知识点的汇总