Мы уже видели использование HTTP get операций в предыдущих двух упражнениях,
, где мы сможем пойти и получить данные с
сервера и использовать его в нашем угловом приложении.
Но бывают ситуации, когда вы хотите иметь возможность публиковать новые данные на сервере
или изменять существующие данные на сервере
или даже удалять данные.
Так вот где пост,
положить, и удалить операции HTTP позволяют нам выполнить это.
В этом упражнении мы рассмотрим использование операции пут из клиента
HTTP, которая позволяет нам изменять существующее блюдо на стороне сервера.
Итак, зачем нам это делать?
Вы видели, что в одном из предыдущих упражнений
мы позволили пользователю опубликовать комментарий к блюду,
, а затем мы смогли вставить комментарий в объект Блюда.
Теперь мы хотим сохранить эту информацию блюдо на сервере,
измененное блюдо на сервере.
Это где использование HTTP PUT операции приходит на нашу помощь.
Таким образом, используя операцию HTTP PUT,
мы можем отправить измененное блюдо обратно на сервер, а затем изменить
существующую информацию Блюда на сервере, так что
вновь добавленный комментарий может быть сохранен на стороне сервера.
Таким образом, когда информация будет получена позднее,
вновь добавленный комментарий будет там как часть информации о блюде.
Итак, вот что мы рассмотрим в этом упражнении
, где мы рассмотрим сохранение изменений на сервере.
Итак, как нам это сделать?
Давайте рассмотрим это в упражнении.
Чтобы мы могли сохранить изменения в блюде на сервере,
позвольте мне ввести новый метод в сервисе Блюда здесь.
Теперь мы добавим новый метод под названием putDish на сервер.
Итак, как работает метод putDish?
Итак, позвольте мне представить здесь метод putDish, который, очевидно, получает модифицированное блюдо
в качестве своего параметра, а затем он вернет наблюдаемый тип Блюда.
Таким образом, это вернет блюдо, которое было помещено на стороне сервера.
Теперь, как только блюдо будет изменено на стороне сервера,
измененная информация Блюда будет отправлена обратно сервером,
, а затем это измененное блюдо будет доставлено
обратно клиенту, чтобы клиент мог интегрировать это,
, а затем обновить пользовательский интерфейс, чтобы отразить изменения в Блюдо.
Теперь, очевидно, мы не хотим отражать изменение на
пользовательского интерфейса до тех пор, пока информация о блюде не будет сохранена на стороне сервера.
Итак, вот где мы собираемся использовать
метод putDish, который мы вводим в сервис Dish.
Итак, как мы проектируем метод putDish?
Итак, первое, что нам нужно сделать, это настроить некоторые параметры HTTP, чтобы мы проинформировали
сервер о том, что
отправляется в сообщении здесь.
Итак, мы установим некоторые заголовки информации здесь.
Итак, для заголовков, мы создадим новые HttpHeaders здесь,
и в новом HttpHeaders,
давайте настроим заголовок как
Content-Type приложения типа JSON.
Итак, мы указываем на наш сервер, что входящее сообщение запроса
содержит информацию в виде
объект json в теле входящего сообщения запроса.
Таким образом, сервер сможет извлечь
информацию о блюде из тела сообщения, разобрать его,
, а затем сможет сохранить измененное блюдо на сервер,
, а затем отправить обратно обновленную информацию о блюде со стороны сервера.
Теперь, как только мы настроили параметры здесь,
то мы будем использовать
HTTP-клиент, а затем
сделать положить, который, очевидно, несет блюдо в теле сообщения,
, а затем мы будем указывать baseURL+блюда и +dish.id.
baseURL+'dishes/ '+ dish.id.
Итак, из ваших знаний REST API,
вы увидите, почему мы делаем операцию ввода в эту конечную точку.
Тогда второй параметр является сам блюдо, который мы
получаем как входящий параметр в метод putDish,
, а затем третий параметр является httpOptions, которые мы только что создали некоторое время назад.
Затем, как только мы получим это,
, то мы сможем передать
любую ошибку в наш метод handleError услышать, вот и все.
Таким образом, этот вызов put на стороне сервера позволит
информация о блюде быть постоянными на стороне сервера, а затем сервер
вернет обновленную информацию о блюде обратно нам,
, а затем мы вернем это обратно к нашему компоненту
, где компонент может затем использовать это для визуализировать обновленную информацию о блюде.
Итак, это модификация, которую мы делаем в сервисе Блюда.
Теперь перейдите в компонент dishdetail,
в компоненте dishdetail,
позвольте мне ввести еще одну переменную здесь
называется dishcopy, которая будет содержать
копию измененного блюда до тех пор, пока она не будет отправлена на сервер.
Таким образом, дискокопия будет содержать модифицированное блюдо.
Итак, заходить в параметры маршрута здесь.
Итак, что мы делаем, это в любое время, когда информация о блюде изменяется здесь в параметрах маршрута,
также наряду с сохранением информации о блюде в этом.dish,
Я также сохраню копию в
discopy также так, что как Блюдо и
discopy содержат точную копию того же Блюда здесь.
Итак, это модификация, которую мы сделаем здесь.
Теперь, в методе onSubmit,
поэтому здесь у нас есть метод onSubmit здесь,
где мы изменяем объект здесь.
Итак, здесь вы заметите, что мы изначально толкали комментарий к объекту Dish здесь,
вместо этого, мы теперь будем нажимать комментарий к объекту dishcopy.
Причина, по которой я делаю это, заключается в том, что я хочу сначала изменить объект dishcopy,
затем я хочу опубликовать это на сервере,
, а затем, когда сервер отвечает с
информацию об измененном блюде на стороне сервера,
, тогда я буду сохранять эту информацию в блюдо здесь.
Итак, после выполнения discopy здесь,
тогда мы скажем это.dishService.putDish,
, а затем мы поставим putDish
discopy в качестве параметра
, потому что discopy содержит измененную версию блюда здесь.
Итак, мы скажем dishcopy,
, а затем, когда мы получим ответ со стороны сервера так,
в подписке, мы скажем Блюдо и прямо там,
мы будем обрабатывать входящее блюдо здесь.
Итак, здесь, мы скажем, подписаться Блюдо, а затем мы скажем,
это.диш равен блюду здесь,
и ради полноты,
я также сохраняю ту же информацию в дископии здесь.
Теперь, если есть ошибка,
тогда придется handleError.
Итак, чтобы handleError, мы скажем,
errmess, а затем в этот момент мы установим, что this.dish равным null,
, а затем это discopy также равно null, потому что прямо сейчас блюдо не является действительным,
и тогда мы скажем это.errMess равно rater любой errmess, вот и все.
Это модификация, которую мы собираемся внести в метод onSubmit.
Таким образом, используя это.dishService.putDish метод,
мы отправляем в обновленном dishcopy здесь,
не блюдо здесь,
, а затем, когда сервер отвечает нам с измененным блюдом,
в этот момент, мы будем сохранять информацию в this.dish.
Так что в этот момент
наш пользовательский интерфейс будет обновлен с обновленной версией в Dish,
Я также сохраняю ту же информацию в dishcopy,
, а затем, если я столкнусь с ошибкой,
, то я установлю это.dish на null, а это.dishcopy на null
, а затем настрою сообщение об ошибке надлежащим образом здесь.
Так вот и все. Давайте сохраним изменения, а затем пойдем и
взглянем на наше приложение в браузере.
Сохраняя изменения, вернемся в браузер.
Зайдите в браузер, давайте теперь перейдем в меню, а затем перейдем к определенному блюду здесь.
Для конкретного Блюда
давайте оставим комментарий здесь.
Итак, позвольте мне опубликовать здесь комментарий с рейтингом здесь.
Итак, как вы видите, как комментарий становится действительным,
предварительный просмотр комментария отображается там.
Давайте теперь представим этот комментарий.
Когда вы отправляете комментарий,
вы сразу увидите, что комментарий только что был опубликован в моем списке Посуда.
Теперь, раньше, если вы обновите представление,
, то этот комментарий исчезнет.
Позвольте мне теперь обновить представление, и тогда вы заметите, что комментарий все равно
будет частью списка Посуда здесь.
Итак, как вы можете видеть здесь,
комментарий все еще существует здесь.
Чтобы еще раз показать вам, что комментарий действительно был сохранен на стороне сервера,
пойдем и посмотрим на журнал сервера в терминале.
Возвращаясь к терминалам,
мы увидим, что в журнале терминала
вы видите новый метод PUT /dishes/0.
Итак, это показывает, что измененное блюдо
было сохранено обратно на сервер прямо там и после этого,
, конечно, мы получили блюда, обновив
пользовательский интерфейс, и поэтому мы снова извлекаем информацию о блюдах со стороны сервера.
Таким образом, это показывает, что мы можем использовать
операцию HTTP PUT, чтобы сохранить измененное блюдо на сервере,
, а затем, когда мы получаем обновленное блюдо,
мы можем обновить пользовательский интерфейс соответственно.
С этим мы завершаем это упражнение.
Это хорошее время для вас, чтобы сделать GET commit с сообщением,
сохранение изменений на этом сервере.