django2.1.7从0开始搭建一个个人博客网站第6天

最新推荐文章于 2020-11-17 19:21:40 发布
最新推荐文章于 2020-11-17 19:21:40 发布
阅读量230 收藏
点赞数
分类专栏： python django
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fksfdh/article/details/104567055
版权

四、判断用户是否存在

1.分析

请求方法：GET

url定义：/username/(?P<username>\w{5,20})/

请求参数：url路径参数

参数类型前端是否必须传描述
username字符串是输入的用户名
2、 代码实现
1、后台视图 views.py
from django.http import HttpResponse, JsonResponse
from users.models import User

class CheckUsernameView(View):
    """
    Check whether the user exists
    GET username/(?P<username>\w{5,20})/
    """
    def get(self, request, username):

        # count = User.objects.get(username=username).count
        data = {
            'username': username,
            'count': User.objects.filter(username=username).count()
        }
        return JsonResponse(data=data)
2、url 定义
# url 定义
from django.urls import path, re_path

from . import views

app_name = "verifications"


urlpatterns = [
    # image_code_id为uuid格式
    path('image_code/<uuid:image_code_id>/', views.ImageCode.as_view(), name='image_code'),
    re_path('username/(?P<username>\w{5,20})/', views.CheckUsernameView.as_view(), name='check_username'),

]

3、前端js： register.js

$(function () {
    let $username = $('#user_name'); //获取用户名
    let $img = $(".form-item .captcha-graph-img img");   // 获取图像
    let sImageCodeId = ""; //uuid
    // let $imgCodeText = $('#input_captcha');
    // console.log(img);
    genreate();
    $img.click(genreate);
    function genreate() {
		let sImageCodeId = generateUUID();
        let imageCodeUrl = '/image_code/' + sImageCodeId + '/';

        $img.attr('src', imageCodeUrl)
    }

     // 生成图片UUID验证码
    function generateUUID() {
    let d = new Date().getTime();
    if (window.performance && typeof window.performance.now === "function") {
        d += performance.now(); //use high-precision timer if available
    }
    let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        let r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
    }



    // 2、用户名验证逻辑
    // blur,触发失去焦点事件
    $username.blur(function () {
    fn_check_username();
    });

    // 判断用户名是否已经注册
    function fn_check_username() {
    let sUsername = $username.val();  // 获取用户名字符串
    if (sUsername === "") {
      message.showError('用户名不能为空！');
      return
    }
    if (!(/^\w{5,20}$/).test(sUsername)) {
      message.showError('请输入5-20个字符的用户名');
      return
    }

    // 发送ajax请求，去后端查询用户名是否存在
    $.ajax({
      url: '/username/' + sUsername + '/',
      type: 'GET',
      dataType: 'json',
    })
      .done(function (res) {
        if (res.count !== 0) {
          message.showError(res.username + '已注册，请重新输入！')
        } else {
          message.showInfo(res.username + '能正常使用！')
        }
      })
      .fail(function () {
        message.showError('服务器超时，请重试！');
      });
    }

});

注意：将message.js引入base.html模板,做前端页面信息提示 例如：message.showError(‘请输入5-20个字符的用户名’);
在这里插入图片描述
演示：
在这里插入图片描述
在这里插入图片描述

五，判断手机号是否存在

1.分析

请求方法：GET

url定义：mobiles/(?P<mobile>1[3-9]\d{9})/

请求参数：url路径参数

参数类型前端是否必须传描述
mobile字符串是输入的手机号
2、代码实现
1、后台视图 views.py
class CheckMobilView(View):
    """
    Check whether the user exists
    GET mobiles/(?P<mobile>1[3-9]\d{9})/
    """
    def get(self, request, mobile):
        data = {
            'mobile': mobile,
            'count': User.objects.filter(mobile=mobile).count()
        }
        return JsonResponse({'data':data})
2、url路径 url.py

from django.urls import path,re_path

