设计登陆需求页面

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的网页设计部分就完成了,接下来需要做的就是后端的部分了,接收用户输入的表单数据,保存至数据库,并做一些简单的逻辑判断(如账号密码不能为空,账号密码不匹配等)