Django1.7.2+Bootstrap3.3.0 整合八：创建后台登录页面

来源：互联网发布：limp bizkit 知乎编辑：程序博客网时间：2024/06/05 06:13

1 创建视图页面

在/website_python/templates/manage下创建页面：login.html，内容如下：

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <meta name="description" content="">    <meta name="author" content="">    <title>Bootstrap's DEMO</title>    <!-- Bootstrap core CSS -->    <link href="/resource/bootstrap-v3.3.0/css/bootstrap.min.css" rel="stylesheet">    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->    <!--[if lt IE 9]>      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>    <![endif]-->        <style type="text/css">*{margin:0;padding: 0;}body{background: #444 url(/resource/manage/images/bg_body.jpg);font-family:"宋体";}.loginBox{width:420px;height:280px;padding:0 20px;border:1px solid #fff; color:#000; margin-top:40px; border-radius:8px;background: white;box-shadow:0 0 15px #222; background: -moz-linear-gradient(top, #fff, #efefef 8%);background: -webkit-gradient(linear, 0 0, 0 100%, from(#f6f6f6), to(#f4f4f4));font:11px/1.5em 'Microsoft YaHei' ;position: absolute;left:50%;top:50%;margin-left:-210px;margin-top:-165px;}.loginBox h2{height:45px;font-size:20px;font-weight:normal;}.loginBox .left{border-right:1px solid #ccc;height:100%;padding-right: 20px; }.regBtn{margin-top:21px;}    </style>  </head>  <body><div class="container"><div class="loginBox row"><h2 class="text-center">后台登录</h2><form id="wyccn" name="wyccn" action="#" method="post" class="form-horizontal"><div class="form-group has-success"><label for="nick_name" class="col-sm-3 col-md-3 control-label">用户名</label><div class="col-sm-8 col-md-8"><input type="text" class="form-control" name="nick_name" placeholder="用户名" value=""></div></div><div class="form-group has-success"><label for="user_password" class="col-sm-3 col-md-3 control-label">密码</label><div class="col-sm-8 col-md-8"><input type="password" class="form-control" name="user_password" placeholder="密码"></div></div><div class="form-group"><div class="col-sm-offset-4 col-sm-10" style="color: #990033;"></div></div><div class="form-group"><div class="col-sm-offset-4 col-sm-10 col-md-10"><input type="hidden" name="url" value="/admin" /><button class="btn btn-info" data-loading-text="正在登录..." type="submit">登 录</button><button class="btn btn-info" type="reset">清 空</button></div></div></form></div></div><!-- Bootstrap core JavaScript -->    <script src="/resource/jquery/jquery-2.1.3.min.js"></script>    <script src="/resource/bootstrap-v3.3.0/js/bootstrap.min.js"></script>  </body></html>

2 修改views.py

按照前文的方法在views.py中增加如下代码：

def login(request):    return render_to_response('manage/login.html')

3 修改urls.py

修改urls.py，在urlpatterns中增加：

('^manage/login/$', login),

注意要import view。

4 测试访问

打开cmd，转入项目目录下输入：python manage.py runserver

然后打开浏览器输入：http://127.0.0.1:8000/manage/login/

5 项目代码下载

http://download.csdn.net/detail/xz2001/8557767

0 0