【Django博客网站】b站项目学习系列二：注册界面

海风迂回 海风迂回 博客等级 关注
最新推荐文章于 2025-04-22 21:00:12 发布 · 989 阅读
原创 ·
本内容遵循 CC 4.0 BY-SA 版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
· GEO检测
Django做一个注册登录界面 一、基于sb-admin模板完成以下登录的逻辑 用户想要访问一个网页，首先要求注册账号，有了账号之后再去登录，才能访问网站的主页 1.先说以下用户注册的逻辑： register 注册 form 表单保存数据到用户表 密码要加密 2.然后是登录界面 login 登录 form 表单提交数据和数据库数据校验 先校验用户是否存在 存在：校验密码 密码正确：登录成功 密码不正确 跳转到login登录 密码错误 不存在 跳转到login 成功：index首页 失败 阅读详情
  1. 创建用户： 
    python manage.py startapp users
  2. 注册子应用：在 blog 文件夹的 settings.py 的 INSTALLED_APPS 中添加： 
    'users.apps.UsersConfig',
  3. 准备模板目录并设置模板路径：在 blog 同级文件夹中新建 templates 文件夹，在 blog 文件夹的 settings.py 的 TEMPLATES 中添加： 
    'DIRS': [os.path.join(BASE_DIR, 'templates')],
  4. 将 static 文件夹中的 register.html 拖入 templates 文件夹中，在 users 文件夹的 views.py 中加入： 
    from django.views import View
class RegisterView(View):
    """用户注册"""
    def get(self, request):
        """
        提供注册界面
        :param request: 请求对象
        :return: 注册界面
        """
        return render(request, 'register.html')
  5. 定义子路由：在 users 文件夹中创建 urls.py 文件，并加入： 
    from django.urls import path
from users.views import RegisterView
urlpatterns = [
    # 参数1：路由
    # 参数2：视图函数
    # 参数3：路由名，方便通过reverse来获取路由
    path('register/', RegisterView.as_view(), name='register'),
]
  6. 添加子应用路由引导：在 blog 文件夹的 urls.py 文件中，替换和添加： 
    from django.urls import path, include
path('', include(('users.urls', 'users'), namespace='users')),
  7. 在 templates 文件夹的 register.html 文件中修改静态文件加载方式（相对加载路径），以下代码是 html 的 header 处修改： 
    {% load static %}    // 在django3.x后不再使用load staticfiles
<!-- 引入bootstrap的css文件 -->
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<!-- 引入vuejs -->
<script type="text/javascript" src="{% static 'js/vue-2.5.16.js' %}"></script>
<script type="text/javascript" src="{% static 'js/axios-0.18.0.min.js' %}"></script>
    以下代码是 <!--图片验证码--> 处修改： 
    <img src="{% static 'img/image_code.png'%}" @click="generate_image_code" alt="" style="width: 110px;height: 40px;">
    以下代码是 html 的 footer 处修改： 
    <!-- 引入js -->
<script type="text/javascript" src="{% static 'js/host.js' %}"></script>
<script type="text/javascript" src="{% static 'js/common.js' %}"></script>
<script type="text/javascript" src="{% static 'js/register.js' %}"></script>
  8. 在网页中输入：127.0.0.1:8000/register/ 出现登录界面

  • 定义用户模型类

  1. User对象基本属性：
    创建用户必选username、password
    创建用户可选email、first_name、last_name、last_login、date_joined、is_active、is_staff、is_superuse
    判断用户是否通过认证is_authenticated
    修改用户名认证字段USERNAME_FIELD
    创建用户的方法user = User.objects.create_user(username, password, **extra_fields)
    用户认证的方法

    from django.contrib.auth import authenticate

    user = authenticate(username=username, password=password, **kwargs)

    设置密码set_password(raw_password)
    校验密码check_password(raw_password)
  2. 自定义用户模型类：在 users 文件夹的 models.py 文件中添加： 
    from django.db import models
