Já vimos o uso das operações HTTP get nos dois exercícios anteriores,
onde podemos ir e buscar os dados de
o servidor e usá-lo dentro da nossa aplicação Angular.
Mas há situações em que você quer ser capaz de postar novos dados para o servidor,
ou modificar os dados existentes no servidor,
ou até mesmo excluir os dados.
Então é aí que as operações de post,
colocar e excluir de HTTP nos permitem realizar isso.
Neste exercício, vamos olhar para o uso da operação put do cliente
HTTP que nos permite modificar um prato existente no lado do servidor.
Agora, por que precisaríamos fazer isso?
Você viu que em um dos exercícios anteriores,
nós permitimos que o usuário postasse um comentário em um prato,
e então fomos capazes de inserir o comentário no objeto Dish.
Agora, queremos manter esta informação do prato no servidor,
o prato modificado para o servidor.
Aqui é onde o uso da operação HTTP PUT vem para o nosso resgate.
Então, usando a operação HTTP PUT,
nós somos capazes de enviar o prato modificado de volta para o servidor e, em seguida, modificar
as informações existentes Dish no servidor para que
o comentário recém-adicionado pode ser persistido no lado do servidor.
Assim, quando a informação for obtida em uma data posterior,
o comentário recém-adicionado estará lá como parte da informação do Dish.
Então, isso é o que vamos explorar neste exercício,
onde vamos olhar para salvar as alterações no servidor.
Então, como vamos fazer isso?
Vamos explorar isso no exercício.
Para nos permitir salvar as alterações no Dish para o servidor,
deixe-me introduzir um novo método no serviço Dish aqui.
Agora, vamos adicionar um novo método chamado como PutDish para o servidor.
Então, como funciona o método PutDish?
Então, deixe-me introduzir o método PutDish aqui que obviamente recebe o prato modificado
como seu parâmetro e, em seguida, ele vai retornar um observável do tipo Dish.
Então, isso retornará o prato que foi colocado no lado do servidor.
Agora, uma vez que o Dish é modificado no lado do servidor,
a informação modificada Dish será enviada de volta pelo servidor,
e então este Dish modificado será entregue
de volta ao cliente para que o cliente possa integrar isso,
e, em seguida, atualizar a interface do usuário para refletir a mudança para o Prato.
Agora, obviamente, não queremos refletir a alteração para
a interface do usuário até que as informações do Dish sejam salvas no lado do servidor.
Então, é aí que vamos fazer uso de
o método PutDish que introduzimos no serviço Dish.
Então, como projetamos o método PutDish?
Então, a primeira coisa que precisamos fazer é configurar algumas opções HTTP para que informemos
o servidor sobre o que
está sendo enviado na mensagem aqui.
Então, vamos configurar algumas informações de cabeçalhos aqui.
Então, para os cabeçalhos, vamos configurar novos HttpHeaders aqui,
e no novo HttpHeaders,
vamos configurar o cabeçalho como
Content-Type da aplicação tipo JSON.
Então, estamos especificando para o nosso servidor que a mensagem de solicitação de entrada
contém as informações na forma de
um objeto json no corpo da mensagem de solicitação de entrada.
Assim, o servidor será capaz de extrair
a informação Dish do corpo da mensagem, analisá-lo,
e, em seguida, ser capaz de persistir o prato modificado para o servidor,
e, em seguida, enviar de volta as informações atualizadas Dish do lado do servidor.
Agora, uma vez que tenhamos configurado as opções aqui,
então vamos usar
o cliente HTTP e, em seguida,
fazer um put que, obviamente, carrega o prato no corpo da mensagem,
e então vamos especificar BaseURL+pratos e +dish.id.
Então, essa é a URL para a qual estamos enviando a operação put assim,
BaseUrl+'Discos/ '+ dish.id.
Então, a partir do seu conhecimento da API REST,
você verá por que fazemos uma operação put para este ponto final.
Em seguida, o segundo parâmetro é o próprio Dish que
receber como o parâmetro de entrada para o método PutDish,
e, em seguida, o terceiro parâmetro é o HTTPOptions que acabamos de configurar há pouco tempo.
Então, uma vez que obtemos isso,
então vamos ser capazes de canalizar
o qualquer erro para o nosso método handleError ouvir, é isso.
Então, esta chamada para o colocar no lado do servidor permitirá
a informação Dish para ser persistente no lado do servidor e, em seguida, o servidor
irá retornar a informação do prato atualizado de volta para nós,
e então vamos retornar isso de volta para o nosso componente
onde o componente pode então usar isso para renderizam as informações atualizadas do Dish.
Então, esta é a modificação que fazemos para o serviço Dish.
Agora, vá para o componente dishdetail,
no componente dishdetail,
deixe-me introduzir mais uma variável aqui
chamada dishcopy que irá armazenar
uma cópia do prato modificado até que ele seja postado no servidor.
Então, a cópia conterá o prato modificado.
Então, indo para os parâmetros de rota aqui.
Então, o que fazemos é sempre que a informação do prato é modificada aqui nos parâmetros da rota,
também junto com salvar a informação do prato para isso.dish,
Eu também vou salvar uma cópia para
a dishcopy também para que tanto o prato e
a dishcopy contenham a cópia exata do mesmo prato aqui.
Então, essa é a modificação que faremos aqui.
Agora, no método onSubmit,
então aqui temos o método onSubmit aqui,
onde estamos modificando o objeto aqui.
Então, aqui, você percebe que estávamos originalmente empurrando o comentário para o objeto Dish aqui,
em vez disso, vamos agora empurrar o comentário para o objeto dishcopy.
A razão pela qual eu estou fazendo isso é que eu quero primeiro modificar o objeto dishcopy,
então eu quero postar isso no servidor,
e então quando o servidor responder de volta com
a informação do prato modificada para o lado do servidor,
então eu vou persistir essa informação no prato aqui.
Então, depois de fazer o dishcopy aqui,
então vamos dizer this.dishservice.putdish,
e então vamos fornecer ao putdish
a dishcopy como o parâmetro
porque a dishcopy contém a versão modificada do prato aqui.
Então, vamos dizer dishcopy,
e, em seguida, quando recebermos a resposta do lado do servidor assim,
no subscrito, vamos dizer Dish e aí mesmo,
vamos lidar com o prato de entrada aqui.
Então, aqui, vamos dizer subscrever Dish e, em seguida, vamos dizer,
this.dish igual ao prato aqui,
e por uma questão de completude,
Eu também vou persistir a mesma informação na dishcopy aqui.
Agora, se houver um erro,
então terá que handleError.
Então, para handleError, diremos,
errmess, e então nesse ponto,
vamos definir que this.dish para null,
e, em seguida, este dishcopy também para null porque agora o prato não é válido,
e então vamos dizer this.errmess é
qualquer errmess, é isso.
Essa é a modificação que faremos no método onSubmit.
Então, usando o método this.dishservice.putdish,
estamos enviando o dishcopy atualizado aqui,
não o prato aqui,
e então quando o servidor responder de volta para nós com o prato modificado,
nesse ponto, vamos persistir a informação no this.dish.
Para que nesse ponto,
nossa interface será atualizada com a versão atualizada para Dish,
Eu também estou persistindo a mesma informação para o dishcopy,
e, em seguida, se eu encontrar um erro,
então eu vou definir o this.dish para null e o this.dishcopy para null
e, em seguida, configurar a mensagem de erro apropriadamente aqui.
Então é isso. Vamos salvar as alterações e, em seguida, ir e
dar uma olhada em nosso aplicativo no navegador.
Salvando as alterações, vamos voltar ao navegador.
Vá para o navegador, vamos agora para o menu e, em seguida, ir para um prato específico aqui.
Para o prato específico,
vamos postar um comentário aqui.
Então, deixe-me postar um comentário aqui com uma classificação aqui.
Então, como você vê, à medida que o comentário se torna válido,
a visualização do comentário aparece lá em cima.
Vamos agora enviar este comentário.
Quando você enviar o comentário,
você verá imediatamente que o comentário acabou de ser postado em minha lista de pratos.
Agora, mais cedo, se você atualizar a exibição,
então este comentário desapareceria.
Deixe-me agora atualizar a vista e, em seguida, você vai notar que o comentário ainda vai
fazer parte da lista de pratos aqui.
Então, como você pode ver aqui,
o comentário ainda existe aqui.
Para mostrar ainda mais que o comentário foi persistido no lado do servidor,
vamos ver o log do servidor no terminal.
Voltando para os terminais,
agora veremos que no log do terminal,
você vê um novo método PUT /dishes/0.
Então, isso mostra que o Dish modificado
foi persistido de volta para o servidor ali mesmo e o depois disso,
é claro que temos os pratos refrescando
a interface do usuário e é por isso que estamos
buscar as informações dos pratos novamente do lado do servidor.
Então, isso mostra que somos capazes de usar
a operação HTTP PUT para persistir o prato modificado para o servidor,
e, em seguida, quando recebemos o prato atualizado,
somos capazes de atualizar a interface do usuário correspondentemente.
Com isso, completamos este exercício.
Este é um bom momento para você fazer um commit GET com a mensagem,
salvando as alterações neste servidor.