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
