刘涛做的网站,电子商城网站建设,wordpress 引用文件,韩国手做配件网站最近在准备上线一个网站#xff08;基于django的编程技术学习与外包服务网站#xff09;#xff0c;所以会将自己的在做这个项目的过程中遇到的模块业务以及所涉及到的部分技术记录在CSDN平台里#xff0c;一是希望可以帮到有需要的同学#xff0c;二十以供自己后续回顾学…最近在准备上线一个网站基于django的编程技术学习与外包服务网站所以会将自己的在做这个项目的过程中遇到的模块业务以及所涉及到的部分技术记录在CSDN平台里一是希望可以帮到有需要的同学二十以供自己后续回顾学习。
今天要分享的是django的登录和注册页面功能其实做网页登录和注册基本上都是必要的一步啦那么今天我们就来了解一下。
登录注册前端Html以及Css我就不细说啦毕竟我主要是负责后端业务的再说即使你我不会前端的内容网上一大堆的登录注册的模板直接拿来下载就好了我这个登陆注册的前端模板就是直接在网站上Copy的另外说到这个登录注册一般有两种情况1登录为一个页面注册为一个页面2登录注册同是在一个页面。
我先说一下在django框架里我们实现登录注册的一个大概流程
拿到前端的模板我们更据需要建立对应的数据库里的字段然后回来前端来看比如说我们点击注册那么我们把注册的按钮的类型设置为submit给每一个注册页面的输入框设置一个name属性然后回到后端来看在后端里我们在函数中需要写入判断函数如果是GET方法则返回注册页面如果是POST方法submit即提交表单我们则会获取我们输入框的信息然后我们将其存放在数据库里即可同时回到登录页面然后输入框输入对应的信息如果输入的信息账号和密码存在在数据库里则信息正确进入我们的首页指定页面。
前端页面如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDjangoText/titlelink hrefhttps://fonts.googleapis.com/css?familyComfortaa|Spartandisplayswap relstylesheetscript srchttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js/scriptlink relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css/script srchttps://cdn.jsdelivr.net/npm/popper.js1.16.0/dist/umd/popper.min.js/scriptmeta charsetutf-8meta nameviewportcontentwidthdevice-width, initial-scale1, maximum-scale1, minimum-scale1, user-scalableno, minimal-ui, viewport-fitcovermeta nameapple-mobile-web-app-capable contentyeslink relstylesheet hrefhttps://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.csslink relstylesheet hrefhttps://use.fontawesome.com/releases/v5.12.0/css/all.cssscript srchttps://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js/scriptlink relstylesheet href/static/css/loginstyle.css
/head
body
!-- partial:index.partial.html --
bodydiv classcontainerdiv classcontentdiv classlogin-container animated fadeInDown styleanimation-delay:.3ms;!-- Login --div classlogin justify-content-center idlogin-formh1 classform-titlei classfas fa-user stylecolor:#55a0ff;/i br LOGINhr/h1div classform-container animated fadeIn styleanimation-delay:.7ms;form methodPOST{% csrf_token %}label fori classfas fa-at/i Email /labelinput typetext nameaccount placeholderAccountlabel fori classfab fa-slack-hash/i Password /labelinput typepassword namepassword placeholderPassworddiv classsubmit-buttonsinput typesubmit value登录 nameloginsubmitinput typebutton value注册 classbtn-register/div/form/div/div!-- Login --!-- Register --div classregister justify-content-cente animatedr styleanimation-delay:.3sh1 classform-title i classfas fa-user-plus stylecolor:#57efc4;/i br REGISTERhr/h1div classform-container animated fadeIn styleanimation-delay:.3s;form methodPOST action/login/ {% csrf_token %}label fori classfab fa-amilia/i Name /labelinput typetext namename placeholderNamelabel fori classfas fa-at/i Account /labelinput typetext nameaccount placeholderAccountlabel fori classfab fa-slack-hash/i Password /labelinput typepassword namepassword placeholderPasswordlabel fori classfab fa-slack-hash/i Confirm Password /labelinput typepassword namepassword_confirmation placeholderPassworddiv classsubmit-buttonsinput typesubmit nameregistersubmit value注册 stylebackground:#55efc4;input typebutton value登录 classbtn-login/div/form/div/div!-- Register --div classlogin animated fadeIn styleanimation-delay:.7s;animation-duration:4s; idlogin-bg/div/div/div
/div/body
!-- partial --
script srchttps://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js/script
script srchttps://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js/script
script srchttps://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css/script
script src/static/js/loginscript.js/script/body
/html自定义404报错页面
!DOCTYPE html
html langen
head
meta charsetUTF-8
title404 Page/titlelink relstylesheet href/static/css/style_error.css/head
body
section classwrapperdiv classcontainerdiv idscene classscene data-hover-onlyfalsediv classcircle data-depth1.2/divdiv classone data-depth0.9div classcontentspan classpiece/spanspan classpiece/spanspan classpiece/span/div/divdiv classtwo data-depth0.60div classcontentspan classpiece/spanspan classpiece/spanspan classpiece/span/div/divdiv classthree data-depth0.40div classcontentspan classpiece/spanspan classpiece/spanspan classpiece/span/div/divp classp404 data-depth0.50Error/pp classp404 data-depth0.10Error/p/divdiv classtextarticlep{{ errorMsg }}/pbutton idback返回首页/button/article/div/div
/sectionscript src/static/js/parallax.min.js/script
script src/static/js/jquery.min.js/script
script src/static/js/script.js/script
scriptvar back document.getElementById(back);back.onclick function(e){history.back()}
/script
/body
/html
后端业务处理代码如下
def login(request):if request.method GET:return render(request,login.html)elif request.POST.get(registersubmit):print(nihao 注册)name request.POST.get(name)account request.POST.get(account)password request.POST.get(password)checkpassword request.POST.get(password_confirmation)try:User.objects.get(accountaccount)except:if not name or not account or not password or not checkpassword:return errorResponse(request, 定义技术昵称or账号or密码存在空值)if password ! checkpassword:return errorResponse(request, 定义技术两次密码不吻合)User.objects.create(namename, accountaccount, passwordpassword, checkpasswordcheckpassword)return render(request,login.html)elif request.POST.get(loginsubmit):print(nihao 登录)account1 request.POST.get(account)password1 request.POST.get(password)try:User.objects.get(accountaccount1,passwordpassword1)except:return errorResponse(request,定义技术输入信息有误)
数据库
from django.db import models
class User(models.Model):namemodels.CharField(verbose_name昵称,max_length30)accountmodels.CharField(verbose_name账号,max_length30)passwordmodels.CharField(verbose_name密码,max_length30)checkpasswordmodels.CharField(verbose_name确认密码,max_length30)
效果图 自定义404报错页面 另外说一下我这个前端的登陆注册页面是在一个外网Copy下载的且登陆注册的右侧的那个图片是你每次登录注册都会随机生成不同的图片所以加载的时候可能会出现慢的情况。
