Интерсептор

Хичээлээр vue-resource сангийн интерсептор гэдэг сонирхолтой боломжийн тухай үзье. vue-resource сангийн github дээрх хаягаар хандан сан серверт илгээсэн хүсэлт, хариултад интерсепторийг хэрхэн дэмждэг талаар дэлгэрүүлэн үзэж болно.

Интерсепторийг идэвхижүүлбэл өөрөөр хэлбэл интерсептор функцуудыг нэмвэл серверт илгээгдэж буй хүсэлт, серверээс ирсэн хариу бүрийг барих боломж нээгдэнэ.

Материалыг тусгай эрхтэй хэрэглэгч үзнэ.

request_quoteТусгай эрх авах

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

Холбоотой материалууд
Үр дүнгийн боловсруулалт

  Нээгдсэн тоо: 73 Нийтийн

Хичээлээр Үр дүнгийн компонент хичээлээр хийсэн компонентод динамик ажиллагааг хэрэгжүүлве. Өөрөөр хэлбэл сорилгын үр дүнг динамикаар үзүүлэх юм. Үүний тулд Quiz компонентод

const [results, setResults] = useState({})

сорилгын үр дүнгийн results төлвийг нэмэн өгье. results обьект үр дүнг {[асуултын_id]: хариултын_төлөв} хэлбэрээр агуулна. Өөрөөр хэлбэл хариултын төлөв талбарт хариулт зөв бол right буруу бол wrong утгыг агуулах юм.

Нэмэлт санг суулган тохируулах

  Нээгдсэн тоо: 93 Бүртгүүлэх

react програмд олон хуудас үүсгэн удирдахын тулд react -ийн бүрэлдхүүнд ордоггүй ч түүнтэй нягт холбоотой ажилладаг нэмэлт пакетийг суулгах хэрэгтэй. Үүний тулд VSCode -ийн терминалийн цонхыг нээгээд

npm i react-router-dom

командыг өгнө. Пакетийг facebook боловсруулаагүй ч react програмд олон хуудас үүсгэн удирдахад хамгийн өргөнөөр ашигладаг. Төсөлд пакетийг ашиглахын тулд төслийн кодийг тусгай компонентод багцлан react програмд react-router пакетийг ашиглаж байгааг мэдэгдэх юм.

Цэсийн хэрэгжүүлэлт

  Нээгдсэн тоо: 51 Төлбөртэй

Цэсийг нээх хаах ажиллагааг хариуцах компонентийг боловсруулсан тул энэ хичээлээр програмийн удирдах цэсийг хийе. Үүний тулд төслийн components хавтасны Navigation хавтаст цэсний компонентийн Drawer хавтасыг үүсгээд түүнд Drawer.js, Links.js, Drawer.module.css файлуудыг үүсгэн өгье. Drawer.js файлд

import classes from "./Drawer.module.css";
import {links} from "./Links"

const Drawer = (props) => {
  const renderLinks = () => {
    return links.map((link, index) => {
      return (
        <li key={index}>
          <a href="/#">Link {link}</a>
        </li>
      );
    });
  }
    
  return (
    <nav className={classes.Drawer}>
      <ul>{renderLinks()}</ul>
    </nav>
  ) 
}

export default Drawer;

код бүхий компонентийг үүсгэе.

Директивийн тэмдэглэгээ

  Нээгдсэн тоо: 1070 Төлбөртэй

VueJs фреймворкийн үндсэн ухагдхууныг танилцуулах ээлжит хичээлээр директивүүдийн тэмдэглэгээний талаар авч үзье. VueJs -ийн тодорхой директивүүдтэй илүү эвтэйхэн ажиллах боломжийг доорх код бүхий хуудас дээр харцгаая.

    <body>
        <div id="app">
            <h2>
                <a v-bind:href="url">E-surgalt</a>
            </h2>
            <h2>
                Тоолуур = {{ counter }}
            </h2>

            <button v-on:click="counter++">Нэмэгдүүлэх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    url: 'https:',
                    counter: 0
                }
            })
        </script>
    </body>
Лямбда

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 22

 
Outlet компонент

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 51

 
Хадгалагч (Memento)

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

…

Нээгдсэн тоо : 51

 
Нэргүй арга

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 55

 
Урвуу матриц

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 68

 
Кодийн сайжруулалт

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 67

 
Хуваах

Хуваах нь нэг тоо нөгөө тоонд хэдэн удаа агуулагдаж буй тодорхойлох арифметикийн үйлдэл.
Хуваалтыг нэг бус удаа…

Нээгдсэн тоо : 62

 
Зуучлагч (Mediator)

Зуучлагч (Mediator) нь олон тооны обьектууд бие биетэйгээ холбоос үүсгэхгүйгээр харилцан ажиллах боломжийг хангах загварчлалын хэв юм. Ингэснээр…

Нээгдсэн тоо : 54

 
Делегатийн хэрэглээ

Делегатууд хичээлд ухагдхууны талаар дэлгэрэнгүй үзсэн ч жишээнүүд делегатийн хүчийг бүрэн харуулж чадахааргүй байсан.…

Нээгдсэн тоо : 71

 
Энэ долоо хоногт
Бодлого 6.038

2.0(15) үет бутархайг энгийн бутархай болго.

Нээгдсэн тоо : 1512

 
Бодлого 12.061

тэгшитгэлийн хамгийн их сөрөг язгуурыг ол.

Нээгдсэн тоо : 907

 
Бодлого 5.109

тэнцэтгэл бишийн системийг хангах x -ийн натурал утгыг ол.

Нээгдсэн тоо : 267

 
© 2014 Зохиогчийн эрхээр хамгаалагдсан. Холбогдох - 96655195