Хичээлээр Vuejs фреймворкийн роутинг /чиглүүлэгч гэж орчуулж болох юм/ ойлголтын тухай авч үзье. Орчуулга муухан болсон байх талтай тул Routing гэсэн хэллэгээр нь шууд ойлгох нь илүү болов уу. Програмчлалын хэлний ухагдхуунуудыг шууд гадаад үгээр нь ойлгон тогтоох нь сайн. Учир нь монгол хэл дээр програмчлалтай холбоотой мэдээллүүд бага болохоор бид ихэнх зүйлийг интернетийн гадаад хэлтэй орчноос эсхүл гадаадын ном, хэвлэлээс судлах хэрэгтэй болдог. Vuejs фреймворкийн роутингийг ашиглахын тулд төслийн хуудас хоорондын чиглүүлэгчийг зохион байгуулдаг vue-router пакетыг төсөлдөө суулгах хэрэгтэй.

Ямарч програмын ажиллагаа өгөгдлийн төрлүүд дээр үндэслэн ажилладаг учраас програмчлалын хэлүүд өөрийн суурь өгөгдлийн төрлүүдтэй байдаг. Энгийн өгөгдлүүдийн төрлүүдээр илүү нарийн төрлүүдийг гарган эцсийн бүлэгт эдгээрийг хослуулан програмыг бүтээдэг. Нэг үгээр програм зохиохыг барилга барихтай зүйрлэбэл өгөгдлийн төрлүүд бол барилгын тоосго л гэсэн үг. Python -ий суурь буюу өөрт нь агуулагдаж байдаг өгөгдлийн төрлүүдийн талаар авч үзье.

Өмнөх хичээлүүдэд хэрэглэгчийн оруулсан эмайл, нууц үгэнд шалгалт хийх формыг зохиогоод байгаа. Өөрөөр хэлбэл бид бүртгэлийн формийг үүсгэсэн. Одоо формдоо түүнийг илгээх товчийг нэмвэл бүрэн хэмжээний ажиллагаатай болохоор байгаа. Иймээс формийн хэвд хамгийн сүүлийн form-group класстай div -ийн ард

<template>
  <div class="container">
    <form action="" class="pt-4">
      ...    
      <button class="btn btn-success">Submit</button>            
    </form>
  </div>
</template>

bootstrap -ээр хэвжүүлсэн Submit товчийг нэмэн оруулаад хуудсаа шинэчилбэл

Python хэлийг судлаж эхлэхийн өмнө кодыг бичих засварлагчийг сонгох хэрэгтэй. Учир нь код бичихдээ олон төрлийн засварлагчийг ашиглаж болох ч дараах хувилбарууд байх боломжтой.

Ерөнхий зориулалт бүхий ердийн тескт засварлагч.

Ийм засварлагчид ямар нэгэн хэл дээр код бичихэд зориулагдаагүй зөвхөн текст засваралахад ашиглахаар хийгдсэн байдаг. Ердийн тескт засварлагчид програмчлалын хэлний кодыг бичихдээ тэдгээрт плагин буюу нэмэлтийг суулгадаг. Ингэснээр текст засварлагч дээр тухайн хэлний кодыг бичих боломж бүрдэнэ. Ерөнхий зориулалтын тескт засварлагч бүр Python -ий кодыг хэвжүүлээд байдаггүй ч тохирох нэмэлтийг суулган тэдгээрийг код бичихдээ ашиглах боломжтой. Ийм төрлийн хамгийн өргөн тархсан засварлагчид бол Sublime text, Atom, Notepad++ зэрэг юм.

Форм дээрх контролуудыг Vuelidate пакетийн боломжийг ашиглан шалгахыг сурсан. Vuelidate пакетад олон тооны шалгагчид байгаа хэдий ч бид өөрсдийн шалгагчийг үүсгэх шаардлага гардаг. Жишээ нь шинэ хэрэглэгчийг бүртгэх форм хэрэглэгчийн цахим шуудангийн хаяг давтагдахгүй байхыг шалгах хэрэгтэй боллоо гэе. Өөрөөр хэлбэл манай өөрийн өгөгдлийн санд хэрэглэгчийн оруулсан цахим шуудангийн хаяг байгаа эсэхийг шалгах хэрэгтэй болсон гэсэн үг. Vuelidate пакетад манай өгөгдлийн санд хандан шалгалт явуулах шалгагч байхгүй гэдэг нь ойлгомжтой. Эндээс бид өөрсдийн шалгагч үүсгэхийг сурах хэрэгцээ гарч ирнэ.