from django.contrib.auth.models import AbstractUser
class User(AbstractUser):      # 用户信息
    mobile = models.CharField(max_length=20, unique=True,blank=True)    # 电话号码字段            	avatar = models.ImageField(upload_to='avatar/%Y%m%d/', blank=True)      # 头像
    user_desc = models.TextField(max_length=500, blank=True)    # 个人简介
    USERNAME_FIELD = 'mobile'    # 修改认证的字段
    REQUIRED_FIELDS = ['username','email']    #创建超级管理员的需要必须输入的字段
    class Meta:    # 内部类 class Meta 用于给 model 定义元数据
        db_table='tb_user'              #修改默认的表名
        verbose_name='用户信息'         # Admin后台显示
        verbose_name_plural=verbose_name      # Admin后台显示
    def __str__(self):
        return self.mobile
  3. 指定用户模型类：配置规则为 AUTH_USER_MODEL = '应用名.模型类名'，在 blog 文件夹的 settings.py 的最后添加： 
    AUTH_USER_MODEL = 'users.User'
  4. 迁移用户模型类： 
    python manage.py makemigrations
python manage.py migrate
    若出现以下报错，则先注释掉 blog 文件夹的 settings.py 中 INSTALLED_APPS 的 'django.contrib.admin', 和 urls.py 中 urlpatterns 的 path('admin/', admin.site.urls),

      5. cmd 进入 MySQL，Ctrl+C 可退出当前界面，输入 use blog（blog文件夹的 settings.py 中的数据库名字），再输入 show databases; 和 desc tb_user;

  • 图形验证码接口设计和定义

  1. 在 blog 文件夹的同级目录中新建 libs 文件夹，放入 captcha 文件夹和 _init_.py 文件
  2. 安装图片处理库（大于10的版本会报错）： 
    pip install Pillow==9.5.0
  3. 请求方式：GET，请求地址：imagecode?uuid=xxxxx-xxxx-xxxxxx，参数名：uuid，类型：string，是否必传：是，说明：唯一编号
  4. 添加图形验证码视图：在 users 文件夹的 views.py 的最后添加： 
    from django.http import HttpResponseBadRequest,HttpResponse
from libs.captcha.captcha import captcha
from django_redis import get_redis_connection
class ImageCodeView(View):
    def get(self,request):
        uuid=request.GET.get('uuid')        #获取前端传递过来的参数
        if uuid is None:        #判断参数是否为None
            return HttpResponseBadRequest('请求参数错误')
        text, image = captcha.generate_captcha()   # 获取验证码内容和图片二进制数据
        redis_conn = get_redis_connection('default')   # 将图片验内容保存到redis中，并设置过期时间
        redis_conn.setex('img:%s' % uuid, 300, text)
        return HttpResponse(image, content_type='image/jpeg')        # 返回响应，将生成的图片以content_type为image/jpeg的形式返回给请求
  5. 设置子路由：在 users 文件夹的 urls.py 中添加： 
    from django.urls import path
from users.views import ImageCodeView
urlpatterns = [
    path('imagecode/', ImageCodeView.as_view(),name='imagecode'),
]
  6. 在 templates 文件夹的 register.html 文件中，修改模板中图片验证码 HTML 代码： 
    <img :src="image_code_url" @click="generate_image_code" alt="" style="width: 110px;height: 40px;">
  7. 如果运行网页出现下列错误：

        则需要安装 cryptography，如清华大学源：

pip3 install cryptography -i https://pypi.tuna.tsinghua.edu.cn/simple

  • 短信验证码

  1. 在 libs 文件夹中，拖入 yuntongxin 文件夹，并新建 __init__.py 文件；在 utils 文件夹中，加入 response_code.py 文件
  2. 容联云短信平台官网链接：https://www.yuntongxun.com/，免费开发测试模板 ID 为 1，形式为：【云通讯】您使用的是云通讯短信模板，您的验证码是 {1}，请于 {2} 分钟内正确输入。根据控制台信息修改 yuntongxin 文件夹中的 sms.py 文件： 
    _accountSid = '2c94811c8b1e335b018c4d288d9744ae'   # ACCOUNT SID
_accountToken = '190c870643c94ba78238005a4139f4dd'   # AUTH TOKEN
_appId = '2c94811c8b1e335b018c4d288f1744b5'   # APPID
  3. 在 users 文件夹的 views.py 中加入： 
    from django.http import JsonResponse
