Django实战笔记（3）完善登录与注册

喜欢ヅ旅行 2022-05-12 03:06 180阅读 0赞

# Django实现的用户登录（连接数据库版） #

经过前面的数据库学习以及实战（1）的基础知识，今天完成了连接数据的登录与注册功能。

主要实现的功能有以下几个:

1.  登录功能
2.  注册功能
3.  用户登录后可以修改个人信息

--------------------

> 注:本项目多次引用了\{% 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）][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，所有的操作完后都需要重定向。

[Django_2]: https://blog.csdn.net/qq_40279964/article/details/82666565