Сегодня мы узнали о шаблоне под названием Усы. Я все еще борюсь с бэкэндом и с чего начать проект, но как только я его начну, я, кажется, просто покатился вперед.

Вот некоторые важные уроки сегодняшнего дня: req.params.String извлекает имя переменной из URL-адреса. Например, если URL-адрес www.somewebsite.com/add/3/2. Доступ к элементам после / можно получить с помощью следующего кода:

app.get('/:operator/:num1/:num2', function(res, req){
 let x = req.params.num1
 let y = req.params.num2
 let oper = req.params.operator

Из предыдущего примера x = 3, y = 2 и oper = add. Отсюда мы можем выполнить некоторую логику, чтобы определить, что делать, когда появится add, и принять два числа в качестве входных данных и вернуть 5 пользователю. Не слишком ужасно применимый в реальном мире, но он демонстрирует концепцию.

Еще одним важным уроком, полученным сегодня, стала возможность .require получать данные из внешнего источника. Сегодня в ежедневном проекте у нас был большой файл data.js, в котором был большой объект с массивом более мелких объектов. Вместо того, чтобы выполнять всю нашу работу в этом файле, мы создали новый и использовали

const data = require('./data.js')

для доступа к данным.

Другой урок заключался в том, как на самом деле использовать Усы. Mustache удобен тем, что выполняет цикл за вас без необходимости писать цикл for и вложен в HTML. В наших данных мы перебирали массив и извлекали биты информации, которые нам нужны.

<html>
  <body>
      {{#data}}
        <p>The name of the robot {{name}}</p>
        <p>The robot's email {{email}}</p>
      {{/data}}
  </body>
</html>

{{#data}} инициирует цикл, а {{/data}} завершает его. {{name}} и {{email}} — это ключи в объекте, который можно вызывать и который будет заполнять данные по завершении цикла по массиву. Это спасло меня от написания большого количества Javascript.

Последний важный урок, полученный сегодня, касался res.render(). Синтаксис сбивал меня с толку, потому что я не совсем понимал, что все делает. Я попытаюсь объяснить, как я это понимаю до сих пор. Имейте в виду, что здесь используется шаблон Mustache.

app.get('/', function (req, res) {
  res.render('index', {data: data.users})
});

«Индекс» точно указывает, на какую страницу мы рендерим. Первые данные — это тег, который будет использоваться в HTML для инициализации данных, которые мы используем, т. е. {{data}}. data.users — это место в объекте, с которого мы начинаем. Чтобы на самом деле вызвать значение ключа в HTML, все, что нужно, это {{key_name}}.

Если вы хотите просмотреть ежедневный проект, который мы делали, вот репозиторий.

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