2020-02-23 10:29 已编辑武汉理工大学测试开发

关注

Django项目开发系列

Django项目初始化和登录功能，包含的关键内容：

从零到完成登录功能
BootStrap使用
静态文件

说明文中内容是参考here的系列教程，里面比较详细地说明了整个登录功能实现的流程。这里主要是自己整理一下，便于之后参考。同时里面的CSS和HTML代码将在之后学习过程中加入自己的理解。

文章目录

1. 项目目录
2. Django配置
- 2.1. Django连接MySQL数据库
3. 实现登录功能

1. 项目目录

项目名为student_system

-student_system
-student_system     # 创建项目时自动生成的与项目名同名的目录
    -__init__.py
    -settings.py
    -urls.py
    -wsgi.py
-library       # 通过命令行创建的应用
    -migrations     #  数据库相关文件，不用管。
    -templates      # 手动创建的目录，用于保存html等文件
    -admin.py
    -apps.py
    -forms.py
    -models.py
    -tests.py
    -urls.py
    -views.py
-manage.py
-db.sqlite3

2. Django配置

2.1. Django连接MySQL数据库

首先，在MySQL中创建名称为student_system的数据库
在项目下面的Settings.py文件中，找到DATABASES这一项，修改为下面的代码

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'student_system',    #你的数据库名称，是第一步中创建的名称
        'USER': 'root',   #你的数据库用户名
        'PASSWORD': '', #你的数据库密码
        'HOST': 'localhost', #你的数据库主机，留空默认为localhost
        'PORT': '3306', #你的数据库端口
    }
}

接着，在当前项目的Python环境中安装pymysql， pip install pymysql
在项目名同名的目录下面的__init__.py文件中写入下面的语句。

import pymysql
pymysql.install_as_MySQLdb()

此时，运行Python manage.py runserver可能会遇到问题，。。。

3. 实现登录功能

首先，创建一个应用library。

python manage.py startapp library

然后在settings.py文件中注册应用。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'library'    # 应用名
]

3.1. 设计模型

library/models.py

from django.db import models

# Create your models here.
class User(models.Model):
    gender = (
        (1, '男'),
        (2, '女')
    )

    name = models.CharField(max_length=128, unique=True)
    password = models.CharField(max_length=256)
    email = models.EmailField(unique=True)
    sex = models.IntegerField(choices=gender, default=1)
    c_time = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.name

    class Meta:
        ordering = ['-c_time']   # 创建时间的逆序，也就是创建的越晚，排在上面
        verbose_name = verbose_name_plural = '用户'

3.2. 创建数据库表

在项目目录的终端执行下面两行代码

python manage.py makemigrations
python manage.py migrate

3.3. 搭建Admin后台

首先，在admin中注册。 library/admin.py

from django.contrib import admin
from .models import User

admin.site.register(User)

通过命令行创建超级管理员，输入以下命令，然后按照操作创建即可。

python manage.py createsuperuser

接着启动服务器 python manage.py runserver，然后在浏览器中输入 http://127.0.0.1:8000/admin/ ，使用刚创建的用户名和密码登录进去就可以了。

在后台增加数据的时候可以发现，因为email字段采用的是邮箱验证，因此不合标准的邮箱会提示。

3.4. 路由设计

为了路由结构的清晰性，在library目录下面增加一个urls.py文件，配置如下：

from django.urls import path
from . import views


app_name = 'library'
urlpatterns = [
    path('index/', views.index, name="index"),
    path('login/', views.index, name='login'),
    path('register/', views.register, name="register"),
    path('logout/', views.logout, name="logout")
]

接着，在项目目录下面的urls.py文件中配置应用的urls.py

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


urlpatterns = [
    path('admin/', admin.site.urls),
    path('lib/', include('library.urls'))
]

3.5. 视图设计

首先，在liarary/views.py下面

from django.shortcuts import render, redirect

# Create your views here.

def index(request):
    pass
    return render(request, 'login/index.html')


def login(request):
    pass
    return render(request, 'login/login.html')


def register(request):
    pass
    return render(request, 'login/register.html')


def logout(request):
    pass
    return redirect('/login/')

接着，在library应用下面创建templates文件夹，接着在templates下面创建login文件夹，接着在login下面创建上面提及的3个html文件。

截止到这里，一个整体的框架就基本完成了，接着就是实现登录、注册、登出的逻辑。

