zoukankan      html  css  js  c++  java
  • Django登录页面优化

      环境准备

    1.python3.6
    2.django2.0+
    3.bootstrap3
    

      

      后台代码

    #创建login_check视图函数,用来处理登录
    def login_action(request):
        if request.method == "POST":
            username = request.POST.get('username','')
            password = request.POST.get('password','')
            remember = request.POST.get('remember','')
            print(remember)
            user = auth.authenticate(username=username,password=password)
            if user is not None:
                auth.login(request,user) #登陆
                request.session['user'] = username 
                response = HttpResponseRedirect('/event_manager/')
                
                if remember == "on":
                    # 设置cookie username *过期时间为1周
                    response.set_cookie('username', username, max_age=7 * 24 * 3600)
                return response
    
            else:
                # return render(request,'index.html',{'error':'username or password error!'})
                return redirect('/login/')
    

     

    #登录显示页面
    def login(request):
        '''显示登陆页面'''
        # 获取cookie username
        if 'username' in request.COOKIES:
            # 获取记住的用户名
            username = request.COOKIES['username']
            print("用户名名:%s"%username)
        else:
            username = ''
        return render(request,'index_bak.html',{'username': username})
    

      

      前端HTML部分代码

    <div class="container" style="margin-top: 13%;">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="panel panel-success">
                    <div class="panel-heading">登录信息</div>
                    <div class="panel-body">
                        <form action="/login_action/" method="post">
                            <div class="form-group has-feedback">
                                <i class="fa fa-user fa-lg"></i>
                                <input type="text" class="form-control" name="username" value="{{ username }}"
                                       placeholder="用户名">
                            </div>
                            <div class="form-group has-feedback">
                                <i class="fa fa-lock fa-lg"></i>
                                <input type="password" class="form-control" name="password"
                                       placeholder="密码">
                            </div>
                            <div class="form-group">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="remember">记住用户名
                                    </label>
                                </div>
                            </div>
                            <!-- button的btn-block 可以占满当前珊栏而不用自适应。-->
                            <button type="submit" class="btn btn-success btn-block btn-lg">登录</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

      访问登录页面

     再对比一下bootstrap默认的登录风格:

    到此,登录页面优化完成,如需源码,请进群获取。

  • 相关阅读:
    $(document).ready(function() {。。。。。})里面的所有的代码都不执行(不执行初始化脚本)
    checkbox使用示例
    js中数组元素的添加和删除
    maven构建项目里classpath的位置
    Docker相关释义
    linux的systemctl服务及其使用
    RabbitMQ中客户端的Channel类里各方法释义
    java四种内部类详解
    生成随机字符串(三种方式)
    RabbitMQ在java中基础使用
  • 原文地址:https://www.cnblogs.com/liudinglong/p/12283210.html
Copyright © 2011-2022 走看看