django的用户管理系统
实现django的一个用户管理系统----1：增加，2：删除，3：编辑
制作一个有数据库的项目的时候重中之重就是要设计好表之间的逻辑关系----即model
1--首先设计model，这个就是数据库
2--设计login的登录界面
3--验证用户名和密码之后，如果正确则跳转到显示界面----即index界面
4--点击用户管理后会进入到用户管理的界面，这个时候我们就可以选择哪条然后对
这条进行编辑，删除，增加
5--增加
6--删除
7--展示添加之后的userlist
8--进入到某个用户名下，查看这个用户的具体的详细的信息
9--退出
10--注册
在制作一个带有数据库的项目的时候，重中之重就是要设计好数据库----即model
首先定义一下数据库----model
class UserInfo(models.Model):
Nid = models.AutoField(primary_key=True)
UserName = models.CharField(max_length=50)
Password = models.CharField(max_length=256)
RealName = models.CharField(max_length=256)
Email = models.EmailField(max_length=256)
登录界面
login.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Login</title>
<link rel="stylesheet" href='/static/css/common.css' />
</head>
<body>
<div class='login'>
<fieldset>
<legend>Login</legend>
<form id='form' method='post' action='/admin/index/' >
{% csrf_token %}
<p>
<label for='user'>UserName：</label>
<input type='text' id='user' name='username' />
</p>
<p>
<label for='pwd'>Password：</label>
<input type='password' id='pwd' name='password' />
</p>
<p><label> </label>
<input type='submit' value='submit' /> <span class='wrong'>{{ LoginStatus }}</span> </p>
</form>
</fieldset>
</div>
<script src='/static/js/jquery-1.8.2.js' ></script>
<script src='/static/js/wupeiqi.js' ></script>
<script>
$(function(){
$.validate('#form');
})
</script>
</body>
</html>
在views中的login的函数
def Login(request):
data = {'LoginStatus':''}
if request.method == 'POST':
postData = request.POST
username = postData.get('username')
password = postData.get('password')
if username and password:
result = UserInfo.objects.filter(UserName=username,Password=password)
if result == 1:
request.session["LoginModel"] = UserInfo.objects.get(UserName=username,Password=password)
return redirect('/admin/index')
data['LoginStatus'] = '用户名或密码错误.'
return render_to_response('Account/Login.html',data,context_instance=RequestContext(request))
接着进入到欢迎界面
点击用户管理，如图
views
def Index(request):
return render_to_response('Home/Index.html')
layout/Master.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<link rel="stylesheet" href='/static/css/common.css' />
{% block css %} {% endblock%}
</head>
<body>
<div class='pg-title'>
<ul>
<li><a>AutoHome</a></li>
</ul>
</div>
<div class='pg-body'>
<div class='body-menu'>
<div>
<div class="menu-title">Menu1</div>
<div class="menu-body">
<a href="/admin/userlist/">用户管理</a>
<a href="">content2</a>
<a href="">content3</a>
</div>
</div>
<div>
<div class="menu-title">Menu1</div>
<div class="menu-body hide">
<a href="">content1</a>
<a href="">content2</a>
<a href="">content3</a>
</div>
</div>
<div>
<div class="menu-title">Menu1</div>
<div class="menu-body hide">
<a href="">content1</a>
<a href="">content2</a>
<a href="">content3</a>
</div>
</div>
</div>
<div class='body-content'> {% block content %} {% endblock%} </div>
</div>
<div></div>
<script type="text/javascript" src='/static/js/jquery-1.8.2.js'></script>
{% block javascript %} {% endblock%}
<script type="text/javascript">
$(function(){
$('.menu-title').click(function(){
$(this).parent().siblings().children('.menu-body').addClass('hide');
$(this).next().removeClass('hide');
});
});
</script>
</body>
</html>
index html{% extends 'Layout/Master.html'%}
{% block css %} <link rel="stylesheet" href='/static/bootstrap/css/bootstrap.css' /> {% endblock%}
{% block content %} <h1>欢迎登录.</h1> {% endblock%}
{% block javascript %} <script type="text/javascript" src='/static/bootstrap/js/bootstrap.js'></script> {% endblock%}
添加用户
views
def AddUser(request):
postData = request.POST
nid = postData.get('nid')
username = postData.get('username')
name = postData.get('name')
gender = postData.get('gender')
gender2 = postData.get('gender2')
password = postData.get('password')
email = postData.get('email')
if username and name and password and email:
if int(nid) == 0:
userInfo = UserInfo(UserName = username,Password=password,RealName = name,Email = email,Gender = gender)
userInfo.save()
else:
UserInfo.objects.filter(Nid = nid).update(UserName = username,Password=password,RealName = name,Email = email,Gender = gender)
return redirect('/admin/userlist')
userlist的html
{% extends 'Layout/Master.html'%}
{% block css %} <link rel="stylesheet" href='/static/bootstrap/css/bootstrap.css' /> {% endblock%}
{% block content %}
<div>
<input type='button' value='添加' onclick='AddItem();' />
</div>
<table style='1'>
<tr>
<td>用户名</td>
<td>姓名</td>
<td>性别</td>
<td>密码</td>
<td>邮箱</td>
<td>操作</td>
</tr>
{% for item in model%}
<tr>
<td class='hide'>{{item.Nid}}</td>
<td><a href='/admin/userdetail/{{item.Nid}}'>{{item.UserName}}</a></td>
<td>{{item.RealName}}</td>
<td>{% ifequal item.Gender 1 %}
男
{% else %}
{% ifequal item.Gender 0 %}
女
{% else %}
null
{% endifequal %}
{% endifequal %}
</td>
<td>{{item.Password}}</td>
<td>{{item.Email}}</td>
<td>
<a onclick='EditItem(this);' class='label label-success'>编辑</a>
<a onclick='DeleteItem(this);'>删除</a></td>
</tr>
{% endfor %}
</table>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
<ul class="pagination"> {{page}} </ul>
<!-- 添加层开始 -->
<div id='wpq-modal' class='wpq-modal hide'>
<div class='cancle' onclick='CancleShade();'>x</div>
<div class='title'>提示</div>
<form id='form' class='form' method='post' action='/admin/adduser/'>
{% csrf_token %}
<div>
<input type='hidden' id='nid' name='nid' />
<p>
<label for='user'>用户名：</label>
<input type='text' id='user' name='username' />
</p>
<p>
<label for='name'>姓名：</label>
<input type='text' id='name' name='name' />
</p>
<p>
<label for='gengder'>性别：</label>
<span id='gender'>
女<input type='radio' name='gender' value='0' text='女' />
男<input type='radio' name='gender' value='1' text='男' />
</span>
</p>
<p>
<label for='gender2'>性别：</label>
<select id='gender2' name='gender2'>
<option value='0' text='女'>女</option>
<option value='1' text='男'>男</option>
</select>
</p>
<p>
<label for='pwd'>密码：</label>
<input type='text' id='pwd' name='password' />
</p>
<p>
<label for='email'>邮箱：</label>
<input type='text' id='email' name='email' />
</p>
</div>
<div class='bottom'>
<input type='submit' value='确定'/>
<input type='button' value='关闭' onclick='CancleShade();'/>
</div>
</form>
</div>
<!-- 添加层结束 -->
<!-- 删除层开始 -->
<div id='wpq-modal-del' class='wpq-modal hide'>
<div class='cancle' onclick='CancleShade();'>x</div>
<div class='title'>提示</div>
<form id='form1' class='form' method='post' action='/admin/deluser/'>
{% csrf_token %}
<div>
<input type='hidden' id='delnid' name='delnid' /> 真的不要我了吗？ </div>
<div class='bottom'>
<input type='submit' value='确定'/>
<input type='button' value='关闭' onclick='CancleShade();'/>
</div>
</form>
</div>
<!-- 删除层结束 -->
<!-- 遮罩层开始 -->
<div id='shade' class='shade hide'></div>
<!-- 遮罩层结束 -->
{% endblock%}
{% block javascript %}
<script type='text/javascript' src='/static/js/wupeiqi.js'></script>
<script type="text/javascript" src='/static/bootstrap/js/bootstrap.js'></script>
<script type='text/javascript'>
$(function(){
$.validate('#form'); })
function AddItem(){
$('#form :text').val(null);
$('#wpq-modal,#shade').removeClass('hide'); }
function CancleShade(){
$('#wpq-modal,#shade').addClass('hide'); }
function EditItem(arg){
var data = []
var others = $(arg).parent().prevAll();
$.each(others,function(i,value){
data.push($(value).text()); })
data = data.reverse()
$('#nid').val(data[0]);
$('#user').val(data[1]);
$('#name').val(data[2]);
$("#gender input[text='" + data[3].trim() + "']").attr("checked", true);
$("#gender2 option[text='" + data[3].trim() + "']").attr("selected", true);
$('#pwd').val(data[4]);
$('#email').val(data[5]);
$('#wpq-modal,#shade').removeClass('hide'); }
function DeleteItem(arg){
var data = []
var others = $(arg).parent().prevAll();
$.each(others,function(i,value){
data.push($(value).text()); })
data = data.reverse()
$('#delnid').val(data[0])
$('#wpq-modal-del,#shade').removeClass('hide');
}
</script>
{% endblock%}
userlist表单
def UserList(request):
result = UserInfo.objects.all()
return render_to_response('Home/UserList.html',{'model':result},context_instance=RequestContext(request))
随后返回userlist的html
Userdetail的表单
def UserDetail(request,id):
result = UserInfo.objects.get(Nid=int(id))
return render_to_response('Home/UserDetail.html',{'model':result})
Userdetail的html
{% extends 'Layout/Master.html'%}
{% block content %}
<p>用户名：{{key1.UserName}}</p>
<p>姓名：{{key1.RealName}}</p>
<p>性别：{% ifequal key1.Gender 1 %}
男
{% else %}
{% ifequal key1.Gender 0 %}
女
{% else %}
null
{% endifequal %}
{% endifequal %} </p>
<p>密码：{{key1.Password}}</p>
<p>邮箱：{{key1.Email}}</p>
{% endblock%}
loginform
def LoginByForm(request):
data = request.POST
loginForm = LoginForm(data)
if loginForm.is_valid():
return HttpResponse('OK')
else:
return render_to_response('Account/LoginForm.html',context_instance=RequestContext(request))
loginform的html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Login</title>
<link rel="stylesheet" href='/static/css/common.css' />
</head>
<body>
<div class='login'>
<fieldset>
<legend>登录</legend>
<form id='form' method='post' action='/admin/loginform/' >
{% csrf_token %}
<table>
{{model.as_table}}
</table>
<p><label> </label><input type='submit' value='提交' /> <span class='wrong'>{{ LoginStatus }}</span> </p>
</form>
</fieldset>
</div>
<script src='/static/js/jquery-1.8.2.js' ></script>
<script src='/static/js/wupeiqi.js' ></script>
<script>
$(function(){
//$.validate('#form');
})
</script>
</body>
</html>
最后
退出登录
def Logout(request):
pass
def Register(request):
pass
