當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

设计登陆需求页面

發(fā)布時(shí)間：2025/7/14 编程问答 17 豆豆

生活随笔收集整理的這篇文章主要介紹了设计登陆需求页面小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

設(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 %}  <!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"><title>{% block title %}base{% endblock %}</title> <link href="{% static '/bootstrap-3.3.7-dist/css/bootstrap.css' %}" rel="stylesheet">{% block css %}{% endblock %} <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]--><script src="{% static 'js/jquery-3.3.1.js' %}"></script><script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script></head><body><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 %} </body> </html>

4.寫login.html登陸頁面

{% extends 'base.html' %}  {% load staticfiles %}  {% block title %}登陸{% endblock %}  {% block css %}<link href="{% static 'css/login.css'%}" rel="stylesheet" />{% endblock %} {% 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>  {% 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é)

以上是生活随笔為你收集整理的设计登陆需求页面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。