Пишем web на Python3, работа над ошибками

newbie

Опубликован:  2019-02-18T09:32:29.328120Z
Отредактирован:  2019-02-22T07:49:29.010717Z

Продолжаем работу над проектом selfish. В предыдущем выпуске блога я создал базовый шаблон и допустил при этом небольшую оплошность в клиентском коде, которая в итоге выразилась в неверном отображении страницы в браузере. Этот обзор будет посвящен локализации и устранению ошибки. Кроме этого, поговорим об отладке JavaScript-сценариев и обработке ошибок в приложении на стороне сервера.

Вернёмся назад и посмотрим на два снимка экрана сделанные и размещенные в прошлом выпуске блога при тестировании базового шаблона.

8Q6PV6p7mm.png

ZnvISZB98p.png

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

Vm5RLdXS1X.png

Ошибка заключается в отсутствии базовых для навигационных элементов Bootstrap классов в теге <nav id="navigation">. Чтобы исправить её, достаточно в 19-ой строчке базового шаблона вписать в тег nav два класса.

3xwNGVm0gR.png

Запускаю отладочный сервер и фиксирую в браузере изменения на странице.

vggJxoyHnJ.png

Беру указателем мыши правый край окна браузера и тяну его вправо.

qdCLRTrs4z.png

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

Второй момент, на который мне хотелось бы обратить внимание - JavaScript-сценарий index.js.

KMAgwPWDfj.png

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

3K8CyYmjhK.png

Действие, которое я только что произвёл, называют рефакторингом. В результате этого действия я получил функцию showDateTime, которая возвращает требующуюся строку, и сделал вызов этой функции в двух местах кода. В перспективе я буду её использовать ещё много раз. Что даёт подобный подход? Если мне нужно будет каким-то образом изменить отображение даты и времени, мне достаточно будет сделать правку только в одном месте - в функции showDateTime.

В процессе разработки JavaScript-сценариев очень часто необходима отладка кода. Отладку кода позволяет осуществлять консоль браузера. У используемого мной браузера Chromium консоль находится в инструментах разработчика, доступ к которым можно получить сочетанием ctrl+shift+i или из меню браузера.

UJaO8k6Xrb.png

Консоль браузера вполне допускает интерактивную отладку.

TvRzMc7FcR.png

На снимке экрана выше следует обратить внимание на текст в желтом поле, в результате вбитого в консоль кода отображение этого текста соответствующим образом изменилось. Попробуем изменить отображение даты и времени.

rGHrnjyAge.png

Такой простой приём иногда даёт очень широкие возможности и существенно облегчает жизнь frontend-программисту.

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

tRo80IzQAc.png

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

Создаю новый файл.

touch selfish/main/errors.py

Открываю этот файл в редакторе и пишу в него следующий код.

WbhPj0VsER.png

Теперь обработчик ошибок следует импортировать в файле selfish/main/__init__.py.

0NXL2ejHbR.png

Осталось создать для обработчика ошибок шаблон.

touch selfish/templates/error.html

Шаблон обработчика ошибок будет наследовать от базового шаблона, открываю его в редакторе и пишу такой код.

Q6FwrCbb5c.png

Возвращаюсь в браузер и ввожу в строку адреса несуществующий url.

BSAL3GCqk6.png

Отлично. Теперь, если пользователь введёт в строку адреса несуществующий url адрес, обработчик ошибки 404 отобразит штатную страницу с главным меню приложения и возможностью проследовать по ссылкам в нём. Чуть позже, в процессе разработки приложения я добавлю в файл errors.py обработчики для других ошибок HTTP.

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

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