Пишем web на Python3, готовим каталог для статики

newbie

Опубликован:  2019-01-15T12:19:25.302137Z
Отредактирован:  2019-02-10T08:41:26.315562Z

Продолжаем работу над проектом selfish. В этом обзоре поговорим о стороннем коде, который будет использован в клиентской части проекта, я покажу, как скачать необходимые проекту библиотеки и где именно в проекте их разместить, в общем речь пойдёт о так называемом каталоге статических файлов.

В одной из предыдущих статей цикла было отмечено, что клиентская часть web-приложения, или frontend, предполагает некоторое множество повторяющихся практически в каждом проекте типовых прикладных задач, и для того чтобы не повторять каждый раз разработку кода для их решения, различными сообществами были разработаны специальные прикладные библиотеки. Использование этих библиотек позволяет значительно сократить время и трудоёмкость разработки конкретного проекта. Для клиентской части selfish будут использованы следующие фреймворки:

  • Bootstrap v3.4 - комплексный фреймворк общего назначения;
  • jQuery - JavaScript-фреймворк общего назначения;
  • Moment.js - JavaScript-библиотека для работы с датами и временем.

Клиентские библиотеки можно подключить в проект двумя способами. Первый способ предполагает использование CDN, в этом случае необходимые файлы подключаются в проект с помощью соответствующих ссылок. Второй способ предполагает, что все необходимые файлы будут предварительно скачаны и размещены в каталоге статических файлов приложения.

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

Все действия далее я буду выполнять в терминале, открываю терминал и обращаю внимание, что нахожусь в домашнем каталоге пользователя, о чём свидетельствует тильда в приглашении командной строки.

O6rg5BqFct.png

Начнём с Bootstrap. Скачиваю дистрибутив в домашний каталог пользователя.

wget https://github.com/twbs/bootstrap/releases/download/v3.4.0/bootstrap-3.4.0-dist.zip

tkkKEILdlY.png

Распаковываю архив.

unzip bootstrap-3.4.0-dist.zip

vxp4CByaMo.png

Удаляю ненужные файлы.

WGfdoMgcmt.png

Создаю новый каталог для сторонних библиотек в каталоге статических файлов selfish и перемещаю в него только что полученный каталог с дистрибутивом Bootstrap.

mkdir ~/workspace/selfish/selfish/static/vendor
mv -v bootstrap-3.4.0-dist/ ~/workspace/selfish/selfish/static/vendor/bootstrap-3.4.0

EyNJlnnniE.png

Скачиваю jQuery.

wget -P ~/workspace/selfish/selfish/static/vendor/ https://code.jquery.com/jquery-3.3.1.js

V4xA9QjjyL.png

Скачиваю map-файл для jQuery.

wget -P ~/workspace/selfish/selfish/static/vendor/ https://code.jquery.com/jquery-3.3.1.min.map

YnqFYznS77.png

Скачиваю Moment.js.

wget -P ~/workspace/selfish/selfish/static/vendor/ https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.js

fnoKNa542w.png

Для Moment.js потребуется русская локализация, скачиваю соответствующий файл.

wget -P ~/workspace/selfish/selfish/static/vendor/ https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/locale/ru.js

pcrz6JzRy8.png

Перехожу в каталог статических файлов selfish.

cd ~/workspace/selfish/selfish/static/

На текущий момент после всех выполненных действий каталог статических файлов имеет следующий вид.

CNXb1Vpj1z.png

Сторонние библиотеки для клиентской части selfish, если всё оставить как есть, неизбежно попадут в git-репозиторий, но этого лучше избежать, поэтому открываю файл .gitignore проекта и вписываю в него ещё одну строчку.

6PiT02ij1v.png

Проблема заключается в том, что при развёртывании проекта на сервере, мне придётся вновь получить в проект все только что скачанные файлы и каталоги. Чтобы этого не делать, упаковываю каталог vendor в zip-файл в каталог deployment проекта.

zip -r ~/workspace/selfish/deployment/static-vendor.zip vendor/

cEsTAsSmPb.png

Чтобы не потерять файлы в процессе деплоймента создаю в каталоге deployment файл README.md и пишу в него такой текст.

osiPRBpbp6.png

Возвращаюсь в базовый каталог проекта.

cd ~/workspace/selfish

Добавляю все текущие изменения в каталоге в git и проверяю статус репозитория.

git add .
git status

hcC5207pVF.png

Таким образом я убедился, что текстовые файлы сторонних библиотек из каталога статических файлов проекта не попадут в git с ближайшим коммитом.

Как правило, код клиентской части web-приложения базируется на разработанном дизайнером макете сайта. Поскольку у меня нет дизайнера, а сам я никогда не стремился стать дизайнером, и в силу полного отсутствия художественного вкуса и чувства прекрасного, никогда дизайнером не стану, дальнейшая разработка selfish будет производиться без макета, а внешний вид страниц будет полностью повторять внешний вид сайта auriz.ru. Чтобы реализовать задуманное, мне нужно получить в каталог статических файлов selfish три изображения, скачиваю их с сайта auriz.ru. Первый - логотип главного меню сайта.

wget -P selfish/static/images/ http://auriz.ru/static/images/logo.png

HigMxLW8Ik.png

Затем левый указатель.

wget -P selfish/static/images/ http://auriz.ru/static/images/footer-left.png

mdwXtoUzdD.png

И, наконец, правый указатель.

wget -P selfish/static/images/ http://auriz.ru/static/images/footer-right.png

hgT7udKIoQ.png

Чтобы окончательно укомплектовать каталог статических файлов, создаю в нём каталог для файлов стилей и каталог для файлов JavaScript-сценариев.

mkdir selfish/static/css
mkdir selfish/static/js

В итоге каталог статических файлов selfish имеет следующий вид.

8i17r42fha.png

И он полностью готов к дальнейшей разработке клиентского кода, можно обновить изменения базового каталога проекта в git и сделать коммит, а цель этой демонстрации полностью достигнута.

Текущее состояние проекта можно увидеть на gitlab.com. Разработка selfish будет продолжена, а в ближайшем выпуске блога я покажу создание первой страницы selfish с использованием полученных только что сторонних библиотек. Как всегда, вопросы и предложения приветствуются, их можно оставить в комментариях ниже или адресовать мне приватным сообщением. Оставайтесь с нами, будет интересно. Продолжение следует...

Комментарии: