Em picockpit.com, estou a utilizar pedidos AJAX para comunicar com o backend para operações de actualização. Por exemplo, o AJAX,

se você quiser mudar o nome desta Pi, você selecionaria:

que mostra uma forma em linha:

como mostrar esta forma inline com o vue.js está além do objetivo deste post (apesar de muito interessante!)

Clicando em Cancelar irá cancelar a renomeação, clicando em OK irá iniciar um pedido de AXIOS, que irá falar com o backend.

Aqui está o código JS:

commitEdit: função (evento) {
     let name = este.nome;
     let serial = isto.serial;
     let pointer = isto;
     this.renameSpinnerMode = true;
     axios.post('/mypis/' + serial + '/changename',
         {
             nome: nome
     })
     .then(função (resposta) {
         pointer.renomeMode = falso;
         pointer.renomeSpinnerMode = falso;
         pointer.backupName = pointer.name;
     })
     .catch(função (erro) {
         info("Desculpe, nome de " + '"") + pointer.backupNome + '"'". + " não podia ser alterado. " + erro );
         pointer.name = pointer.backupName;
         pointer.renomeMode = falso;
         pointer.renomeSpinnerMode = falso;
       });
}

Como você pode ver, estou usando a sintaxe padrão dos axiomas que é sugerida.

Além disso, estou passando em um ponteiro ("ponteiro") para "isto" (isto se refere ao componente Vue.js!), para que eu possa modificar o estado do componente nos callbacks do Axios.

No backend Kemal powered, eu tenho este código:

post "/mypis/:serial/changename" do |env|
     código de retorno = 400
     (…)
     newname = """.
     serial = """.

     if env.params.url.has_key?("serial")
         serial = env.params.url["serial"].not_nil! if !env.params.url["serial"].nil?
         json_raw = env.request.body.as(IO).gets_to_end
         data = Hash(String, String).from_json(json_raw)
         se data.has_key?("nome")
             newname = data["nome"].not_nil!
         final
     final

(…)

final

Como podem ver, estamos de facto a receber os dados codificados JSON!

Esse era o grande problema antes, eu estava tentando receber os dados codificados no formulário (env.params.body["nome"]) em Kemal, e não no JSON codificado!

Caso os dados estejam codificados pelo JSON, env.params.body estará vazio!

É muito mais fácil mudar a implementação backend para lidar com o JSON, do que tentar convencer o AXIOS a codificar os dados como um formulário.

Solução Axios "params

A propósito, muitas vezes na web você encontrará a sugestão de definir a chave dos params para Axios. Isso é ruim na minha opinião, pois na verdade codificará os dados como parte da URL.

Você teria que reescrever a URL para obter a seqüência de consulta e interpretar os dados em Kemal.

E: o URL está sujeito a uma limitação de comprimento.

Portanto, com pedidos POST, a rota de análise JSON é a mais sólida, IMHO.

Estamos para aluguer - consultoria, desenvolvimento, gestão de projectos ...

Taxa diária: 1500 euros líquidos. Se você está procurando um desenvolvedor flexível com foco no Raspberry Pi, nós podemos ser um bom ajuste para você.

Contacte-nos.