Verification of complex forms

พื้นหลัง

เมื่อเราทำระบบการจัดการแบ็กเอนด์ เรามักจะพบกับรูปแบบที่ซับซ้อนมาก:

• มีรายการแบบฟอร์มมากเกินไป
• แสดงรายการแบบฟอร์มที่แตกต่างกันภายใต้ประเภทแบบฟอร์มต่างๆ
• รายการฟอร์มบางรายการปิดการตรวจสอบภายใต้เงื่อนไขบางประการ
• แต่ละรายการในแบบฟอร์มจะมีตรรกะที่กำหนดเองอื่นๆ เช่น กล่องอินพุตที่สามารถแทรกตัวแปรเทมเพลต แสดงจำนวนอักขระอินพุต อัปโหลดและแสดงรูปภาพ และ Rich Text - -
• ในสถานการณ์ที่ซับซ้อนนี้ ให้กรอกการตรวจสอบและส่งแบบฟอร์มให้เสร็จสิ้น
• คุณสามารถดูตัวอย่างที่เฉพาะเจาะจงได้: ตัวอย่างฟังก์ชันเล็กๆ น้อยๆ จำนวนมากถูกละเว้น และมีเพียงเฟรมเวิร์กฟอร์มที่ซับซ้อนโดยรวมเท่านั้นที่จะถูกเก็บไว้เพื่อแสดงวิธีแก้ปัญหา

ตัวเลือกที่ 1: ในไฟล์ vue

การแสดงและการซ่อนรายการแบบฟอร์มทั้งหมด การตรวจสอบ การเก็บข้อมูล การส่ง การปรับแต่ง และตรรกะอื่นๆ จะถูกรวบรวมไว้ด้วยกัน

• ตามประเภทของแบบฟอร์ม ให้ใช้ v-if/v-show เพื่อจัดการการแสดงผลและการซ่อนรายการแบบฟอร์ม
• ในการตรวจสอบความถูกต้องแบบกำหนดเองของ elementui ให้พิจารณาว่ารายการแบบฟอร์มได้รับการตรวจสอบตามประเภทแบบฟอร์มหรือไม่
• ตามประเภทของแบบฟอร์ม รับข้อมูลที่แตกต่างกันและส่งไปยังอินเทอร์เฟซที่แตกต่างกัน
• ตรรกะที่กำหนดเองอื่นๆ ทั้งหมด

ข้อบกพร่อง

• ความวุ่นวาย
• ความวุ่นวาย
• ยังวุ่นวายอยู่เลย
• ไฟล์ vue สามารถมี 2000 บรรทัดได้อย่างง่ายดาย
• เมื่อฉันพยายามเพิ่มประเภทแบบฟอร์มใหม่ ฉันพบว่าไม่มีเลย จาก. ลง. มือ.

ตัวเลือกที่ 2: แยกส่วนประกอบ

ที่จริงแล้ว มันง่ายที่จะคิดที่จะ แยกฟอร์มย่อยหลายประเภทที่เกี่ยวข้องกันตามประเภทฟอร์มที่ต่างกัน แต่ฉันยังคงพบปัญหามากมายในทางปฏิบัติ เช่น การตรวจสอบแบบฟอร์มผู้ปกครองและลูก การได้รับข้อมูลที่ส่งมาโดยรวม ฯลฯ และสรุปชุดวิธีแก้ปัญหา:

1. ส่วนประกอบย่อย

คอมโพเนนต์ลูกทั้งหมดจำเป็นต้องมีสองวิธี validate และ getData เพื่อให้คอมโพเนนต์หลักสามารถเรียกได้

(1) วิธี validate

ใช้เพื่อตรวจสอบรายการแบบฟอร์มของส่วนประกอบของตัวเองและส่งคืนอ็อบเจ็กต์ promise

 vaildate ( ) {
    // 返回`elementUI`表单验证的结果（为`promise`对象）
    return this . $refs [ "ruleForm" ] . validate ( ) ;
} ,
    

(2) วิธีการ getData

จัดเตรียมข้อมูลจากคอมโพเนนต์ย่อย

 getData ( ) {
    // 返回子组件的form
    return this . ruleForm ;
} ,

2. องค์ประกอบหลัก

(1) โหมดกลยุทธ์

ใช้รูปแบบกลยุทธ์เพื่อจัดเก็บและรับ ref ของฟอร์มย่อย (วิธีที่ใช้ในการรับฟอร์มย่อย) และ ฟังก์ชันส่ง การตัดสินแบบ if-else จำนวนมากถูกละเว้น

data: {
  // type和ref名称的映射
  typeRefMap : {
      1 : "message" ,
      2 : "mail" ,
      3 : "apppush"
  } ,
  // type和提交函数的映射。不同类型，接口可能不同
  typeSubmitMap : {
      1 : data => alert ( `短信模板创建成功${ JSON . stringify ( data ) } ` ) ,
      2 : data => alert ( `邮件模板创建成功${ JSON . stringify ( data ) } ` ) ,
      3 : data => alert ( `push模板创建成功${ JSON . stringify ( data ) } ` )
  } ,
} 

(2) วิธี submit

ใช้สำหรับ การตรวจสอบความถูกต้องของแบบฟอร์มองค์ประกอบหลักและลูก รับข้อมูลโดยรวม และการเรียกใช้ฟังก์ชันการส่งประเภทปัจจุบันเพื่อส่งข้อมูล

