您的位置：首页 > Web前端 > BootStrap

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

2015-04-02 15:17 716 查看

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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航