Django实战项目-学习任务系统-用户登录

第一步：先创建一个Django应用程序框架代码

1，先创建一个Django项目

django-admin startproject mysite

将创建一个目录，其布局如下：

mysite/
    manage.py
    mysite/
        __init__.py
        settings.py
        urls.py
        asgi.py
        wsgi.py

2，再创建一个Django应用

python manage.py startapp study_system

将创建一个目录，其布局如下：study_system

study_system/
    __init__.py
    admin.py
    apps.py
    migrations/
        __init__.py
    models.py
    tests.py
    views.py
    
详情操作参考《编写你的第一个 Django 应用程序》相关文章。
https://mp.weixin.qq.com/s?__biz=Mzg2NDk2MTY3OA==&mid=2247483730&idx=1&sn=0cab44a659067ad145f55a2553c25f4e&chksm=ce6014b3f9179da5b4cf08d43fc13819d2941c7287b234b99beb3722a29e7b863df62e2bbf97&token=737388&lang=zh_CN#rd

第二步：编写第一个功能-用户登录

1，数据库设置
修改 settings.py 配置信息，采用mysql数据库
文件目录结构：
./mysite/mysite/settings.py

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'world',
        "USER": "root",
        "PASSWORD": "123456",
        "HOST": "127.0.0.1",
        "PORT": "3306",
        "OPTIONS": {"init_command": "SET default_storage_engine=INNODB", },

    }
}

2，创建模型

编辑模型文件：
./mysite/study_system/models.py

from django.db import models

class StudyUser(models.Model):
    user_id = models.AutoField(primary_key=True, verbose_name='用户ID')
    username = models.CharField(max_length=50, verbose_name='用户名')
    password = models.CharField(max_length=50, verbose_name='密码')
    email = models.EmailField(max_length=100, verbose_name='邮箱')
    phone_num = models.CharField(max_length=20, verbose_name='手机号码')
    role = models.IntegerField(verbose_name='角色', choices=((1, '系统管理员'), (2, '辅导员'), (3, '学生')))
    parent_id = models.IntegerField(verbose_name='辅导员用户ID', null=False)
    created_time = models.DateTimeField(verbose_name='创建时间')
    update_time = models.DateTimeField(verbose_name='更新时间')

    class Meta:
        verbose_name = '学习用户表'
        verbose_name_plural = '学习用户表'
        # 用于模型的数据库表的名称
        db_table = "study_users"

3，激活模型

3.1. 修改 settings.py 配置信息：
./mysite/mysite/settings.py

