从项目中学习Django 天天生鲜---------后台页面实现登录与注册

た入场券 2022-11-30 15:39 150阅读 0赞

### 后台页面实现登录与注册 ###

*  效果图
 *   *  注册界面
     *   *  注册失败
         *  注册成功
     *  登录界面
     *   *  登录成功
         *  登录失败
 *  项目步骤
 *   *  配置
     *   *  导入静态(static)文件和模板文件(templates)
         *  建Seller(卖家)表
         *   *  如何建立表
     *  写视图函数
     *   *  注册
         *   *  效果图
             *   *  注册失败
                 *  注册成功
         *  登录
         *   *  效果图
             *   *  登录失败
                 *  登录成功
 *  注意:

# 效果图 #

无疑直接做必然让人可能感觉没有多大兴趣,但是有目标的做那意义可能就变得不一样了,所有这里作者在以后的文章都会先将成果进行展示后在一步一步教如何学习和制作

## 注册界面 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center]

### 注册失败 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 1]

### 注册成功 ###

这里注册成功会自动跳转到登录界面所以就不展示了

## 登录界面 ##

### 登录成功 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 2]

### 登录失败 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 3]

# 项目步骤 #

## 配置 ##

在做项目前先将所有该配置的都需要配置

### 导入静态(static)文件和模板文件(templates) ###

链接：链接：https://pan.baidu.com/s/1wXSkmBEkDuFCbaMc4BDmZg  
提取码：bdxz

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 4]

**因为是后台文件所以要将内容都各自独立一下放在指定的目录,降低耦合度**

### 建Seller(卖家)表 ###

project01/models.py

#导入Django自带的数据库db
    from django.db import models 
    
    
    # 卖家
    class Seller(models.Model):
        id = models.AutoField(primary_key=True)  # 主键自动增长
        username = models.CharField(max_length=32)  # 字符串
        password = models.CharField(max_length=128)  # 密码
        gender = models.BooleanField(default=True)  # 默认值是True 代表男
        phone = models.CharField(max_length=32)  # 电话
        email = models.EmailField()  # 邮箱类型
        headimg = models.ImageField(upload_to='seller', default='1.jpg')  # 保存图片路径
        address = models.CharField(max_length=128)  # 地址

#### 如何建立表 ####

需要在有manage.py的目录下依次输入以下命令

python manage.py check
    python manage.py makemigrations
    python manage.py migrate

check表示models.py是否有错误,如果没错误则出现以下界面  
![在这里插入图片描述][20200824222937547.png_pic_center]  
makeimgrations初始化数据库,如果没错误则出现以下界面  
![在这里插入图片描述][20200824223033842.png_pic_center]  
imgrate初始化models下的数据库表,如果没错误则出现以下界面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 5]  
他会建很多无关紧要的表,这些表是Django自带的表,我们只关注自己想要的表  
成功后会出现  
![在这里插入图片描述][20200824223221266.png_pic_center]

我们可以用Pycharm自带的插件打开也可以用navicat等打开sqlite数据库的工具即可,为了方便这里使用Pycharm自带的插件打开  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 6]  
检查表是否有问题  
![在这里插入图片描述][2020082422342010.png_pic_center]  
字段没有少和多,没有任何问题

## 写视图函数 ##

前面一篇也介绍了视图函数指的是那个py文件,views.py  
所以我们需要在view.py写我们的核心代码

### 注册 ###

在上面的效果图中其实需要用到校验,即对传来的参数进行校验,这里是使用后台进行校验,如果感觉麻烦或者不必要到时可以通过注释进行删减  
Django专门为后台校验提供了方法

from django import forms

为了方便所以这里我们**专门建立一个forms.py文件**来封装校验的类  
![在这里插入图片描述][20200824225033730.png_pic_center]  
**根据注册界面的需要校验字段进行校验**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 7]

project01/forms.py

from django import forms
    from django.core.validators import RegexValidator
    
    
    class SellerForm(forms.Form):
        # 用户名
        username=forms.CharField(
            required=True,  #设置不能为空
            validators=[
                # 第一个参数：设置正则表达式，第二个参数：错误提示信息
                RegexValidator(regex=r'\w*',message="输入格式不正确!!!")
            ],
            error_messages={ 'required':'必填'}
        )
        #密码
        password=forms.CharField(
            required=True,
            min_length=6,
            error_messages={ 'required':'必填','min_length':'长度不能小于6'}
        )
        # 性别
        gender=forms.CharField(
            required=True,
            error_messages={ 'required':'必填'}
        )
        # 电话
        phone = forms.CharField(
            required=True,  # 设置不能为空
            validators=[
                # 第一个参数：设置正则表达式，第二个参数：错误提示信息
                RegexValidator(regex=r'1[3456789]\d{9}$', message="输入格式不正确!!!")
            ],
            error_messages={ 'required': '必填'}
        )
        # 邮箱
        email = forms.EmailField(
            required=True,
            error_messages={ 
                'required': '必填!!',
                'invalid': '格式不正确!!!'  # 查看源码后修改错误提示信息。
            }
        )
        # 头像
        headimg = forms.FileField(
            required=True,
            error_messages={ 'required': '必填'}
        )
        # 地址
        address = forms.CharField(
            required=True,
            error_messages={ 'required': '必填'}
        )

紧接着就是写视图函数了  
project01/views.py

