Создание интернет магазина — часть 6

Автор Ivan Samoilov
Создание интернет магазина — часть 6

Добро пожаловать на лекцию про о дата и angular Ivy B5 мы поговорим сейчас об adata.

Что такое ода то зачем он нужен и как он работает. Первое, что я хочу заметить, что у нас не хватает поиска мы сейчас сделаем. Сначала — это простой поиск который был на лекциях дуэт.

В начале мы будем использовать фильтр на поиск на клиенте.

Он очень быстрый очень ограничено массив данных который может быть у клиента если у нас миллионы строк мы не хотим клиенту передавать все миллионы строк и поэтому мы хотим сделать на севере чтобы использовать поиск на сервере мы будем использовать систему о дата — это Open Source стандартный Open Source по которому мы можем передать фильтр сортировку и так далее давайте начнем с того, что мы добавим сейчас бокс для поиска мы сейчас будем сосредоточены на поиски на клиенте. Мы — это сделаем в течение 5 минут и вся наша лекция будет обхода то мы не будем заниматься на данный момент мы добавим поле для индекса мы можем добавить Input для. Политех как — это принято в html5 есть. Полисорб, что принципе ничем не отличается от поля текст. Вообще в html5 есть много разных полей например ставить галочки выбирать цвета он мне даёт выбрать цвет дату он мне даёт календарик на экране. То есть у меня есть поля в котором я выбираю компания пароль и он мне делает. Звёздочки на экране — это всё изучается в html5 — это добавочная компоненты. Мы можем написать Search. Мы можем написать — это совершенно неважно — это ни на, что не влияет может быть если мы будем использовать какой-то готовый дизайн на полисерч он может сделать какой-то другой дизайн какой-то класс, но на данный момент мы можем написать Search. Можем написать текст болью — это то, что будет написано внутри текст бокса iname. Какое имя будет присвоено когда, но будет, но мы ничего не отсылаем на сервер — это не форма мы не делаем форму в которой — это поле. Поэтому нам совершенно. Мы ставим только тип данных и placeholder в котором что-то будет написано внутри пока мы не пишем свой текст и модуль — — это какой переменной в нашем ангуляр будет присвоен назначение какую переменную будет входить значение мы напишем в этом текстбоксе я привык работать с текстом поэтому мы оставим текст дали Text Search текст. Каждый раз когда мы будем гулять какое-то значение в — это поле она будет попадать в текст в переменную тексты Search мы можем увидеть, что мы можем отфильтровать поэтому текст не помните как фильтровать данные о клиенте. Вы можете посмотреть w3school там где фильтры. Есть фильтр который называется. Мы видим, что есть этот фильм также у нас есть фильтр с переменной и каждый раз когда мы бы значение в этом текст боксе, но будет меняться на клиенте. Но — это всё происходит на клиенте с условием, что все данные находятся у клиента я вижу, что вообще нет никаких данных что-то произошло и в конце ли у нас есть ошибка его ошибки. Мы видим что. Контрол ф5 текст Search что-то в нём не связано с текст всё посмотрю и мы видим, что у нас не хватает: видите вот этого двоеточие мне фото я его забыл написать в синтаксис и поэтому фильтр не работает теперь мы видим, что ошибки нет и данные появились на экране. Давай попробуем фильтровать и посмотреть, что — это действительно работает мы видим, что мы пишем там какие-то пример букву и и появляются товары только в которых есть буква и или буква, а то, что мы пишем то фильтруется то есть у нас из списка продуктов только те товары которые включают в себя то, что мы задаем в поиске прекрасно — это работает во-первых мы хотим поставить — это справочного давайте сейчас поиграемся с его css-класса мы ему хотим сделать floatride свойства CSS мы добавляем Steam как работают свойства и, что такое флуоцинонид мы изучаем на курсе HTML. Вы можете посмотреть, что он находится внутри панели и внутри. Вот это. Вадим панель в правом верхнем его всё правильно — это его место. Ну что-то он очень так вплотную встал. Мы хотим сделать границы вокруг то есть отодвинуть его немножко чтобы он был правее на чтобы у него был мордент у него были. Поля 5 пикселей выглядит. Лучше давайте сделаем сейчас побольше пикселей теперь совсем красота получилась мы его сделали в правом верхнем углу с полями по бокам 10 пикселей. Конечно можно взять готовый стили в bootstrap, но мы сейчас не хотим этим заниматься. Мы хотим сосредоточиться наадата на программирование на и поэтому мы ограничимся вот таким вот дизайном и у нас на стороне клиента всё работает то, что мы до сих пор сделали — это очень подходит из 100 200 300 700 товаров продуктов можно фильтровать на миллионы строк мы уже не хотим потому, что во-первых мы не хотим просто так передавать клиенту миллионы строк в пустую всё равно он их не может показать на экране все эти миллионы строк никому не нужна. Пусть клиент к нам обратиться к серверу и мы отдадим ему конкретно то, что ему надо ему надо например первые 10 строк от того, что он чтобы нам облегчить работу мы используем готовую систему которая называется от Data for Data этот Data protocol — это Open Source — это по которому мы посылаем запрос на сервер в строке адреса уорелл. Мы посылаем фильтр какой мы хотим. Какую сортировку мы хотим сколько записей. Мы хотим мы хотим например пропустить 10 первых записей получить только 10 следующих записей то есть.

0 комментариев
0

Читайте также