Django实现的用户登录（连接数据库版）
经过前面的数据库学习以及实战（1）的基础知识，今天完成了连接数据的登录与注册功能。
主要实现的功能有以下几个:
- 登录功能
- 注册功能
- 用户登录后可以修改个人信息
注:本项目多次引用了{% include 'bootcss.html' %}，这是个引用bootstrap包的页面，本案例引用bootstrap使页面看起来更好看，最后会把bootcss.html这个页面写上。
案例中由于大量引用bootstrap导致页面代码非常长，实际可以写的很简单，只不过那样页面看起来很丑。
项目名--myshop
app名--login_res
1.首先修改myshop下的settings.py文件将app名注册到INSTALLED_APPS
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'blog',
'login_res', #app名
]2.在myshop的urls.py文件中添加app的路由（记得最后加，号）
url(r'^login_res/',include('login_res.urls')),3.生成数据表，在app下的models.py文件中添加一个类（连接数据库Django实战笔记（2）有，这里不再演示）
class User(models.Model):
name=models.CharField(max_length=50)
pswd=models.CharField(max_length=200)
eml=models.CharField(max_length=100,null=True)
phone=models.CharField(max_length=11,null=True)
age=models.IntegerField(null=True)
jianjie=models.TextField(null=True)
sex=models.CharField(max_length=2,null=True)
分别是user表的各个字段以及数据类型，再打开终端cd到项目目录下（如果是pyCharm的话切换到终端就行）分别执行
python manage.py makemigrations
python manage.py migrate
4.关于注册的操作（执行操作方法最重要）
4.1注册页面res.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
{% include 'bootcss.html' %}
<div class="jumbotron">
<h1>注册</h1>
<a href="{% url 'login' %}" class="btn btn-primary">去登录</a>
<hr>
<div class="container">
<div class="row">
<form action="{% url 'do_res' %}" method="post" class="form-horizontal">
{% csrf_token %}
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputEmail3" name='username' placeholder="用户名"
required> {% if request.session.error %}{{ request.session.error }}
{% endif %}
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-4">
{% if request.session.error %}
<input type="password" class="form-control" id="inputPassword3" name='pswd' placeholder="密码"
required value="{{ pswd }}">
{% else %}
<input type="password" class="form-control" id="inputPassword3" name='pswd' placeholder="密码"
required>
{% endif %}
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">手机号</label>
<div class="col-sm-4">
{% if request.session.error %}
<input type="text" class="form-control" id="inputPassword3" name='phone' placeholder="手机号"
required value="{{ phone }}">
{% else %}
<input type="text" class="form-control" id="inputPassword3" name='phone' placeholder="手机号"
required>
{% endif %}
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<button type="submit" class="btn btn-success">注册</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
4.2在app下的urls.py中添加路由
# 显示添加页面
url(r'^res/$', views.res, name='res'),
#执行添加操作
url(r'^do_res/$', views.do_res, name='do_res'),4.3在app下的views.py中添加显示注册页面方法和执行注册操作的方法
# 显示注册页面
def res(request):
try :
del request.session['error']
except:
return render(request, 'login_res/res.html')
return render(request, 'login_res/res.html')
# 注册操作
def do_res(request):
name = request.POST.get('username')
if not User.objects.filter(name=name):
pswd = request.POST.get('pswd')
phone = request.POST.get('phone')
User.objects.create(name=name, pswd=pswd, phone=phone)
return redirect(reverse('login')) # 注册成功，重定向到登录页面
else:
request.session['error'] = '用户名已存在'
con={
'pswd':request.POST.get('pswd'),
'phone':request.POST.get('phone'),
}
return render(request,'login_res/res.html',con)
5.关于登录操作
5.1登录页面login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
{% include 'bootcss.html' %}
<div class="jumbotron">
<h1>登录</h1>
<a class="btn btn-primary" href="{% url 'res' %}" role="button">去注册</a>
<hr>
<div class="container">
<div class="row">
<div style="margin: 0 auto;">
<form action="{% url 'do_login' %}" method="post" class="form-horizontal">
{% csrf_token %}
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputEmail3" name='username' placeholder="用户名"
required>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword3" name='pswd' placeholder="密码"
required>
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<button type="submit" class="btn btn-success">登录</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>5.2用户名或密码错误页面login_error.html(此页面引入了login.html页面，只添加了错误信息)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
{% include 'bootcss.html' %}
<div class="container">
<div class="row">
<h3 style="color: red">用户名或密码错误</h3>
</div>
</div>
{% include 'login_res/login.html' %}
</body>
</html>5.3在app下的urls.py中添加路由
#显示登录页面
url(r'^login/$', views.login, name='login'),
#用户名密码错误页面
url(r'^login_error/$', views.login_error, name='login_error'),
#执行登录操作
url(r'^do_login/$', views.do_login, name='do_login'),5.4在app下的views.py中添加显示登录页面方法和执行登录操作的方法
#显示登录页面
def login(request):
return render(request,'login_res/login.html')
#登录操作
def do_login(request):
username=request.POST.get('username')
pswd=request.POST.get('pswd')
print('前端密码'+pswd)
try:
#查找到该用户的对象
obj=User.objects.get(name=username) #没错误说明查到了该对象
if obj.pswd==pswd:
request.session['username']=username#将该对象的密码与前台密码比较
print('数据库密码' + obj.pswd)
con={
'username':username
}
return redirect(reverse('index'),con)
else:
return render(request, 'login_res/login_error.html')
except :
return render(request,'login_res/login_error.html')
#显示登录错误页面
def login_error(request):
return render(request,'login_res/login_error.html')6.关于个人信息的查看与修改
6.1个人信息页面xinxi.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人信息</title>
</head>
<body>
{% include 'bootcss.html' %}
<ul class="nav nav-tabs">
<li role="presentation"><a href="{% url 'index' %}">主页</a></li>
<li role="presentation"><a href="#">阅读</a></li>
<li role="presentation"><a href="#">娱乐</a></li>
{% if request.session.username %}
<li role="presentation" class="active"><a href="{% url 'xinxi' %}">个人信息</a></li>
{% endif %}
</ul>
<div class="jumbotron">
<h1>个人信息</h1>
{# <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>#}
<hr>
{# #显示欢迎小标题#}
{% include 'login_res/huanying_biaoti.html' %}
<form class="form-horizontal" method="post" action="{% url 'do_xinxi' %}">
{#<form class="navbar-form navbar-left" method="post" action="{% url 'do_xinxi' %}">#}
{% csrf_token %}
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="username" id="inputEmail3" readOnly='true'
value="{{ list.name }}">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">性别</label>
<div class="col-sm-4">
<select class="form-control" name="sex">
<option>男</option>
<option>女</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-4">
{% if list.age == None %}
<input type="text" class="form-control" name="age" id="inputEmail3" placeholder="年龄"
value="">
{% else %}
<input type="text" class="form-control" name="age" id="inputEmail3" placeholder="年龄"
value="{{ list.age }}">
{% endif %}
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">电话号码</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="phone" id="inputEmail3" placeholder="电话号码"
value="{{ list.phone }}">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-4">
{% if list.eml == None %}
<input type="email" class="form-control" name="eml" id="inputEmail3" placeholder="邮箱"
value="">
{% else %}
<input type="email" class="form-control" name="eml" id="inputEmail3" placeholder="邮箱"
value="{{ list.eml }}">
{% endif %}
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">个人简介</label>
<div class="col-sm-4">
<textarea class="form-control" rows="3" name="jianjie">{{ list.jianjie }}</textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<button type="submit" class="btn btn-primary" data-toggle="modal"
data-target=".bs-example-modal-sm">保存
</button>
<a href="{% url 'index' %}" class="btn btn-primary">返回主页</a>
</div>
</div>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<hr>
<div class="form-group has-success has-feedback">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>
<h4>修改成功</h4>
</div>
</div>
</div>
</form>
</div>
</body>
</html>6.2在app下的urls.py中添加路由
# 显示个人信息
url(r'^xinxi/$', views.xinxi, name='xinxi'),
# 保存个人信息
url(r'^do_xinxi/$', views.do_xinxi, name='do_xinxi'),6.3在app下的views.py中添加显示个人信息页面方法和执行修改个人信息操作的方法，显示信息时根据session中的用户名，取出该用户的其他信息并返回到前台页面显示；修改个人信息时，后台从前台表单中获取数据，并使用更新操作更新表数据。
#显示个人信息
def xinxi(request):
username=request.session['username']
print(username)
lists=User.objects.get(name=username)
print(lists)
con={
"list":lists
}
return render(request,'login_res/xinxi.html',con)
#保存个人信息
def do_xinxi(request):
username=request.POST.get('username')
sex=request.POST.get('sex')
age=request.POST.get('age')
phone=request.POST.get('phone')
eml=request.POST.get('eml')
jianjie=request.POST.get('jianjie')
res=User.objects.filter(name=username).update(sex=sex,age=age,phone=phone,eml=eml,jianjie=jianjie)
if res:
con={
'suss':'修改成功'
}
# return render(request,'login_res/xinxi.html')
return redirect(reverse('xinxi'),con)
else:
return HttpResponse('修改失败')7.最后本案例的其他几个页面和对应的操作。
7.1 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
</head>
<body>
{% include 'bootcss.html' %}
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="{% url 'index' %}">主页</a></li>
<li role="presentation"><a href="#">阅读</a></li>
<li role="presentation"><a href="#">娱乐</a></li>
{% if request.session.username %}
<li role="presentation"><a href="{% url 'xinxi' %}">个人信息</a></li>
{% endif %}
</ul>
<div class="jumbotron">
<h1>这是主页</h1>
{# <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>#}
<hr>
<div class="container">
<div class="row">
{% if request.session.username %}
{# #显示欢迎小标题#}
{% include 'login_res/huanying_biaoti.html' %}
<a href="{% url 'xinxi' %}" class="btn btn-info">个人信息</a><br><br>
<a href="{% url 'logout' %}" class="btn btn-info">注销</a>
<a href="{% url 'login' %}" class="btn btn-info">切换账号</a>
{% else %}
<div style="position: absolute;top: 5px;right:8px">
<h5>您还没 <a href="{% url 'login' %}">登录</a>~</h5>
</div>
<a href="{% url 'login' %}" class="btn btn-primary">登录</a>
<a href="{% url 'res' %}" class="btn btn-primary">注册</a>
{{ request.session.username }}
{% endif %}
</div>
</div>
</div>
</body>
</html>7.2欢迎标题 huangying_biaoti.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% if request.session.username %}
<div style="position: absolute;top: 5px;right:8px">
<h5><span>欢迎您，{{ request.session.username }}~ </span><a href="{% url 'logout' %}">注销</a>
</h5>
</div>
{% endif %}
</body>
</html>7.3urls.py
# 注销
url(r'^logout/$', views.logout, name='logout'),
# 显示个人信息
url(r'^xinxi/$', views.xinxi, name='xinxi'),
# 保存个人信息
url(r'^do_xinxi/$', views.do_xinxi, name='do_xinxi'),
# 显示欢迎小标题
url(r'^huanying/$', views.huanying, name='huanying'),7.4 views.py
# 注销
def logout(request):
del request.session['username']
# return HttpResponse(request.session['username'])
return redirect(reverse('index'))
# 显示欢迎小标题
def huanying(requset):
return render(requset, 'login_res/huanying_biaoti.html')7.5 bootcss.html 这里引用静态文件
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="{% static 'boot/js/jquery-2.0.2.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'boot/css/bootstrap.css' %}">
<script src="{% static 'boot/js/bootstrap.js' %}"></script>
</head>
<body>
</body>
</html>总结：本案例是比较完整的登录与注册Demo，可供大家学习。不过不足的地方是，没有应用Ajax，所有的操作完后都需要重定向。
2085
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