INSTALLED_APPS = [
    "study_system.apps.StudySystemConfig", #添加的应用
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

3.2. 运行 makemigrations 命令(记得进入 manage.py 所在目录)：
$ python manage.py makemigrations study_system

生成如下文件：
./mysite/study_system/migrations/0001_initial.py

3.3. 再运行 sqlmigrate 命令(记得进入 manage.py 所在目录)：
sqlmigrate 命令采用迁移名称并返回其模型建表SQL语句：
$ python manage.py sqlmigrate study_system 0001

3.4. 最后再运行 migrate 命令(记得进入 manage.py 所在目录)：
$ python manage.py migrate
实现在数据库中创建这些模型表结构。

4，编写用户登录视图

4.1. 编辑视图代码：
./mysite/study_system/views.py

# 登录首页视图
def index(request):
    context = {}
    return render(request, "study_system/index.html", context)

# 通用视图模型，FormView , 表单视图
class LoginView(FormView):
    template_name = 'study_system/index.html'
    form_class = LoginForm
    # 设置成功登录后的重定向URL
    # success_url = 'home/'
    success_url = reverse_lazy('study_system:home')  # 修改为完整的 URL

    # 登录表单校验
    def form_valid(self, form):
        username = form.cleaned_data['username']
        password = form.cleaned_data['password']
        # 内置用户权限认证方法，不管用
        # user = authenticate(username=username, password=password)
        user = self.validate_user(username, password)
        if user:
            # 设置 session
            self.request.session['username'] = username
            self.request.session['role'] = user.role
            '''
            在登录视图类中，当用户通过验证并且认证成功时，
            调用 super().form_valid(form) 方法会触发 Django 的默认行为，
            其中包括登录用户并将登录状态信息与请求相关联。
            这样，request.user 对象将被设置为已认证的用户，
            并且 request.user.is_authenticated 将返回 True。
            '''
            return super().form_valid(form)
        else:
            return self.render_to_response(self.get_context_data(form=form, error_message='用户或密码不匹配，登录失败.'))

    # 校验用户密码是否存在
    def validate_user(self, username, password):
        try:
            # 根据用户名和密码查询用户
            user = StudyUser.objects.get(username=username, password=password)
            # print('根据用户名和密码查询用户:'+str(user))
            return user
        except StudyUser.DoesNotExist:
            return None


# 登录成功主页视图
def home(request):
    # 响应容器
    rsp_dict = {}
    # 获取当前用户名
    username = request.session.get('username')
    # 根据用户名获取用户对象
    cur_user = StudyUser.objects.get(username=username)
    print('根据用户名查询用户对象:' + str(cur_user))
    # print('session : '+str(username))
    rsp_dict['username'] = username

    template_name = "study_system/home.html"
    
    return render(request, template_name, rsp_dict)

4.2. 编辑表单验证代码：
./mysite/study_system/forms.py

from django import forms

# 登录用户表单验证
class LoginForm(forms.Form):
    username = forms.CharField(max_length=100)
    password = forms.CharField(widget=forms.PasswordInput)

4.3. 编辑页面模板代码：

4.3.1. 网站首页登录页面
./mysite/study_system/templates/study_system/index.html

<!DOCTYPE html>
<html>
<head>
    {#    让网页自动适应PC端和移动端#}
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    {#    viewport是view portion的意思，用汉语说，就是“可见区域“。所以这个标签是在定义可见区域的规则。#}
    {#    width=device-width的意思是”宽度自动适配设备屏幕宽度"#}
    {#    inital-scale=1.0的意思是“宽度默认为设备屏幕的宽度”。#}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>study system</title>
    <link rel="stylesheet" href="/static/study_system/bootstrap3/css/bootstrap.min.css">
    {#    让网页自动适应PC端和移动端#}
    <style>
        .container {
            max-width: 400px;
            margin: 0 auto;
            padding-top: 100px;
        }
    </style>
</head>
<body>

<div class="container">
    <h1 class="text-center">study system</h1>
    <form method="post" action="{% url 'study_system:login' %}">
        {% csrf_token %}
        {#        在Django中提交数据到后端服务的时候，为了安全，要使用CSRF（跨站请求伪造）。#}
        {#        跨站请求伪造的问题在于，服务器信任来自客户端的数据。#}
        {#        常规的做法是在template模板HTML文件中的form表单 中添加 {% csrf_token %} 可以实现安全提交。#}
        {#        当我们使用from表单标签来发送请求时，如果需要csrftoken认证，那么必须将它写到我们的form表单标签里面，里面的任意位置。#}
        {#        生成的隐藏标签为：#}
        {#        <input type="hidden" name="csrfmiddlewaretoken" value="WVHKQeAuMS4RGqyLybryIBAfacDa1Dp7PEaB3Badv3y0fvLqydX36xAVen6z3oS4">#}

        <div class="form-group">
            <input type="text" class="form-control" id="username" name="username" placeholder="username">
        </div>
        <div class="form-group">
            <input type="password" class="form-control" id="password" name="password" placeholder="password">
        </div>
        <div class="form-group">
            <button type="submit" class="form-control btn-primary">登录账号</button>
        </div>
        <div class="form-group">
            <a href="{% url 'study_system:register' %}" class="form-control btn-link text-right">注册账户</a>
        </div>
        <!-- 在 body 标签中添加一个隐藏的弹框 -->
        <div class="form-group" id="errorModal" style="display: none;">
            <p id="alert" class="alert alert-warning">{{ error_message }}</p>
        </div>
    </form>
</div>

<script src="/static/study_system/jquery1.3.3/jquery.min.js"></script>

<!-- 在登录页面的合适位置调用弹框 -->
{% if error_message %}
    <script>
        $(document).ready(function () {
            // 设置错误消息内容
            $("#alert").text("{{ error_message }}");
            // 显示弹框
            $("#errorModal").show();
        });
    </script>
{% endif %}
</body>
</html>

4.3.2. 网站登录成功用户主页面
./mysite/study_system/templates/study_system/home.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>study system</title>
    <script src="/static/study_system/jquery1.3.3/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/study_system/bootstrap3/css/bootstrap.min.css">
    <style type="text/css">
        .content_html {
            width: 100%;
            height: auto;
            margin: 0.2em auto 0.2em auto;
            border: 0.1em solid #68FE61;
        }
    </style>
</head>
<body>
<div>
    {% include "study_system/common/head.html" %}
    <div class="content_html">
        主内容区域
    </div>
</div>
</body>

4.3.3. 网站登录成功用户菜单页面
./mysite/study_system/templates/study_system/common/head.html

<div>
    <!-- 头部logo区 -->
    <div align="center">
        <a href="/study_system/home/">study system</a>
    </div>

    <!-- 头部菜单区 -->
    {#两端对齐的导航元素#}
    <ul class="nav nav-pills nav-justified">
        <li class="menu-head"><a href="#">任务管理</a></li>
        <li class="menu-head"><a href="#">定时任务管理</a></li>
        <li class="menu-head"><a href="#">兑换物品管理</a></li>
        <li class="menu-head"><a href="#">用户管理</a></li>
        <li class="menu-head">
            <a href="#"><strong>欢迎: {{ request.session.username }}</strong> 退出</a>
        </li>
    </ul>
</div>

4.4. 编辑应用 urls 配置代码：
./mysite/study_system/urls.py

from django.urls import path
from . import views
from .views import LoginView

app_name = 'study_system'

urlpatterns = [
    # 登录注册首页url
    path('', views.index, name='index'),
    path('login/', LoginView.as_view(), name='login'),
    path('home/', views.home, name='home'),
]

4.5. 编辑项目 urls 配置代码：
./mysite/mysite/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path("study_system/", include("study_system.urls")),    # 应用urls
    path('admin/', admin.site.urls),    # admin后台管理 urls
]

第三步：运行测试-用户登录功能