from . import views
app_name = 'verifications'
urlpatterns = [
    re_path('username/(?P<username>\w{5,20})/',views.CheckUsernameView.as_view(),name='username'),
    re_path('mobiles/(?P<mobile>1[3-9]\d{9})/',views.CheckMobilView.as_view(),name='mobile'),
]
3， 前端js
$(function () {
    let $username = $('#user_name'); //获取用户名
    let $img = $(".form-item .captcha-graph-img img");   // 获取图像
    let sImageCodeId = ""; //uuid
    let $mobile = $('#mobile');  // 选择id为mobile的网页元素，需要定义一个id为mobile手机号

    // let $imgCodeText = $('#input_captcha');
    // console.log(img);
    genreate();
    $img.click(genreate);
    function genreate() {
		let sImageCodeId = generateUUID();
        let imageCodeUrl = '/image_code/' + sImageCodeId + '/';

        $img.attr('src', imageCodeUrl)
    }

     // 生成图片UUID验证码
    function generateUUID() {
    let d = new Date().getTime();
    if (window.performance && typeof window.performance.now === "function") {
        d += performance.now(); //use high-precision timer if available
    }
    let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        let r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
    }


    // 2、用户名验证逻辑
    // blur,触发失去焦点事件
    $username.blur(function () {
    fn_check_username();
    });

    // 判断用户名是否已经注册
    function fn_check_username() {
    let sUsername = $username.val();  // 获取用户名字符串
    if (sUsername === "") {
      message.showError('用户名不能为空！');
      return
    }
    if (!(/^\w{5,20}$/).test(sUsername)) {
      message.showError('请输入5-20个字符的用户名');
      return
    }

    // 发送ajax请求，去后端查询用户名是否存在
    $.ajax({
      url: '/username/' + sUsername + '/',
      type: 'GET',
      dataType: 'json',
    })
      .done(function (res) {
        if (res.count !== 0) {
          message.showError(res.username + '已注册，请重新输入！')
        } else {
          message.showSuccess(res.username + '能正常使用！')
        }
      })
      .fail(function () {
        message.showError('服务器超时，请重试！');
      });
    }

    //3、手机号验证
    // 手机号校验,光标离开手机号输入框就校验
    $mobile.blur(fn_check_mobile);

    // 判断手机号是否注册
    function fn_check_mobile() {
    let sMobile = $mobile.val();  // 获取用户输入的手机号码字符串
    if (sMobile === "") {
      message.showError('手机号不能为空！');
      return
    }
    if (!(/^1[345789]\d{9}$/).test(sMobile)) {
      message.showError('手机号码格式不正确，请重新输入！');
      return
    }

    $.ajax({
      url: '/mobiles/' + sMobile + '/',
      type: 'GET',
      dataType: 'json',
      async: false
    })
      .done(function (res) {
        if (res.data.count !== 0) {
          message.showError(res.data.mobile + '已注册，请重新输入！');
        } else {
          message.showSuccess(res.data.mobile + '能正常使用！');
        }
      })
      .fail(function () {
        message.showError('服务器超时，请重试！');
      });
    }

});

演示：

在这里插入图片描述

在这里插入图片描述

六，自定义异常类

在项目根目录中的utils目录下创建res_code.py文件，用于处理json格式转化功能。

  • 自定义异常响应状态码
  • 自定义项目响应格式
from django.http import JsonResponse


class Code:
    OK = "0"
    DBERR = "4001"
    NODATA = "4002"
    DATAEXIST = "4003"
    DATAERR = "4004"
    METHERR = "4005"
    SMSERROR = "4006"
    SMSFAIL = "4007"
    SESSIONERR = "4101"
    LOGINERR = "4102"
    PARAMERR = "4103"
    USERERR = "4104"
    ROLEERR = "4105"
    PWDERR = "4106"
    SERVERERR = "4500"
    UNKOWNERR = "4501"