Эхлэн суралцагчдад Python -ий ямар хувилбараас эхлэх асуудал үүсдэг. Python 2 -ийг 2020 оноос эхлэн хөгжүүлэлтийг зогсоосон тул Python 3 -ийг суралцах сууриар авах нь зөв. Python хэлний нэг онцлог шинэ хувилбар өмнөх хувилбараа дэмждэггүйд оршино.  Хувилбаруудын суурь маш төстэй ч Python 3 -т Python 2 -ийн зарим нэгэн асуудлыг шийдвэрлэсэн тул энэ хэсэгт хувилбарууд тохирохгүй. 2020 оноос Python 2 -ийн хөгжүүлэлт зогсож байгаа хэдий ч хувилбар бүрмөсөн байхгүй болохгүй нь ойлгомжтой. Хувилбаруудын суурь маш төстэй тул та Python 3 -ийг сурснаар Python 2 -ийн кодийг төвөггүй ойлгоно. Python 3 -ын бас нэгэн давуу нь хувилбар анхдагчаар Unicode -ийг дэмждэг болсон нь тэмдэгтийн кодчлолд гардаг олон хүндрэлүүдийг шийдсэн.

Програмд нэвтрэхэд хэрэглэгчийн нууц үгийг авах талбар ихэнхдээ байдаг. Ийм төрлийн талбарт шалгалтыг хэрхэн хийхийг сурцгаая. Үүний тулд Шалгалтын алдааг үзүүлэх хичээлийн App компонентийн шаблоны кодыг доорх байдлаар өргөжүүлье.

<template>
  <div class="container">
    <form action="" class="pt-4">
      <div class="form-group">
    ...
      </div>

      <div class="form-group">
        <label for="password">Password</label>
        <input 
          type="password" 
          id="password" 
          class="form-control"
          :class="{'is-invalid': $v.password.$error}"
          @blur="$v.password.$touch()"
          v-model="password"
        >

      </div>      
    </form>
  </div>
</template>

Програмчлалын олон төрлийн сайн хэлүүд байхад яагаад Python -г судлах хэрэгтэй талаар авч үзье. Python -г програмчлалын хэлүүдээс хамгийн сайн, илүү гэж үзэх нь өрөөсгөл ч орчин үеийн програмчлалын сайн хэлүүдийн нэг гэдгийг дурдах нь зүйтэй. Олон програм зохиогчид яагаад Python -г илүү сонирхдог шалтгаануудад

• Энгийн, тогтмол хийдэг ажлуудыг автоматжуулахад Python маш сайн. Жишээ нь ямар нэгэн үйлдлийн системд тогтмол хугацаагаар биелэгдэж байх жижиг скриптүүдийг бичихэд энгийн.
• Шинжлэх ухааны програм бичихэд зориулагдсан олон тооны фреймворк, сангуудтай тул Python -дээр ийм төрлийн програмыг зохиох боломжтой.
• Хэрэлэгчийн график интерфейс бүхий ердийн десктоп програмыг зохиож болно.
• Python дээр Android үйлдлийн системийн програмыг зохиох боломжтой.
• Django, Flask фреймворкуудыг ашиглан Python -р вебд суурилсан програм зохиож болдог.
• Маш өргөн дэлгэрсэн Tenser Flow санг ашиглан машины сургалтыг дэмждэг.

Хичээлээр RxJs сангийн талаар өмнөх хичээлүүдээр олон авсан мэдлэгээ бататган API контактад хандан хэрэглэгчийн мэдээллийг авах энгийн програмыг боловсруулах болно. Програмаас төрөл бүрийн хүсэлтийг илгээх боломжтой болгох зорилгоор төсөлдөө Jquery санг суулгая. Үүний тулд WebStorm текст засварлагчийн терминалыг нээгээд

npm i jquery командыг өгөөрэй.

Формийн шалгалтын ажиллагаануудтай үргэлжлүүлэн танилцая. Валидаторийг тохируулах хичээлийн жишээнд $v обьектод байгаа email түлхүүртэй обьектийг дэлгэц дээр харуулан цахим шуудангийн хаягийн талбарт оруулж буй өгөгдлүүд шалгагчийн төлөвт хэрхэн нөлөөлж байгааг ажигласан. Бодит жишээнд {{ $v.email }} бүтцийг ашиглаад байх нь тохиромжгүй тул түүнийг шаблоны кодоос

<template>
  <div class="container">
    <form action="" class="pt-4">
      <div class="form-group">
        <label for="email">Email</label>
        <input 
          type="email" 
          id="email" 
          class="form-control"
          @blur="$v.email.$touch()"
          v-model="email"
        >
      </div>
    </form>
  </div>
</template>

хасаад хуудсаа хөтөч дээр нээвэл

ердийн формийг үзүүлнэ.