일반적인 Django 등록 기능 모듈 구현 방법

등록 기능 구현

forms 구성 요 소 를 폼 검증 합 니 다.

사용자 프로필 사진 전단 실시 간 전시;

ajax 에서 post 요청 보 내기;

forms 구성 요 소 를 사용 하여 사용자 가 입력 한 정 보 를 검증 합 니 다.우선 app 디 렉 터 리 아래 my form.py 파일 을 만 듭 니 다.
프로젝트 가 처음부터 끝까지 하나의 forms 구성 요소 만 사용 된다 면 py 파일 을 만들어 서 쓰 면 됩 니 다.
그러나 프로젝트 에 여러 forms 구성 요 소 를 사용 해 야 한다 면 my forms 폴 더 를 폴 더 에 만 들 고 forms 구성 요소 기능 에 따라 서로 다른 py 파일 을 만 들 수 있 습 니 다.

regform.py

loginform.py

userform.py

orderform.py

......

#         forms    
from django import forms
from app01 import models

class MyRegForm(forms.Form):
  username = forms.CharField(label='   ',min_length=3,max_length=8,
                error_messages={
                  'required':'       ',
                  'min_length':'     3 ',
                  'max_length':'     8 '
                },
                #        Bootstrap  
                widget=forms.widgets.TextInput(attrs={'class':'form-control'})
                )
  password = forms.CharField(label='  ',min_length=3,max_length=8,
                error_messages={
                  'required':'      ',
                  'min_length':'    3 ',
                  'max_length':'    8 '
                },
                #        Bootstrap  
                widget=forms.widgets.PasswordInput(attrs={'class':'form-control'})
                )
  confirm_password = forms.CharField(label='    ',min_length=3,max_length=8,
                    error_messages={
                    'required':'        ',
                    'min_length':'      3 ',
                    'max_length':'      8 '
                  },
                  #        Bootstrap  
                  widget=forms.widgets.PasswordInput(attrs={'class':'form-control'})
                  )
  email = forms.EmailField(label='  ',
               error_messages={
                 'required': '      ',
                 'invalid':'       ',
               },
               widget=forms.widgets.EmailInput(attrs={'class':'form-control'})
               )

  #     
  #     ：          
  def clean_username(self):
    username = self.cleaned_data.get('username')
    #        
    is_exist = models.UserInfo.objects.filter(username=username)
    if is_exist:
      #     
      self.add_error('username','      ')
    return username

  #     ：          
  def clean(self):
    password = self.cleaned_data.get('password')
    confirm_password = self.cleaned_data.get('confirm_password')
    if not password == confirm_password:
      self.add_error('confirm_password','       ')
    return self.cleaned_data

그리고 urls.py 에 등록 페이지 의 경로 정 보 를 설정 합 니 다.

from django.contrib import admin
from django.urls import path
from app01 import views

urlpatterns = [
  path('admin/', admin.site.urls),
  path('register/',views.register,name='reg'),
]

보기 함수 views.py 에서 forms 구성 요소 검사,ajax 가 보 낸 post 를 작성 하여 데 이 터 를 가 져 오 라 고 요청 하고 django orm 기능 으로 데 이 터 를 저장 하 며 백 엔 드 의 처리 결 과 를 전단 에 되 돌려 검사 합 니 다.

from app01.myforms import MyRegForm
from app01 import models
from django.http import JsonResponse
# Create your views here.

def register(request):
  form_obj = MyRegForm()
  if request.method == 'POST':
    #         js    
    back_dic = {"code": 1000, 'msg': ''}
    #         
    form_obj = MyRegForm(request.POST)
    #         
    if form_obj.is_valid():
      # form_obj.cleaned_data：{'username': 'zhangsan', 'password': '123456', 'confirm_password': '123456', 'email': '[email protected]'}
      #                  
      clean_data = form_obj.cleaned_data 
      #       confirm_password     
      clean_data.pop('confirm_password') # {'username': 'zhangsan', 'password': '123456', 'email': '[email protected]'}
      
      #               ，request.POST         
      file_obj = request.FILES.get('avatar')
      """
      	               ，            
      	  file_obj=None，               。
      """
      if file_obj:
        #      clean_data            
        clean_data['avatar'] = file_obj
      #          
      models.UserInfo.objects.create_user(**clean_data)
      #             
      back_dic['url'] = '/login/'
    else:
      back_dic['code'] = 2000 #       
      back_dic['msg'] = form_obj.errors
    #            json     
    return JsonResponse(back_dic)
  return render(request,'register.html',locals())

전단 의 등록 페이지:register.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
  <title>    </title>
</head>
<body>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <h1 class="text-center">  </h1>
      <form id="myform"> <!--      form               form    -->
        {% csrf_token %}
        {% for form in form_obj %}
          <div class="form-group">
            <label for="{{ form.auto_id }}">{{ form.label }}</label>
            {{ form }}
            <span style="color: red" class="pull-right"></span>
          </div>
        {% endfor %}
        
        <div class="form-group">
          <label for="myfile">  
            {% load static %}
            <img src="{% static 'img/default.jpg' %}" id='myimg' alt="" width="100" style="margin-left: 10px">
          </label>
          <input type="file" id="myfile" name="avatar" style="display: none" >
        </div>

        <input type="button" class="btn btn-primary pull-right" value="  " id="id_commit">
      </form>
    </div>
  </div>
</div>
</body>
</html>

[어 려 운 점]JS 처리 논 리 를 작성 하 는 데 있 습 니 다.이미지 업로드 로드,ajax 가 보 낸 post 요청 과 백 엔 드 등록 결과 에 대한 정보 처 리 를 포함 합 니 다.

<script>
  $("#myfile").change(function () {
    //        
    // 1             
    let myFileReaderObj = new FileReader();
    // 2            
    let fileObj = $(this)[0].files[0];
    // 3               
    myFileReaderObj.readAsDataURL(fileObj) //      IO  
    // 4                     src  
    //                 
    myFileReaderObj.onload = function(){
       $('#myimg').attr('src',myFileReaderObj.result)
    }
  })

  $('#id_commit').click(function () {
    //   ajax                          
    let formDataObj = new FormData();
    // 1.        
    {#console.log($('#myform').serializeArray()) // [{},{},{},{},{}]         #}
    $.each($('#myform').serializeArray(),function (index,obj) {
      {#console.log(index,obj)#} // obj = {}
      formDataObj.append(obj.name,obj.value)
    });
    // 2.      
    formDataObj.append('avatar',$('#myfile')[0].files[0]);

    // 3.  ajax  
    $.ajax({
      url:"",
      type:'post',
      data:formDataObj,

      //             
      contentType:false,
      processData:false,

      success:function (args) {
        if (args.code==1000){
          //        
          //window.location.href = args.url
        }else{
          //                 input   
          // forms        id    id_   
          $.each(args.msg,function (index,obj) {
            {#console.log(index,obj) // username    ["       "]#}
            let targetId = '#id_' + index;
            $(targetId).next().text(obj[0]).parent().addClass('has-error')
          })
        }
      }
    })
  })
  //     input         
  $('input').focus(function () {
    //  input   span   input   div         
    $(this).next().text('').parent().removeClass('has-error')
  })
</script>

효 과 는 다음 과 같 습 니 다:

이상 은 통용 되 는 Django 등록 기능 모듈 실현 절차 의 상세 한 내용 입 니 다.Django 등록 기능 모듈 실현 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 해 주 십시오!