from utils.response_code import RETCODE
from random import randint
from libs.yuntongxun.sms import CCP
import logging
logger=logging.getLogger('django')
class SmsCodeView(View):
    def get(self,request):
        image_code_client = request.GET.get('image_code')        # 接收参数
        uuid = request.GET.get('uuid')
        mobile=request.GET.get('mobile')
        if not all([image_code_client, uuid,mobile]):        # 校验参数
            return JsonResponse({'code': RETCODE.NECESSARYPARAMERR, 'errmsg': '缺少必传参数'})
        redis_conn = get_redis_connection('default')        # 创建连接到redis的对象
        image_code_server = redis_conn.get('img:%s' % uuid)        # 提取图形验证码
        if image_code_server is None:
            return JsonResponse({'code': RETCODE.IMAGECODEERR, 'errmsg': '图形验证码失效'})            # 图形验证码过期或者不存在
        try:        # 删除图形验证码，避免恶意测试图形验证码
            redis_conn.delete('img:%s' % uuid)
        except Exception as e:
            logger.error(e)
        image_code_server = image_code_server.decode()  # bytes转字符串
        if image_code_client.lower() != image_code_server.lower():  # 转小写后比较
            return JsonResponse({'code': RETCODE.IMAGECODEERR, 'errmsg': '输入图形验证码有误'})
        sms_code = '%06d' % randint(0, 999999)     # 生成短信验证码：生成6位数验证码
        logger.info(sms_code)   # 将验证码输出在控制台，以方便调试
        redis_conn.setex('sms:%s' % mobile, 300, sms_code)   # 保存短信验证码到redis中，并设置有效期
        CCP().send_template_sms(mobile, [sms_code, 5],1)     # 发送短信验证码
        return JsonResponse({'code': RETCODE.OK, 'errmsg': '发送短信成功'})    # 响应结果
  4. 运行后获取的验证码显示在 vscode 工作区窗口中

  • 用户注册实现

  1. 注册视图： 
    import re
from users.models import User
from django.db import DatabaseError
class RegisterView(View):
    def post(self,request):
        mobile = request.POST.get('mobile')        #接收参数
        password = request.POST.get('password')
        password2 = request.POST.get('password2')
        smscode=request.POST.get('sms_code')
        if not all([mobile, password, password2, smscode]):        # 判断参数是否齐全
            return HttpResponseBadRequest('缺少必传参数')
        if not re.match(r'^1[3-9]\d{9}$', mobile):        # 判断手机号是否合法
            return HttpResponseBadRequest('请输入正确的手机号码')
        if not re.match(r'^[0-9A-Za-z]{8,20}$', password):     # 判断密码是否是8-20个数字
            return HttpResponseBadRequest('请输入8-20位的密码')
        if password != password2:        # 判断两次密码是否一致
            return HttpResponseBadRequest('两次输入的密码不一致')
        redis_conn = get_redis_connection('default')        #验证短信验证码
        sms_code_server = redis_conn.get('sms:%s' % mobile)
        if sms_code_server is None:
            return HttpResponseBadRequest('短信验证码已过期')
        if smscode != sms_code_server.decode():
            return HttpResponseBadRequest('短信验证码错误')
        try:        # 保存注册数据
            user=User.objects.create_user(username=mobile,mobile=mobile, password=password)
        except DatabaseError:
            return HttpResponseBadRequest('注册失败')
        return HttpResponse('注册成功，重定向到首页')        # 响应注册结果
  2. 在 templates 文件夹的 register.html 中添加： 
    {% csrf_token %}

  • 展示首页

  1. 创建首页子应用： 
    python manage.py startapp home
  2. 定义首页视图：在 home 文件夹的 views.py 中添加： 
    from django.views import View
class IndexView(View):
    def get(self, request):    """首页广告"""
        return render(request, 'index.html')        """提供首页广告界面"""
  3. 在 home 子应用中创建 urls.py 文件，并定义子路由： 
    from django.urls import path
from home.views import IndexView
urlpatterns = [
    path('', IndexView.as_view(),name='index'),
]
  4. 在 blog 文件夹的 urls.py 总路由中添加子应用路由引导： 
    path('', include(('home.urls','home'),namespace='home')),
  5. 需将 index.html 加入templates文件夹下

  • 状态保持

  1. 设置首页所需的用户名信息和登录状态：修改 users 文件夹的 views.py 文件 
    from django.contrib.auth import login
login(request, user)
response = redirect(reverse('home:index'))   # 跳转到首页
response.set_cookie('is_login',True)   # 设置cookie，登录状态，会话结束后自动过期
response.set_cookie('username',user.username,max_age=30*24*3600)   # 设置用户有效期
return response
  2. 查看 cookie 数据：先在链接 http://127.0.0.1:8000/register/ 中注册账号，再进入链接 http://127.0.0.1:8000/ 点击左上方带圈 (i) 进行查看
  3. cmd 中输入 redis-cli，进入后输入 keys * 查看，再输入 select 1 和 keys * 查看

 学习介绍链接：https://blog.csdn.net/castlegirl/article/details/135075747?spm=1001.2014.3001.5501