3.6. 开始登录的页面设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>

    <div style="margin: 15% 40%;">
        <h1>欢迎登录！</h1>
       <form action="/login/" method="post">
            <p>
                <label for="id_username">用户名：</label>
                <input type="text" id="id_username" name="username" placeholder="用户名" autofocus required />
            </p>
            <p>
                <label for="id_password">密码：</label>
                <input type="password" id="id_password" placeholder="密码" name="password" required >
            </p>
            <input type="submit" value="确定">
        </form>
    </div>

</body>
</html>

3.6.1. 引入BootStrap4

要引入BootStrap4需要引入CSS以及JS文件，也就是bootstrap.min.css 和 bootstrap.min.js。接着，由于Bootstrap依赖于JQuery，同时也依赖于popper.js，所以在引入bootstrap.min.js之前需要引入JQuery和popper.js。可以直接引入链接，或者可以下载对应的包文件到本地，然后再引入。可以从这里下载here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <title>登录</title>
</head>
<body>

      <div class="container">
            <div class="col">
              <form class="form-login" action="/login/" method="post">
                  <h3 class="text-center">欢迎登录</h3>
                  <div class="form-group">
                    <label for="id_username">用户名：</label>
                    <input type="text" name='username' class="form-control" id="id_username" placeholder="Username" autofocus required>
                  </div>
                  <div class="form-group">
                    <label for="id_password">密码：</label>
                    <input type="password" name='password' class="form-control" id="id_password" placeholder="Password" required>
                  </div>
                <div>
                  <a href="/register/" class="text-success "><ins>新用户注册</ins></a>
                  <button type="submit" class="btn btn-primary float-right">登录</button>
                </div>
              </form>
            </div>
    </div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

</body>
</html>

3.6.2. 创建静态文件

首先，在应用library下面创建一个与templates同级的static目录，在这个目录下面创建login目录。接着在login目录下面创建一个css和images目录。创建完成之后目录结构为

-library
    -static
        -login
            -css
            -images
    -templates
        -login
            -index.html
            -login.html
            ......

在login下面的css目录下创建login.css, 并写入下面的代码：

body {
  height: 100%;
  background: aliceblue;
}
.form-login {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-login{
  margin-top:80px;
  font-weight: 400;
}
.form-login .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;

}
.form-login .form-control:focus {
  z-index: 2;
}
.form-login input[type="text"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-login input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
form a{
  display: inline-block;
  margin-top:25px;
  font-size: 12px;
  line-height: 10px;
}

结合，需要在login.html中引入这个css文件，文件代码如下:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'login/css/login.css' %}">
    <title>登录</title>
</head>
<body>

至此，整个登录界面已经完成了。

3.7. 登录视图实现

首先，修改login.html中action的地址。

<form class="form-login" action="{% url 'library:login' %}" method="post">

这里使用url解析的方式来赋值需要跳转的地址。在library下面的urls.py中的内容是

app_name = 'library'
urlpatterns = [
    path('', views.index, name="index"),
    path('index/', views.index, name="index"),
    path('login/', views.login, name='login'),
    path('register/', views.register, name="register"),
    path('logout/', views.logout, name="logout")
]

在library下面的views.py中修改 login这个函数。需要注意 get获取参数的时候，里面的值是login.html界面中input输入框的name属性。

def login(request):
    if request.method == 'POST':
        username = request.POST.get('username')    # username是表单中input的name属性决定的。
        password = request.POST.get('password')
        print(username, password)
        return redirect(reverse('library:index'))
    return render(request, 'login/login.html')

接着，当在浏览器中进行登录的时候，会报错误。错误原因是CSRF验证失败，请求被中断。

接着在login.html中form表单下面增加一行就可以了。

<form class="form-login" action="{% url 'library:login' %}" method="post">
    {% csrf_token %}
    <h3 class="text-center">欢迎登录</h3>
......

3.8. 完成登录的验证逻辑

def login(request):
    if request.method == 'POST':
        username = request.POST.get('username')    # username是表单中input的name属性决定的。
        password = request.POST.get('password')
        try:
            user = User.objects.get(name=username)
        except:
            print("没有此用户")
            return render(request, 'login/login.html')
        if user.password == password:
            return redirect(reverse('library:index'))
    return render(request, 'login/login.html')