templates/test.html

<body class="hold-transition lockscreen" style="background-color: #808080">
<!-- Automatic element centering -->
<div class="lockscreen-wrapper">
    <div class="lockscreen-logo">
        <a href="javascript:void(0)"><b>巨人</b>运维管理系统</a>
    </div>
    <!-- User name -->
    <div class="lockscreen-name">{{ user.username }}</div>

    <!-- START LOCK SCREEN ITEM -->
    <div class="lockscreen-item">
        <!-- lockscreen image -->
        <div class="lockscreen-image">
            <img src="{{ MEDIA_URL }}{{ user.image }}" alt="User Image">
        </div>
        <!-- /.lockscreen-image -->

        <!-- lockscreen credentials (contains the form) -->
        <form class="lockscreen-credentials" action="{% url 'lock_screen' %}" method="post">
            {% csrf_token %}
            <div class="input-group">
                <input type="password" class="form-control" placeholder="password" name="pwd">

                <div class="input-group-btn">
                    <button type="button" class="btn"><i class="fa fa-arrow-right text-muted"></i></button>
                </div>
            </div>
        </form>
        <!-- /.lockscreen credentials -->

    </div>
    <!-- /.lockscreen-item -->
    <div class="help-block text-center">
        {% if login_error_info %}
            {{ login_error_info }}
        {% else %}
            Enter your password to retrieve your session
        {% endif %}
    </div>
    <div class="text-center">
        <a href="{% url 'login' %}">使用另一个用户登录</a>
    </div>
    <div class="lockscreen-footer text-center">
        Copyright &copy; 2014-2018 <b><a href="https://www.juren.com" class="text-black">巨人</a></b><br>
        All rights reserved
    </div>
</div>

<script language="javascript">
    //防止页面后退
    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', function () {
        history.pushState(null, null, document.URL);
    });
</script>