项目链接：GitHub - haifengyuhui/project_blogweb: Project: A website for haifengyuhui's blog

收录于
【Django博客网站】

当前文章被收录于：

【Django博客网站】
9 篇文章 1 人学习

【Django博客网站】b 站项目学习系列主要记录了在学习博客网站搭建过程中的步骤和遇到一些问题的解决方案，共分为 8 个系列的博客文章，如果你也正在学习这个视频或这方面的内容，这个系列可能会对你有所帮助。

订阅专栏 查看详情
标签
#python #django #html #mysql #redis
#git
Django(二)精美博客搭建(1)实现登录/注册功能 前言 之前我们做了一个很简单的个人博客搭建，不论是页面还是功能都很粗糙 所以从这篇开始我打算做一个比较完整的【个人博客网站】，可能会分好几篇博客来讲述 其中设计到的一些知识点也会和大家详细说下 简易版blog搭建：https://blog.csdn.net/Makasa/article/details/124982130?spm=1001.2014.3001.5502 环境： Pycharm python3.6 一、Django框架介绍 1、创建Django项目 直接在pycharm里新建一 阅读详情

相关推荐

【django学习】——Django介绍和实战（开发简易版博客网页）

【django学习】——Django介绍和实战（开发简易版博客网页）

python_AI_fans的博客 8317

B站武沛齐Django笔记和代码

https://www.bilibili.com/video/BV1NL41157ph 2022 B站最详细django3教程(django从入门到实践) 很适合刚学习django的同学 通过一个案例，把django的基本的templates，models，urls，from，modelfrom讲的清清楚楚，甚至还给了我们应用场景。

Django项目之Web端电商网站的实战开发（二）

说明：该篇博客是博主一字一码编写的，实属不易，请尊重原创，谢谢大家！ 接着上一篇博客继续往下写 ：https://blog.csdn.net/qq_41782425/article/details/88790662 目录 一丶用户注册 二丶用户登录 一丶用户注册 1.显示用户注册页面 step1 在static目录下将register.html文件拷贝到templates模板目录下 ...

cdtaogang's blog 5万+

django登录注册html页面,基于Django开发的SkyNet博客三——登录注册界面

登录界面先上个图：login.pnglogin.html{% extends 'blog/base.html' %}{% block title %}SkyNet登录{% endblock %}{% block content %}{% load static %}用户登录登录{% endblock %}这里用到了semantic-ui自带的form表单，每一个field可以理解为表单需要上传的字...

weixin_42723849的博客 846

Django实现注册及登录（附源码）

这是一个基于Django的包含注册及登录功能的web应用程序。该项目虽只有登录和注册功能，但是有一个非常漂亮的前端页面。

weixin_51756038的博客 1万+

Django实现注册登录功能

Django注册登录基础模板

m0_67345482的博客 1万+

测试平台开发：Django开发实战之注册界面实现(上)

然后在项目路径下面创建一个register.html文件，粘贴刚复制的代码。可是这样的用户体验不好，我们希望用户创建成功的同时，也登录成功。编写html文件的请求成功的部分，希望它重定向到业务页面。3、添加路由，在应用下面添加，项目级路由保持不变。目前数据是没有给到后端的，那么接下来怎么做呢？生成简单的ui界面，复制这个html代码。实现注册功能，大概包括以下几个步骤。首先在html文件引入axios。可以加一些请求成功和失败的判断。1）让我们的前端可以发送参数。根据校验的逻辑去发送请求。

weixin_45754647的博客 985

【Django博客网站】b站项目学习系列总结

【Django博客网站】b 站项目学习系列主要记录了在学习博客网站搭建过程中的步骤和遇到一些问题的解决方案，如果你也正在学习这个视频或这方面的内容，这个系列可能会对你有所帮助。

castlegirl的博客 1086

【Django博客网站】b站项目学习系列三：登录界面

【Django博客网站】登录界面包括3个板块内容：手机号登录、首页用户名展示、退出登录。

castlegirl的博客 961

网站框架搭建——基于Django框架的天天生鲜电商网站项目系列博客（二）

系列文章目录 天天生鲜项目需求分析——基于Django框架的天天生鲜电商网站项目系列博客（一） 天天生鲜项目网站框架搭建——基于Django框架的天天生鲜电商网站项目系列博客（二） 待更新…… 项目资源下载 天天生鲜电商网站项目源码Github地址（可Fork可Clone） 天天生鲜电商网站项目源码Gitee地址（可Fork可Clone） 天天生鲜电商网站项目源码压缩包下载（直接使用） 天天生鲜电商网站项目所需全部工具合集打包下载（nginx、libfastcommon、fastdfs-nginx、