error_map = {
    Code.OK: "成功",
    Code.DBERR: "数据库查询错误",
    Code.NODATA: "无数据",
    Code.DATAEXIST: "数据已存在",
    Code.DATAERR: "数据错误",
    Code.METHERR: "方法错误",
    Code.SMSERROR: "发送短信验证码异常",
    Code.SMSFAIL: "发送短信验证码失败",
    Code.SESSIONERR: "用户未登录",
    Code.LOGINERR: "用户登录失败",
    Code.PARAMERR: "参数错误",
    Code.USERERR: "用户不存在或未激活",
    Code.ROLEERR: "用户身份错误",
    Code.PWDERR: "密码错误",
    Code.SERVERERR: "内部错误",
    Code.UNKOWNERR: "未知错误",}


def res_json(errno=Code.OK, errmsg='', data=None, **kwargs):
    json_dict = {'errno': errno, 'errmsg': errmsg, 'data': data}
    if kwargs:
        json_dict.update(kwargs)
    return JsonResponse(json_dict)

这个使用ajax回调时，状态码就使用我们自己定义的状态码。
在这里插入图片描述
导入

from dj_blog.utils.res_code import res_json

使用时：
在这里插入图片描述
前端js：
需要修改从data中获得count

在这里插入图片描述

总结：

