5. Создание сайта на Node.js, Express, MongoDB | Создание Layout и хостинг статики

Автор Nikita Stoianov
5. Создание сайта на Node.js, Express, MongoDB | Создание Layout и хостинг статики

Итак всем привет.

Я снова с вами продолжим делать наш проект план такой в этом видео я покажу. Ну беремся лишние подготовим проект для дальнейшей разработки. А в последующих двух и будем верстать шаблон я вначале хотел bootstrap прикрутить, но потом думаю лучше показать как настроить gulp sass и так далее и так прошлых видео были созданы вот такие вот шаблоны.

Ну как можно увидеть в них повторяется верхняя часть и нижняя часть.

То есть можно создать. А я вот так называемой где вот эти части будут подключаться во все остальные чтобы лишний код не писать потому, что — это в последствии возрастёт соседа добавиться всякие мета-теги стиле и так далее внизу также потом. Кедр добавим Footer добавь, но — это header Footer sidebar везде будет повторяться лишний код чтобы не писать создают layabout так создаю layabout папка мне создам два файла Fortress ответственный. Фёдор Ихтиандр. Так теперь открываем. Яндекс и соответственно та, что пойдет хедер шапку уходит в хедер то, что пойдёт футар уйдёт Footer теперь их нужно подключить в наш Index file я так. Скопируй чтобы. Время не тратить вот Input layout header и теперь низ только уже ну и соответственно его 2 наш файл клеит то же самое делаем вместо хейтер место хутор такс теперь запускаем открываем браузер мопс заминка небольшая localhost 3000 вот как можем увидеть то, что было в теперь она также подключается также эти две страницы если посмотреть. Исходный код то видно вот наш подключенный около я вот хейтер, а вот Footer такс если заметили. Я новую тему сам создал потому, что я все темы пересмотрел какие-то все унылые или яркие чересчур. Бриллиантовая решил сделать ссылку я на неё в описании. Если хотите поставьте так дальше по плану идём. Теперь нужно создать папку Public. Для чего нужна папка Public ней будут храниться все наши стили и скрипты которые подключим для страницы и сразу для для создать нужно подпапки то есть интерес. Я не знаю почему так сложилась традиция, но в мире node.js пишется полностью вас одной рукой писать неудобно. Вот джаваскрипт и ещё Style sheets крестили Style sheets вот соответственно — это пока всё закроем Style sheets создать создадим стиле Java scripts создадим пока 1script. Ну потому, что агит пустые папки не индексируют просто чтобы что-то было на тот момент оставим чтобы потом посмотреть подключился или не подключился файл и так если вы раньше программировали на каком не успеешь познакомиться по чьим-то знаете, что Apache ему так пути к папке укажешь и он потом автоматически под файлы и отдаёт клиенту вгс — это не так мы же с вы сами пишете сервер. Поэтому нужно указать экспрессу чтобы он хрустел отдавал всё содержимое из неё для этого нужно подключить моторчик Pass. Ягуар f-pace и теперь. Скопируй чтобы. Время не тратить дата строчку за, что значит апью с — это наше приложение экспресс ему чтобы экспресс статику отдавал из папки Public DIR name — это значит путь этому файлу то есть будет кодировать файл на хостинге находится Join его пусть возьмёт и вот название этой папке. Павлик и соответственно все скрипты будут доступны вот так вот так далее. Ну сейчас я покажу короче и так теперь. Заходим в наших Fly Out скрипты подключаются futari как правило. Это для того чтобы пока не загрузятся пользователь мог видеть содержимое страница в браузере успела трындеть теперь пишем нашу папку — это будет паблик папка теперь Java Script с и скрип. вот теперь заходим хедеры подключаем стиль вот этот вот linksys. Я теперь. Стайлз и перед ним стоял. Швец вот можно и так теперь теперь теперь, что у нас. Заходим в наш код страницы и смотрим подключилась или не подключилась обновить её нужно перед этим от нашей стиле и нашей скрипты вот наш скрип где. Хэллоуин комментарий. А вот нашей скрипт скрипты ничего пока не написали, но сейчас — это исправим например цвет Body background Color и какой-нибудь вот такой. Аквамарин сохраняем обновляем и вот всё стиль я тебя подключились. Так, что у нас дальше, а теперь сразу добавим мы пишем. Как вы помните самый примитивный проект поэтому у нас джейквери джейквери сейчас можно просто официального сайта скачать закинуть какую-нибудь папку Java Script на лучше её поставить через пакетный менеджер. Яр Джерри. Твери ИНН — это и устанавливаем джейквери такс вот наш папка. Джейсон от нашей двери. Теперь нужно экспресс, а также как в случае с папкой паблик указать чтобы он отдавал file jquery. Закрой всё What modules теперь. Где наши джейквери по алфавиту ABCD и i.g. где-то тут должно быть. Вот джейквери у неё есть папка dist и мне есть вот этот джейквери меня как раз он должен подключаться короче чтобы. Время не тратить. Я на готовый код сейчас скопирую вставлю указываем теперь появился первый параметр здесь его не было параметры — это значит по умолчанию будет ато корня идти сайта, а здесь уже появился первый параметр — это папку Java Script и также Express Static path Join и Where name node module jquery' десну как я тут показывал и там подключим этот файл джейквери теперь теперь. Теперь теперь заходим хутор копируем эту хренотень Shift Alt и стрелочку вниз и теперь пишем j4.. Ну потом — это конечно всё будем в 11 лет же мать, но пока так просто подключил чтобы представление имели и теперь запускаем наш наш наш.

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

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