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

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

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

文章目录

1. 项目目录
2. Django配置

2.1. Django连接MySQL数据库

3. 实现登录功能

3.1. 设计模型
3.2. 创建数据库表
3.3. 搭建Admin后台
3.4. 路由设计
3.5. 视图设计
3.6. 开始登录的页面设计

3.6.1. 引入BootStrap4
3.6.2. 创建静态文件

3.7. 登录视图实现
3.8. 完成登录的验证逻辑

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')

JackyQiu~

发布了24 篇原创文章 · 获赞 3 · 访问量 4621

私信关注

Django项目开发系列