ИТ Блог. Администрирование серверов на основе Linux (Ubuntu, Debian, CentOS, openSUSE)
Веб-разработчики носят много масок. Даже если они работают только как «Back End», написав код, который будет запускаться на веб-сервере, они должны иметь возможность:
В этом посте мы поговорим об этих основных навыках и технологиях, которые вам нужно будет узнать, если вы хотите стать веб-разработчиком. Мы продемонстрируем каждое из этих навыков, создав (очень) простое веб-приложение по мере нашего продвижения.
Вот код для простого веб-приложения.
from flask import Flask
app = Flask(__name__)
@app.route('/')
def main_page():
return 'Добро пожаловать в мой блог!'
app.run()
Приложение просто ждет, чтобы браузеры подключились к нему, и отвечает текстом «Добро пожаловать в мой блог!».
Мы решили написать это приложение на языке Python, используя библиотеку под названием Flask, это простое приложение, подобное этому, может быть написано с использованием практически любого серверного языка программирования: Java, JavaScript, C #, PHP или многих других.
Когда браузер отправляет запрос на веб-сервер, сервер должен получить ответ. Часто данные необходимо загружать из базы данных и вставлять в ответ. Этот процесс управляется программами, запущенными на веб-сервере, и для написания этих программ вам нужно знать язык программирования.
Говоря о загрузке данных из баз данных: поскольку это блог, нам нужно место для хранения статей, которые мы будем писать для него. Вы можете думать о базе данных, как о коллекции электронных таблиц. Таблица базы данных похожа на отдельную электронную таблицу с данными, хранящимися в строках и столбцах.
Для этого приложения я создал базу данных с одной таблицей с именем «articles». В таблице есть два столбца. Один столбец называется «title» и будет содержать заголовок каждой статьи для блога. Другой столбец называется «content» и будет содержать содержимое статей.
Мы создали две строки, представляющие две статьи в блогах.
Затем нам нужно обновить веб-приложение, чтобы загрузить статьи из базы данных и отобразить их в веб-браузере пользователя. Нам нужно будет использовать отдельный язык, предназначенный для связи с базами данных, называемыми Structured Query Language, или SQL для краткости.
from flask import Flask
import sqlite3 as sql
app = Flask(__name__)
def articles():
query = "SELECT * FROM articles"
connection = sql.connect("test.db")
connection.row_factory = sql.Row
result = connection.cursor().execute(query)
records = result.fetchall()
connection.close()
return records
@app.route('/')
def main_page():
content = ""
for record in articles():
content += ("<p>%s: %s</p>" % (record["title"], record["content"]))
return content
app.run()
В приведенном выше коде SELECT * FROM articles написано на SQL. На простом английском языке это означает «получить все столбцы всех строк в таблице «articles».
Мы также обновили код для форматирования результатов из базы данных и включили их в ответ на веб-браузер. Если мы перезагрузим страницу, приложение представит нам данные из столбцов «title» и «content» для каждой строки.
Существует множество программ баз данных: «MySQL», «PostgreSQL» и «SQL Server», здесь перечислили наиболее популярные. Но все они работают очень точно, сохраняя данные в строках и столбцах внутри таблиц. Как вы можете догадаться по их именам, если вы знаете SQL, вы сможете общаться с любым из них.
У нас есть статьи, отображаемые в браузере, но они выглядят не очень хорошо. Чтобы улучшить это, мы собираемся создать шаблон для вставки данных с использованием HyperText Markup Language или HTML для краткости. Заголовок каждой статьи будет помечен как заголовок, а содержимое каждой статьи будет помечено как абзац, так что браузер отобразит их с соответствующим форматированием.
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
</head>
<body>
{% for article in articles %}
<h1>{{article["title"]}}</h1>
<p>{{article["content"]}}</p>
{% endfor %}
</body>
</html>
Нам также нужно будет обновить код приложения, чтобы использовать шаблон HTML при создании ответа:
@app.route('/')
def main_page():
return render_template("main.html", articles = articles())
Теперь страница выглядит так: заголовки статей как заголовки и контент как обычные абзацы. Страница по-прежнему выглядит очень простой, но это хорошее начало.
На каждом веб-сайте используется хотя бы некоторый HTML-код, потому что это то, что ожидают веб-браузеры. Разработчикам back end часто не нужно писать весь HTML-код сайта; они полагаются на сторонних разработчиков, чтобы сделать это, но они все равно должны понимать HTML достаточно хорошо, чтобы иметь возможность вставлять данные на HTML-страницу.
Однако веб-браузеры – это не единственные программы для общения с веб-приложением. Часто компания предложит мобильное приложение для iOS или Android вместе со своим основным веб-сайтом. Существуют также браузерные приложения, которые используют, в основном, JavaScript, а не HTML на стороне сервера (через такие системы, как React, Vue или Angular). Для извлечения данных для отображения этим приложениям потребуется интерфейс прикладного программиста или API для подключения.
HTML может быть полезен для форматирования контента в веб-браузерах, но есть гораздо лучшие форматы для данных, которые будут использоваться другими программами. Двумя наиболее популярными форматами для данных API являются JSON, что означает JavaScript Object Notation и XML, что означает eXtensible Markup Language.
Вот один из способов представить наши статьи в блоге JSON:
[{"title":"Первый пост...", "content":"Из моего нового приложения блога!"},
{"title":"У нас есть щенок!", "content":"Ее зовут Тузик."}]
И вот как они могут выглядеть в XML:
<article>
<title>Новый пост...</title>
<content>Из моего нового приложения блога!</content>
</article>
<article>
<title>У нас есть щенок!</title>
<content>Ее зовут Тузик.</content>
</article>
Мы собираемся обновить наше приложение, чтобы добавить простой API, который извлекает все статьи из базы данных и форматирует их как JSON.
@app.route('/articles.json')
def articles_json():
return json.dumps([dict(row) for row in articles()])
Теперь, когда веб-браузер добавит «/articles.json» в конец адреса сайта, он подключится к нашему API и получит список статей в формате JSON.
Хотя многие API-интерфейсы могут быть доступны через браузер, основное преимущество создания одного – это подключение к другим приложениям. Поскольку многие пользователи ожидают, что платформы будут иметь доступное приложение для iOS или Android, научиться использовать API (и создать свой собственный) – это важный навык для веб-разработчика бэкэнда.
Даже во время этой короткой статьи мы внесли много изменений в наше приложение. Что произойдет, если позже мы обнаружим, что одно из этих изменений вывело ошибку, и нам нужно увидеть, как выглядел код, прежде чем мы его изменили? Что делать, если мы удалим код и его нужно восстановить?
Если вы сохраните свой код в системе контроля версий, такой как Git, вы сможете получить предыдущие версии. Git – это инструмент командной строки, которым вы управляете с помощью типизированных команд в консоли или терминале вашей системы.
Во-первых, нам нужно создать репозиторий Git в нашей папке проекта. Репозиторий – это место, в котором Git хранит все предыдущие версии ваших файлов.
$ git init Initialized empty Git repository in /Users/jay/blog/.git/
Затем мы используем команду,git add, чтобы отметить файлы, которые мы хотим сохранить в Git. Мы сохраним наш код веб-приложения и папку templates, в которой содержится наш шаблон HTML.
$ git add blog.py templates
Мы запускаем команду git commit для фактического хранения файлов. Мы также предоставляем сообщение о том, какие изменения мы внесли в код.
$ git commit -m "Создать главную страницу блога" [master (root-commit) f097b47] Создать главную страницу блога 2 files changed, 38 insertions(+) create mode 100644 blog.py create mode 100644 templates/main.html
Затем эта версия файлов хранится в Git.
Но репозиторий доступен только на нашем компьютере. Что делать, если мы хотим поделиться кодом с другими людьми? Не волнуйтесь, с сервисом, подобным GitHub, это легко!
Мы создали репозиторий на GitHub для кода, который мы показали вам сегодня. Тогда мы просто скопировали и вложили пару команд, которые они дали нам в наш терминал, и код был загружен из репозитория моего компьютера в репозиторий GitHub. Теперь код доступен для всех, кто просматривает эту ссылку!
Git не только поможет вам восстановить потерянную работу. Он также может помочь вам написать код вместе с командой. Если вы делитесь своим кодом с сервисом GitHub, другие могут предлагать изменения, а Git поможет вам интегрировать эти изменения в ваш код. Обучение использованию Git абсолютно необходимо для веб-разработчиков.
Поздравляем вас с шагом вперед в вашем учебном путешествии. Мы надеемся, что вы продолжите совершенствовать свои навыки!
Тэги: , программирование, создание сайтов, язык программирования Категории: Разработка сайтов, Статьи