from django.shortcuts import render,redirect
    from project01.forms import SellerForm
    from project01.models import *
    def register(request):
        # 对表单提交的内容进行校验
        sellerform = SellerForm(request.POST, request.FILES)
        # 当用户对页面的访问类型是POST时执行以下代码
        if request.method=="POST":
            if sellerform.is_valid():
                username=request.POST.get("username")
                password=request.POST.get("password")
                gender=request.POST.get("gender")
                phone=request.POST.get("phone")
                email=request.POST.get("email")
                address=request.POST.get("address")
                headimg=request.FILES.get("headimg")
                # 创建seller
                seller=Seller.objects.create(username=username,password=password,gender=gender,phone=phone,email=email,address=address,headimg=headimg)
                # 将数据保存到seller表中
                seller.save()
                # redirect重定向到登录界面
                return redirect("/seller/login")
        # 当用户访问以Get请求时跳转注册界面
        return render(request,"seller/register.html",{ 'sellerform':sellerform})

**注意:**  
如果对前端如何接受并使用后端可以参考我的另一个博客文章  
[Django 了解模板你就理解了前后端交互][Django]

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

写完视图函数还没完,需要配置路由,即配置**project01/urls.py**

from django.urls import path
    from . import views
    urlpatterns = [
        path('register',views.register),    #注册
    ]

因为这些app的路由,浏览器只会去匹配项目的路由,所以需要往项目的路由导入app的路由

**自己项目名称/urls.py**

from django.urls import path, include
    
    urlpatterns = [
        # path('admin/', admin.site.urls),
        path('seller/',include('project01.urls')),#卖家
    ]

#### 效果图 ####

点击右上角的  
![在这里插入图片描述][20200824230052247.png_pic_center]  
或者按住ctrl+shift+f10  
启动项目  
![在这里插入图片描述][20200824230135457.png_pic_center]  
出现这个则表示启动服务器成功

输入url:**http://127.0.0.1:8000/seller/register**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 8]

##### 注册失败 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 1]

##### 注册成功 #####

![在这里插入图片描述][20200824231012513.png_pic_center]

![在这里插入图片描述][20200824230448383.png_pic_center]  
因为我们还没有配置登录界面及其路由,所以会找不到

### 登录 ###

写完注册我们这里就简单很多了,先查看登录界面有几个值会传过来  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 9]  
所以这里我们会接受前端的**username**和**password**  
所以视图函数为

#新加函数
    # 登录
    def login(request):
        # 记入登录结果
        msg=""
        if request.method=="POST":
                # 获取用户输入的信息
                username=request.POST.get("username")
                password=request.POST.get("password")
                # 相当于sql语句 select * from seller where username=username and password=password limit 1
                seller=Seller.objects.filter(username=username,password=password).first()
                # 判断数据库是否有符合条件的数据,有则有该用户,无则返回错误信息
                if seller:
                    # 登入成功后进行重定向到首页
                    response=redirect("/seller/")
                    response.set_cookie("seller_id",str(seller.id))
                    response.set_cookie("seller_name",str(seller.username))
                    response.set_cookie("seller_headimg",str(seller.headimg.name))
                    return  response
                else:
                    # 当登录失败后
                    msg="用户名或密码错误"
        # render用法render(request,跳转的页面,以字典形式需要传到前端的数据)
        return render(request,"seller/login.html",{ 'msg':msg})

写完视图函数一定要配置路由哦  
![在这里插入图片描述][20200824230847574.png_pic_center]

#### 效果图 ####

##### 登录失败 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 3]

##### 登录成功 #####

![在这里插入图片描述][20200824231102797.png_pic_center]  
因为这里没有配置首页,所以找不到

# 注意: #

**作者在视图函数埋下了很多不解问题,这样做并不是逻辑不严谨,主要是为了引起读者好奇心,保持学习的态度进行阅读,作者会在后面的文章中一一揭晓这个不解问题**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/d3f74b9cdd22483990bf4eba4e1fa587.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/e6565053ad5c414d889d377fe6331ef1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/8c232093cb3b4eac8f770ebb323b820a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/b481c9890eb0483da2e0a5469d331698.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/ded566e8839d48a19c5414ef01037265.png
[20200824222937547.png_pic_center]: /images/20221123/3e34f824811d4315a916857a3a8cf909.png
[20200824223033842.png_pic_center]: /images/20221123/00163aa2d83b44069c3871c66ad5d0d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/f69fbc418cea43038ed0d8941e21c714.png
[20200824223221266.png_pic_center]: /images/20221123/9aefe2bca90b4e71ab5edc19edec2ebc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/fe415050eb12411da94bb90f8358c65b.png
[2020082422342010.png_pic_center]: /images/20221123/7ce605249bf3471db0517039021f26ef.png
[20200824225033730.png_pic_center]: /images/20221123/4c5f616ea52d4adc97bcff083c6d80af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/c6f886f5ec7f4e97bfe3cf27f8909b75.png
[Django]: https://blog.csdn.net/a1309525802/article/details/108078442
[20200824230052247.png_pic_center]: /images/20221123/0fdd0c906aa94d5f840422ab3cd2693b.png
[20200824230135457.png_pic_center]: /images/20221123/e1fe3fd438fe4d1caae7288d21890127.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/4d3366bdbe2f4604958b46006c59b5a6.png
[20200824231012513.png_pic_center]: /images/20221123/87ccf39ae3874cc0a7a8aafed3f4a33e.png
[20200824230448383.png_pic_center]: /images/20221123/51060181dd8847918ef991fc20cddbfd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/6adb72aa0ed24bc88f0fdfc20e428511.png
[20200824230847574.png_pic_center]: /images/20221123/144ac9d750774ab08a34d25a5c1a24d6.png
[20200824231102797.png_pic_center]: /images/20221123/43526e7faf9e47f1b5fa4b8f7419a503.png