🚀 Add to Chrome – It’s Free - YouTube Summarizer
Category: N/A
No summary available.
00:00
итак сегодня мы с вами создадим еще одну страничку в нашем приложении она будет отвечать за главное меню на ней будут располагаться все наши 12 знаков зодиака и мы сможем по каждым из них кликнуть и перейти в детальную информацию об этом знаке но для того чтобы это создать нам
00:16
нужно внедрить html-код в ответ и нашего сервера пока что если посмотреть на нашу страничку вот сюда перейти во вкладку сеть пройти давайте обновим смотрите все наши запросы они представляют собой
00:32
просто текст то есть в них нету никаких тегов из html соответственно мы с вами не можем никак влиять на представлении вот этой информации давайте я продемонстрирую пример вот здесь в классе http response мы выводим информацию о знаки зодиака и давайте я
00:50
добавлю какой-нибудь простой строкой хэллоу old перезапускаем вот она отображается но смотрите если я сделаю ее многострочный и добавлю несколько переносов вот эти переносы в нашей странички отображаться
01:06
никаким образом не будет вот еще раз давайте обновим видите и чтобы вы это понимали давайте я поставлю вот здесь запятую посерединке вот , появляется но переносов мы с вами все еще не видим если вы работали с html
01:23
то вы знаете что все эти пробелы и подступы и так далее они игнорируются браузером или просто пропускается так вот чтобы браузер воспринимал здесь переноса строки вы должны будете добавлять специальные теги и за перенос строки отвечает такой так как br давайте
01:40
его добавим сюда вот можем даже несколько раз обновляем страничку и вот видите после хэллоу у нас произошла с вами три переноса и значит только при помощи html мы можем влиять на то как
01:55
вот эта информация наша будет выводиться эту строку давайте мы с вами удалим она нам нужна только для демонстрации и мы можем например обернуть описание нашего знака зодиака какой-либо так давайте обернём например ваш 2 то есть
02:12
заголовок 2 ур нет для этого нам нужно вот здесь добавить th2 и периода нашей строкой тоже добавить закрывающий тег h2 но все это нас должна быть в виде строки вот если мы сделаем таким образом то у
02:29
нас будет буквально выводиться информация дискрипшн но уже смотрите видео заголовка нам нужно чтобы здесь выводилось именно значение переменной дискрипшн поэтому давайте добавим в строку и вот это значение обернем фигурные скобки тем самым мы говорим о
02:45
том что сюда надо поставить именно значение переменной обновляем и вот видим вывод и также смотрите если перейти в запрос то в ответе мы увидим что наша строка находится между тегами h2 из-за этого
03:01
шейх становится жирным его размер увеличивается на самом деле html мы будем оформлять не в таком виде виде файлов и если мы займемся уже в следующем модуле сейчас лишь я вам показываю что html необходим для нашей следующей задаче напомню мы
03:17
хотим создать с вами меню и меню у нас будет срабатывать когда мы будем обращаться к адресу гороскоп то есть здесь мы не указываем не название нашего знака зодиака не его порядковый номер вот по этому адресу мы хотим чтобы вы явились все наши знаки зодиака для этого
03:35
мы идем гороскоп urals и добавляем еще один road вот здесь мы пишем пустую строку то есть пустой road и дальше указываем какое представление должно у нас отработать мы его сейчас создадим у нас будет называться яндекс не забывайте
03:51
здесь поставить запятую что касается вот этой пустой строки давайте вспомним что наш ural конфиг данный сработает только в тот момент когда нам обратятся по пути гороскоп и уже дальше здесь мы отловим если будет
04:08
пустая строка после пути гороскоп а вот именно в этот момент и будет пустая строка то произойдет вызов нашей функции yandex вот как это у нас работает итак теперь давайте в представлениях вот
04:24
здесь вот создадим функцию она как вы понимаете будет называться у нас индекс принимать она обязана request и здесь мы должны получить список всех наших знаков зодиака мы это уже делали давайте я сверну вот этот терминал вот у
04:40
нас список всех знаков зодиака и давайте я просто верну его в качестве ответа посмотрим что там хранится в этой перемен не так обновляем страничку провод у нас прописан правильно обратите внимание и вот мы видим просто сразу
04:58
подряд написанные все знаки зодиака вот первый вот taurus 2 и так далее то есть нет никаких разделителей хорошо давайте их добавим для этого я поставлю . снова здесь останавливаемся давайте посмотрим что из
05:13
себя представляет эта перемена зодиак это список из строк и наша цель превратить его в одну большую строку чтобы между элементами стояла например , для этого мы пользуемся методом join us
05:28
through и просто в него передаем наш список но вот здесь вот в строке вы должны будете написать разделитель вот давайте напишем запятую выполняем эту команду и видим что наши элементы сцепились запятыми если вы добавите
05:46
пробел и выполнить эту команду вы увидите что разделитель , пробел вот между всеми этими элементами так это уже получше выглядят давайте я скопирую назовем переменную response и
06:01
будем ее возвращать . снова я уберу нажимаем продолжить программу обновляем страничку и все вот у нас прекрасно работает с вами но теперь мы хотим чтобы они выводились у нас в столбик каждое название с новой строчки был вы можете
06:18
подумать что здесь нам поможет символ переноса но вы будете неправы вот смотрите ничего не произошло только добавился лишний пробел и если вы вспомните начало нашего урока то поймете
06:34
переносы здесь ничего не значит то есть мы должны именно html добавлять какое-то поведение то есть вот эти так раз переносы не значит мы можем добавить тбр обновляем страничку давайте еще раз и вот у нас принципе уже
06:51
все получается виде столбца давайте запятую удалим чтобы все было по ровнее ну вот это уже гораздо лучше но лучше отказаться от таких переносов и вспомнить что вышли меня есть так
07:06
специальный он называется лист для хранения упорядоченных и неупорядоченных списков выглядите это примерно будет вот таким вот образом давайте я в строке покажу мы с вами создаём тег открывающийся списка нашем случае это будет ордер лист насчет
07:24
мы пишем о ел и у нас он должен закрываться вот и внутри этого тега у нас должны быть элементы они должны находиться внутри тега li и соответственно этот тэг у нас должен закрываться и вот первый элемент у нас получается
07:42
овен потом идет taurus давайте продублирую эту строчку и вот так далее то есть вот такая структура у нас с вами должна быть давайте еще один добавлен и значит мы видим вот эта часть у нас
07:57
повторяется а т о л остается прежним значит по всем нашим знакам зодиака мы можем пройтись в цикле давайте я напишу его таким образом создадим результирующую строку она у нас
08:13
будет пустая и мы каждый раз к не будем добавлять по одному такому элементу да это у нас будет виде строки а вот сюда мы должны поставить название знака зодиака поэтому мы все это
08:30
превращаем его в строку и подставляем значения sun давайте взглянем что у нас будет получаться и вот здесь мы будем возвращать значение рез и так ставлю точку останова обратите внимание вот здесь на
08:46
переменный рез выполняемые первый раз и смотрите к ней добавляется парни текли и и между ними стоит ирис выполняем еще раз и видите добавляется второй так taurus к ним потом добавятся близнецы и так далее в итоге мы с вами
09:05
получим давайте отпустим точку останова вот такие значения но если мы взглянем что же в итоге будет в переменный рез смотрите она не обрамляется в тыл вот это мы с вами еще забыли сделать и
09:20
давайте и это провернем у нас было переменный response давайте сделаем ее сразу и в строкой многострочный я скопирую вот эти строки вот сюда я поставлю и вот здесь мы должны добавить
09:37
так раз наши перемены рез вот так это у нас должна с вами выглядеть и теперь нам осталось вот этот response вернуть место результата и чтобы вы не запутались переменных response и реза
09:52
давать рис на самом деле переименуем это можно сделать путем выделения этой перемены найти раздел ри фактор ирины им давайте назовем это ли элемент вот у нас сразу переименовывается во всех местах и
10:09
обновляем страничку давайте я отпущу . снова давайте вот еще раз обновляем и видим tq порядочный список нам автоматически создаст цифры и каждый элемент вот эти элементы списка ли у нас будут
10:25
находиться с новой строчки теперь что мы можем улучшить мы можем первую букву слова сделать заглавный для этого для строки мы вызываем метод тайтл обновляем и вот мы видим что каждое слово начинается
10:41
заглавной буквы и теперь самое главное это сделать каждый элемент этого списка ссылкой причем такой ссылкой чтобы он вел на необходимый элемент то есть по клику в тару с мы должны именно увидеть информацию о тельцы для этого нам нужно
10:58
обернуть вот этот текст в ссылку ссылка в html это т.а. здесь у нас открывается вот здесь у нас закрывается не забываем закрывающий стек поэтому мы должны еще слышь поставить вот самого по
11:14
себе указание этого тега нам ничего не даёт давайте обновим страничку вот видите ничего не происходит вот мы должны с вами указать атрибут расширив это обязательно здесь указывается именно на какой адрес мы должны перейти по
11:29
этому клику и вот на предыдущем уроке мы с вами так раз обрабатывали и знакомились функции reverse давайте скопируем ее сюда и смотрите мы будем опять же пользоваться именем гороскоп ный напоминаю ананас
11:45
зарезервировано вот за этим юре лам и в качестве аргумента мы туда передаем именно наш знак зодиака в нашем цикле этой переменной сайт вот это переменные давайте назовем ее redirect пав и
12:01
вот эту переменную мы так раз подставляем в наши расширив вот таким вот образом давайте обновим страничку и вот мы видим что каждый элемент стал ссылкам мы можем по нему кликнуть давайте крикнем лео и переходим ну знак зодиака лев вернемся
12:17
назад давайте в скорби кликнем вот скорпион вот водолей ну вот таким образом у нас получается с вами menim если вы хотите чтобы не отображались порядковые значки вы можете использовать так она ордер лист то есть
12:33
неупорядоченный список вот он отличается вот первой буквой ю место а вот обновляем страничку и вот вместо цифр уже будут вот такие значки и если пойти в просмотр кода обратите внимание вот здесь у нас уже
12:49
добавляется теги из html вот у нас неупорядоченный список вот у нас каждый тег и мы видим ссылка на элементы и сам запрос мы также видим в ответе наш html который
13:05
мы с вами сформировали но напоминаю более подробно о том как создавать html и где его хранить мы с вами поговорим в следующем нашем модуле этого курса но сейчас если у вас остались вопросы самое время оставить в комментариях вы можете задать вопрос
13:21
поэтому руку или по предыдущим также буду признателен за любую активность на канале или на курсе степи к так что не стесняйтесь коментируйте лайкать и но я с вами прощаюсь и увидимся в следующем уроке всем пока