设计登陆需求页面
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
时间： 2024-10-13 21:33:10