1、定义我们自己的状态码
2、用户名和手机号的校验，前端和后端各自校验
fksfdh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Django的个人博客系统
qq_44241861的博客
04-29 1796
文章目录项目简介项目功能项目待完善功能技术分析技术难点项目代码 项目简介 本系统采用 Django 技术,前后台开发工具为 Pycharm，数据库采用 MySQL 来进行开发。该文主要包含游客前台阅读、留言博文, 功能,后台用户登录 注册、管理个人博客, 精确地记录一篇文章的阅读量, 自动生成文章摘要等功能。为了让博客文章具有良好的排版，显示更加丰富的格式，支持 Markdown 语法和代码高亮。...
Python-基于django的个人博客系统ablogbasedjango
08-10
基于django的个人博客系统 a blog base django
Django框架 Django 2.1.7
04-11
学习python，简单开发所需要的开发框架Django，下载之前一定注意版本匹配问题。
django2.1.7从0开始搭建一个个人博客网站第1天
fksfdh的博客
02-20 238
第一天: 一、网站介绍： 1、网站类型： 个人新闻博客类网站 2、主页模块： 轮播图、热门新闻推荐、文章标签、文章列表、右侧广告展示、个人联系方式 3、用户模块： 注册：用户名、密码、手机号、图片验证码、短信验证码 登录：用户名或手机号、密码 个人中心页面 4、在线视频模块： 实现在线播放视频功能，用于视频展示等。 5、文件下载模块 实现相关资源共享、文档下载，如课件笔记等。 6、搜索模块 使用流...
Django - 构建个人博客网站
qq_33962481的博客
11-17 389
目录简单构建开启本地虚拟环境三级目录 简单构建 功能模块 ≈ Django App 开启本地虚拟环境 三级目录
Django从零开发的个人博客网站源码.zip
05-08
Django从零开发的个人博客网站源码 Django从零开发的个人博客网站源码 Django从零开发的个人博客网站源码 Django从零开发的个人博客网站源码 Django从零开发的个人博客网站源码 Django从零开发的个人博客...
从零开始搭建一个 Django 项目.txt
最新发布
07-19
### 从零开始搭建 Django 项目 #### 一、引言 Django 是一款非常流行的 Python Web 开发框架，以其高效、简洁著称。对于初学者来说，掌握如何从头开始构建一个 Django 项目是非常重要的技能。本文将详细介绍从零...
基于Python Django实现从0开发一个Django博客系统.zip
10-10
【Python Django实现从0开发一个Django博客系统】 在计算机科学与技术领域，毕业设计是一项重要的实践性教学环节，旨在让学生将所学理论知识应用于实际项目中。本资源提供了一个基于Python Django框架实现的博客...
Python个人博客系统django源代码，个人网站系统源程序
11-16
pip install -r requirements.txt ，安装程序相关依赖 在MySQL中创建youngBlog数据库，并导入youngblog.sql,修改youngBlog/settins.py中的DATABASES设置 manage.py createsuperuser,创建超级管理员，按照提示输入...
毕业设计基于python的Django开发的个人网站(个人博客)系统源码.zip
06-14
毕业设计基于python的Django开发的个人网站(个人博客)系统源码。 app划分 myblog: 个人博客app IntroductionDetail:个人简历app 环境安装 pip install django # 安装django pip install markdown # 博客显示风格 ...
昨天搭建的一个最简单的django网站
07-19
win10,python3.7,django2.2.3。首先你得自己激活自己的虚拟环境，然后python manage.py runserver就可以在localhost:8000/topics中看到了。相应的内容按照自己的需要更改对应的html文件即可
django项目部署 nginx+gunicorn+virtualenv+mysql
03-06
进行django项目的部署，采用nginx+mysql+virtualenv+gunicorn的方式进行部署
项目实战 Python Django 个人网站 电影推荐网站 完整代码
05-10
完整版Python-Django项目，调试通过，直接下载即可运行包括：登陆、注册、浏览、搜索、发布资源、评论等多个功能。可作为新手练习，课程设计，毕业设计，代码注释详细，便于理解。
Python_django_web学生管理系统（使用mysql数据库）
03-23
使用Python编程语言 Django MySQL数据库开发的web版学生管理系统，里面附带环境搭建的详细过程和开发过程中遇到的一些bug的讲解
python django+bootstrap实现用户管理系统
06-28
python+django+bootstrap实现的管理系统，注释全，功能强大，又文档说明，导入即可查看源码，初学者必备
django2.1.7 配置环境
ykallan的博客
09-04 594
使用pycharm创建django项目，可以选择添加一个应用，添加的应用名字为'app.apps.AppConfig', 如果在文件管理器中手动创建django项目，步骤为： 1.安装django， pip install django==2.1.7 2.创建django项目 django-admin startproject projectname 3.创建app django-admin st...
django2.1.7从0开始搭建一个个人博客网站第5天
fksfdh的博客
02-25 822
技术引用：uuid UUID 是 通用唯一识别码（Universally Unique Identifier）的缩写，是一种软件建构的标准，亦为开放软件基金会组织在分布式计算环境领域的一部分。其目的，是让分布式系统中的所有元素，都能有唯一的辨识信息，而不需要通过中央控制端来做辨识信息的指定。如此一来，每个人都可以创建不与其它人冲突的UUID。在这样的情况下，就不需考虑数据库创建时的名称重复问题。 ...
django2.1.7从0开始搭建一个个人博客网站第3天
fksfdh的博客
02-23 371
一、django中初始化的setting文件介绍： """ Django settings for dj_blog project. Generated by 'django-admin startproject' using Django 3.0.3. For more information on this file, see https://docs.djangoproject.com/...
Django搭建blog网站（一）
niepangu的专栏
05-05 7909
一、前言自学地址--&gt;&gt;&gt;&gt;&gt;追梦人物博客：https://www.zmrenwu.com/post/2/1.1.环境python版本：3.6Django版本：1.11.61.2.预览效果最终搭建的blog的样子，基本上满足需求了。框架搭好了，至于CSS，可以根据自己喜好随意搭配。二、建立博客应用2.1.建立项目和应用创建工程blogprojectdjango-adm...
使用pycharm基于Django从零开始搭建个人购物网站
05-23
好的，下面是基于Django从零开始搭建个人购物网站的步骤： 1. 安装Python和Django 首先需要安装 Python 和 Django，可以在官网下载安装包进行安装。 2. 创建Django项目 打开 Pycharm，在菜单中选择 File -> New ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值