免费个人自助建站,重庆网站建设平台,浙江住房城乡建设厅网站,seo华为网站诊断报告Django实现登录注册 目录 Django实现登录注册配置路由首页注册前端#xff1a;后端#xff1a; 登录前端#xff1a;后端#xff1a;验证码部分逻辑 配置路由
首先分发路由[User,Blog,Article]
from django.contrib import admin
from django.urls import path
from Blog…Django实现登录注册 目录 Django实现登录注册配置路由首页注册前端后端 登录前端后端验证码部分逻辑 配置路由
首先分发路由[User,Blog,Article]
from django.contrib import admin
from django.urls import path
from Blog import views
from django.conf.urls import includeurlpatterns [path(admin/, admin.site.urls),path(, views.home, namehome),path(User/, include(User.urls, namespaceUser)),path(Blog/, include(Blog.urls, namespaceBlog)),path(Article/, include(Article.urls, namespaceArticle)),
]配置路由
urlpatterns [path(register/, views.register, nameregister),path(login/, views.login, namelogin),# 返回图片路由path(get_verify_img/, views.get_verify_img, nameget_verify_img),path(blog/, views.blog, nameblog),
]首页
def home(request):if request.session.get(user):online_user request.session.get(user)else:online_user 登录return render(request, home.html, locals()){% load static %}
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- 引入jQuery--script src{% static js/jquery.js %}/script!-- 引入Bootstrap的CSS文件--link href{% static css/bootstrap.min.css %} relstylesheet!-- 引入Bootstrap的JavaScript文件--script src{% static js/bootstrap.js %}/script!-- 引入 layui.css --link relstylesheet href{% static layui/css/layui.css %}!-- 引入 layui.js --script src{% static layui/layui.js %}/script
/head
body注册
前端
{% load static %}
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- 引入jQuery--script src{% static js/jquery.js %}/script!-- 引入Bootstrap的CSS文件--link href{% static css/bootstrap.min.css %} relstylesheet!-- 引入Bootstrap的JavaScript文件--script src{% static js/bootstrap.js %}/script!-- 引入 layui.css --link relstylesheet href{% static layui/css/layui.css %}!-- 引入 layui.js --script src{% static layui/layui.js %}/scriptstyle.content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}/style/head
body
div classcontent!-- 注册表单 --form classlayui-form methodpost onsubmitreturn false; idlay_register{% csrf_token %}div classdemo-reg-containerdiv classlayui-form-itemdiv classlayui-rowdiv classlayui-col-xs7div classlayui-input-wrapdiv classlayui-input-prefixi classlayui-icon layui-icon-cellphone/i/divinput typetext namephone valuelay-verifyrequired|phone placeholder手机号lay-reqtext请填写手机号 autocompleteoffclasslayui-input idreg-cellphone/div/div/div/divdiv classlayui-form-itemdiv classlayui-input-wrapdiv classlayui-input-prefixi classlayui-icon layui-icon-username/i/divinput typetext nameusername value lay-verifyrequiredplaceholder用户名autocompleteoffclasslayui-input lay-affixclear/div/divdiv classlayui-form-itemdiv classlayui-input-wrapdiv classlayui-input-prefixi classlayui-icon layui-icon-password/i/divinput typepassword namepassword valuelay-verifyrequired placeholder密码autocompleteoff classlayui-input idreg-passwordlay-affixeye/div/divdiv classlayui-form-itemdiv classlayui-input-wrapdiv classlayui-input-prefixi classlayui-icon layui-icon-password/i/divinput typepassword nameconfirmPassword valuelay-verifyrequired|confirmPasswordplaceholder确认密码 autocompleteoff classlayui-inputlay-affixeye/div/divdiv classlayui-form-itembutton classlayui-btn layui-btn-fluid lay-submitlay-filterdemo-reg idsend_register注册/button/divdiv classlayui-form-item demo-reg-othera href{% url Blog:login %}登录已有帐号/a/div/div/form
/div
scriptlayui.use(function () {const $ layui.$;const form layui.form;const layer layui.layer;const util layui.util;util.on(lay-on, {msg: function () {{#layer.msg(登录成功);#}}})// 自定义验证规则form.verify({// 确认密码confirmPassword: function (value, item) {const passwordValue $(#reg-password).val();if (value ! passwordValue) {return 两次密码输入不一致;}}});});{#注册事件#}const registerButton document.getElementById(send_register);registerButton.addEventListener(click, function () {// 获取表单元素const form document.getElementById(lay_register);// 创建 FormData 对象const formData new FormData(form);formData.append(index, register_modal)$.ajax({url: ,type: POST,processData: false, // 设为false防止JQuery自动将formData转成字符串contentType: false, // 防止JQuery自动添加Content-Type请求头{#data: JSON.stringify(newData),#}data: formData,success: function (data) {if (data.err) {layui.layer.msg(data.err)}if (data.info) {layui.layer.msg(注册成功)$(document.getElementById(register)).modal(hide)window.open(data.info)}}})})
/script
/body
/html后端
def register(request):print(注册页面)if request.method POST and request.is_ajax:data request.POSTusername data[username]password data[password]phone data[phone]if models.Userinfo.objects.filter(usernameusername):err_info {err: 用户名已存在}return JsonResponse(err_info)else:models.Userinfo.objects._create_user(usernameusername, passwordpassword, phonephone, email)back_info {info: http://127.0.0.1:8000/}return JsonResponse(back_info)return render(request, register.html, locals())登录
前端
{% load static %}
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- 引入jQuery--script src{% static js/jquery.js %}/script!-- 引入Bootstrap的CSS文件--link href{% static css/bootstrap.min.css %} relstylesheet!-- 引入Bootstrap的JavaScript文件--script src{% static js/bootstrap.js %}/script!-- 引入 layui.css --link relstylesheet href{% static layui/css/layui.css %}!-- 引入 layui.js --script src{% static layui/layui.js %}/scriptstyle.content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}/style/head
body
div classcontentform classlayui-form methodpost onsubmitreturn false; idlay_login{% csrf_token %}div classdemo-reg-containerdiv classlayui-form-itemdiv classlayui-input-wrapdiv classlayui-input-prefixi classlayui-icon layui-icon-username/i/divinput typetext nameusername value lay-verifyrequiredplaceholder用户名autocompleteoffclasslayui-input lay-affixclear/div/divdiv classlayui-form-itemdiv classlayui-input-wrapdiv classlayui-input-prefixi classlayui-icon layui-icon-password/i/divinput typepassword namepassword valuelay-verifyrequired placeholder密码autocompleteoff classlayui-input idreg-passwordlay-affixeye/div/divdiv classlayui-col-xs7div classlayui-input-wrapdiv classlayui-input-prefixi classlayui-icon layui-icon-vercode/i/divinput typetext namecaptcha value lay-verifyrequiredplaceholder验证码 lay-reqtext请填写验证码autocompleteoff classlayui-input lay-affixclear/div/divdiv classlayui-col-xs5div stylemargin-left: 10px;img src{% url Blog:get_verify_img %} width100%height37px idimg_verify alt/div/divdiv classlayui-form-itembutton classlayui-btn layui-btn-fluid lay-submitlay-filterdemo-reg idsend_login lay-onmsg登录/button/divdiv classlayui-form-item demo-reg-othera href#没有账号立即注册/a/div/div/form
/div
script{#刷新验证码#}const verify document.getElementById(img_verify)verify.addEventListener(click, function () {// 获取原始的 src 属性值const verify_src verify.src;// 检查原始 src 是否已经包含时间戳if (verify_src.includes(?)) {// 如果已经包含时间戳只替换最后一个时间戳verify.src verify_src.replace(/\?.*$/, ) ? new Date().getTime();} else {// 如果原始 src 没有时间戳直接添加时间戳verify.src verify_src ? new Date().getTime();}}){#登录事件#}const loginButton document.getElementById(send_login);loginButton.addEventListener(click, function () {// 获取表单元素const form document.getElementById(lay_login);// 创建 FormData 对象const formData new FormData(form);formData.append(index, login_modal)$.ajax({url: ,type: POST,processData: false, // 设为false防止JQuery自动将formData转成字符串contentType: false, // 防止JQuery自动添加Content-Type请求头data: formData,success: function (data) {if (data.err) {layui.layer.msg(data.err)}if (data.url)window.open(data.url)},error: function (xhr, status, error) {console.log(error)}})})
/script
/body
/html后端
def login(request):if request.method POST and request.is_ajax:data request.POSTuser models.Userinfo.objects.filter(usernamedata[username]).first()if not user:err_info JsonResponse({err: 用户不存在})return err_infoif not check_password(data[password], user.password):print(密码错误)err_info JsonResponse({err: 密码错误})return err_infoelse:request.session[user] data[username]return JsonResponse({url: http://127.0.0.1:8000/})return render(request, login.html, locals())验证码部分逻辑
def get_verify_img(request):data, words verify()print(words)return HttpResponse(data)def random_rgb():return random.randint(0, 256), random.randint(0, 256), random.randint(0, 256)def random_word():# 0-9数字random_num random.randint(0, 9)# a-zrandom_lower chr(random.randint(97, 122))# A-Zrandom_upper chr(random.randint(65, 90))word random.choice([random_upper, random_lower, str(random_num)])return word
