Django--登录实例

1、准备工作

创建必要的目录和文件，导入js，css，bootstrap等，目录结构如下：



2、配置文件添加static路径

settings.py
1
2
3
4
STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR,'static'),
)


3、引用文件（js\css\bootstrap）

login.html
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/static/plugin/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/common.css">
</head>
<body>
    <script type="text/javascript" src="/static/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/static/plugin/bootstrap/js/bootstrap.js"></script>
</body>
</html>


4、在bootstrap网页中随便找一个登录框

login.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>


5、添加路由

urls.py
1
2
3
4
5
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/', views.login),
]
app01/views.py
1
2
def login(request):
    return render(request,'login.html')


6、form表单提交到的地方

login.html
1
<form class="form-horizontal" action="/login/">


7、input设置name属性

login.html

1
2
<input type="email" class="form-control" name="email" placeholder="Email">
<input type="password" class="form-control" name="pwd" placeholder="Password">


8、定义表单提交的方式：metho​d=‘post’

login.​html

1
<form class="form-horizontal" action="/login/" method="post">


9、判断用户请求方式，修改login函数

  • 如果是get请求，返回login.html页面

  • 如果是post请求，检验用户输入是否正确，对了就跳转，反之就提示错误

views.py
1
2
3
4
5
6
7
8
9
10
11
from django.shortcuts import render
from django.shortcuts import redirect
def login(request):
    if request.method == 'POST':
        input_email = request.POST['email']
        input_pwd = request.POST['pwd']
        if input_email == 'user1@qq.com' and input_pwd == '123':
            return redirect("http://www.etiantian.org")
        else:
            return render(request,"login.html",{"status":"用户名密码错误"})
    return render(request,'login.html')


10、在提交按钮的后面加入错误提示的span标签

login.html

1
2
<button type="submit" class="btn btn-default">Sign in</button>
   <span style="color: red">{{ status }}</span>


11、暂时屏蔽表单提交的403错误（以后跨站请求伪造的时候会解决）

settings.py
1
2
3
4
5
6
7
8
9
10
MIDDLEWARE_CLASSES = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',      #把此行注释
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]


12、验证结果













posted @ 2016-03-12 02:50  大亮头  阅读(2595)  评论(0)    收藏  举报