IronmanJay 3625

django做一个注册登录界面

一、基于sb-admin模板完成以下登录的逻辑 用户想要访问一个网页，首先要求注册账号，有了账号之后再去登录，才能访问网站的主页 1.先说以下用户注册的逻辑： register 注册 form 表单保存数据到用户表 密码要加密 2.然后是登录界面 login 登录 form 表单提交数据和数据库数据校验 先校验用户是否存在 存在：校验密码 ...

也许会有_hui的博客 6250

Django博客网站项目教程

Django博客网站项目教程 项目介绍 project_blogweb 是一个基于 Django 框架开发的博客网站项目。该项目旨在帮助开发者快速搭建一个功能完善的博客系统，支持用户注册、登录、发布博客、评论等基本功能。通过学习该项目，开发者可以深入理解 Django 框架的使用，掌握 Web 开发的基本流程。 项目快速启动 1. 环境准备 在开始之前，请确保你已经安装了以下软件： Python...

gitblog_00811的博客 850

需求分析——基于Django框架的天天生鲜电商网站项目系列博客（一）

系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于Nu

IronmanJay 6393

Django项目之Web端电商网站的实战开发（一）

说明：该篇博客是博主一字一码编写的，实属不易，请尊重原创，谢谢大家！ 目录 一丶项目介绍 二丶电商项目开发流程 三丶项目需求 四丶项目架构概览 五丶项目数据库设计 六丶项目框架搭建 一丶项目介绍 产品：关于Web端的电商网站 商业模式：B2C模式企业对个人 设计模式：使用前后端不分离进行项目开发(后端控制前端的效果展示) 前端效果展示 二丶电商项目开发流程 1.流程...

cdtaogang's blog 7万+

用户注册模块——基于Django框架的天天生鲜电商网站项目系列博客（三）

系列文章目录 天天生鲜项目需求分析——基于Django框架的天天生鲜电商网站项目系列博客（一） 天天生鲜项目网站框架搭建——基于Django框架的天天生鲜电商网站项目系列博客（二） 待更新…… 项目资源下载 天天生鲜电商网站项目源码Github地址（可Fork可Clone） 天天生鲜电商网站项目源码Gitee地址（可Fork可Clone） 天天生鲜电商网站项目源码压缩包下载（直接使用） 天天生鲜电商网站项目所需全部工具合集打包下载（nginx、libfastcommon、fastdfs-nginx、

IronmanJay 1831

基于django的前端天气查询网站

基于django的前端天气页面引言项目效果使用的版本和库中国天气网的接口设置跟据你想要做到的程度你需要看的内容基础的django(包含主页和简单的搜索页面)以及配置问题进一步优化主页，模板引擎和轮播图模板引擎关于传入数据关于轮播图（也适用其他组件）django简单方法加载本地图片导航页设计按钮问题加载界面可视化与城市页面现存缺点引用的链接 引言 前不久让做个简单网站项目，没学过框架和超文本语言的我有点慌，不过通过自学还是有惊无险的完成了，效果还算不错，完整性也很高但也有缺点，写个博客希望对初学或者有兴趣的人

lxq的个人博客 4335

从零开始搭建Django博客②--Django的服务器内容搭建

引入用户管理后台# 记得引入include# 需要使用文章视图显示文章列表作为首页# 引入path# 引入views.py# 正在部署的应用的名称# path函数将url映射到视图# 文章详情# 写文章# 删除文章# 更新文章。

Python进阶之道 2123

基于Django开发的SkyNet博客三——登录注册界面

基于Django开发的SkyNet博客一——创建模型 基于Django开发的SkyNet博客二——base Template 上一篇博客讲解了base.html主要是制作网站的导航条，这一篇博客主要来介绍登录和注册界面。 登录界面 先上个图： login.html {% extends 'blog/base.html' %} {% block title %} SkyNet登录 {%...

溪语流沙的博客 1287
上一篇： 【Django博客网站】b站项目学习系列一：准备工作
下一篇： 【Django博客网站】b站项目学习系列三：登录界面
点赞 18
评论 1
书签 书签 28
海风迂回
海风迂回
博客等级 码龄7年 177粉丝 · 9原创
+ 关注 专栏目录 订阅专栏
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值