เนื่องจากวิธีการตรวจสอบ validate ของการยืนยันแบบฟอร์ม elementUI สามารถส่งคืนผลลัพธ์ promise ได้ คุณจึงสามารถใช้คุณลักษณะของ promise เพื่อจัดการการตรวจสอบความถูกต้องของแบบฟอร์มหลักและรองได้ ตัวอย่างเช่น ฟังก์ชัน then สามารถส่งคืนอ็อบเจ็กต์ promise อื่นได้ และ catch สามารถรับ reject และ Promise.all ทั้งหมด then อยู่เหนือมัน

• แบบฟอร์มลูกจะได้รับการตรวจสอบหลังจากที่แบบฟอร์มหลักได้รับการตรวจสอบแล้วเท่านั้น และมีลำดับ

   // 父表单验证通过才会验证子表单，存在先后顺序
  submitForm ( ) {
      const templateType = this . typeRefMap [ this . indexForm . type ] ;
      this . $refs [ "indexForm" ]
      . validate ( )
      . then ( res => {
          // 父表单验证成功后，验证子表单
          return this . $refs [ templateType ] . vaildate ( ) ;
      } )
      . then ( res => {
          // 全部验证通过
          // 获取整体数据
          const reqData = {
              // 获取子组件数据
              ... this . $refs [ templateType ] . getData ( ) ,
              ... this . indexForm
          } ;
          // 获取当前表单类型的提交函数，并提交
          this . typeSubmitMap [ this . indexForm . type ] ( reqData ) ;
      } )
      . catch ( err => {
          console . log ( err ) ;
      } ) ;
  } ,

• แบบฟอร์มหลักและแบบฟอร์มย่อยได้รับการตรวจสอบร่วมกัน

   submitForm1 ( ) {
    const templateType = this . typeRefMap [ this . indexForm . type ] ;
    const validate1 = this . $refs [ "indexForm" ] . validate ( ) ;
    const validate2 = this . $refs [ templateType ] . vaildate ( ) ;
    // 父子表单一起验证
    Promise . all ( [ validate1 , validate2 ] )
      . then ( res => {
        // 都通过时，发送请求
        const reqData = {
          ... this . $refs [ templateType ] . getData ( ) ,
          ... this . indexForm
        } ;
        this . typeSubmitMap [ this . indexForm . type ] ( reqData ) ;
      } )
      . catch ( err => {
        console . log ( err ) ;
      } ) ;
  } , 

ดูโปรเจ็กต์ออนไลน์ GitHub ของโปรเจ็กต์ และโค้ดส่วนประกอบ

สรุป: ฉันพบรูปแบบที่ซับซ้อนประเภทนี้ในหลายโครงการและใช้วิธีแก้ปัญหามากมาย ที่นี่ ฉันได้สรุปวิธีแก้ปัญหาที่ค่อนข้างเรียบร้อยและเรียบง่าย แน่นอนว่ายังมีวิธีแก้ปัญหาอื่นๆ อีกมากมาย ตัวอย่างเช่น สามารถวางวิธีการส่งข้อมูลในแต่ละองค์ประกอบย่อย และข้อมูลรายการแบบฟอร์มสาธารณะจะถูกส่งผ่านไปยังองค์ประกอบย่อยผ่าน props เพื่อการส่ง หากมีวิธีแก้ปัญหาอื่นที่ง่ายกว่า คุณสามารถแสดงความคิดเห็นหรือส่ง issue บน github

นอกหัวข้อ: หลังจากอ่านบัญชีของสถาปนิกส่วนหน้า: คำถามและคำตอบของ N เกี่ยวกับเส้นทางการเติบโตของวิศวกรส่วนหน้า มันสร้างแรงบันดาลใจให้ฉันมาก เมื่อคุณสับสนเกี่ยวกับทิศทางทางเทคนิคและโอกาสของคุณ หรือเมื่อคุณบ่นว่าโครงการของคุณต่ำเกินไป หรือเมื่อคุณบ่นว่าคุณทำงานซ้ำ ๆ ทุกวัน หรือเมื่อคุณถูกครอบงำด้วยเทคโนโลยีใหม่ ๆ ที่ไม่มีที่สิ้นสุดทุกวัน คุณอาจ พิจารณาโครงการของคุณอย่างจริงจัง เช่นกัน

• เป็นไปได้ไหมที่จะสร้างวงล้อขึ้นมาใหม่สำหรับงานที่ทำซ้ำทุกวัน?
• สแต็คเทคโนโลยีต่ำเกินไป เราจะสามารถเปลี่ยนไปใช้เทคโนโลยีใหม่ ๆ ได้อย่างราบรื่นและปรับปรุงประสิทธิภาพการพัฒนาได้หรือไม่?
• ไม่ว่าคุณจะเรียนรู้เทคโนโลยีใหม่ๆ มากมายเพียงใด ในที่สุดคุณก็จะกลับมาและนำไปใช้ในโครงการต่างๆ

เริ่มต้นจาก จุดที่ยุ่งยากของกระบวนการทำงานและโครงการ คุณจะก้าวหน้าในการฝึกฝน สรุป และแก้ไขปัญหาในทางปฏิบัติได้เร็วขึ้น

---

ความรู้สึกของฉันในการเขียนบทความนี้: ความยากในการอธิบายสิ่งเหล่านี้ >> ปัญหาทางเทคนิคที่มีอยู่ในตัวบทความเอง