實現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