prefácio
Revisão da seção anterior
A seção anterior explicou os preparativos antes da entrada das informações do livro, principalmente usando o formulário el do ElementUI para fazer o layout básico da interface de entrada, incluindo el-input el-select el-date-picker e upload de imagem e outros componentes. Ao mesmo tempo, após a conclusão do layout, use as regras que acompanham o el-form para verificar os dados antes do envio. Alunos que não entendem o contexto podem dar uma olhada: Use Vue + el-form + regras para realizar a função de entrada de informações do livro
Esta seção apresenta
Esta seção já é o 13º blog prático desta coluna. Com base na seção anterior, os dados enviados foram verificados. É hora de começar a reunir os dados e, em seguida, usar axios para enviá- los. Uma vez que a submissão for bem-sucedida, grande parte das funções do projeto serão concluídas, e o próximo passo é o módulo de lista de livros.
Índice
2. Montagem dos dados JSON do projeto Vue
2. Os pontos de função solicitados pelos axios
2. Mantenha e insira o URL do livro
3. Adicione um método de solicitação para inserir informações do livro
3. Envio de solicitações em componentes de negócios
1. Apresente o método de solicitação
3. Processamento dos dados retornados pela interface
4. SetTimeout deve ser limpo manualmente
1. Montagem de dados
Já os dados enviados pela interface geral, o front end e o front end irão coordenar o uso do formato JSON, ou seja, o valor do atributo Content-Type no cabeçalho da requisição da interface é application/json.
1. Conjunto de dados padrão
Antes de usar o projeto Vue, quando enviamos os dados, precisamos montar os dados do parâmetro de entrada, ou quando estamos acostumados a usar o formulário de formulário anteriormente, o valor do nome do elemento no formulário são os dados a serem enviados. Em seguida, o assembly de dados JSON normal deve ficar assim neste caso
let params = {
bookName: this.form.bookName,
bookNo: this.form.bookNo,
bookType: this.form.bookType,
author: this.form.author,
publisher: this.form.publisher,
publishDate: this.form.publishDate,
description: this.form.description,
coverImage: this.form.coverImage,
}2. Montagem dos dados JSON do projeto Vue
Mas no projeto Vue, além da correspondência um-para-um entre a dependência de dados e a parte DOM, você descobrirá que o formulário na dependência de dados é apenas a pré-montagem da matriz enviada, para que você possa diretamente fazem isto:
let params = this.form;Desta forma, os dados JSON obtidos por params passam a ser os dados do formulário. Não é suficiente. Neste caso, os dados do formulário correspondem apenas aos dados enviados pela interface, o que pode ser feito facilmente desta forma. Mas no trabalho real, com certeza haverá projetos do tipo mariposa, que precisam usar o método de montagem anterior. Portanto, o primeiro método de coleta de dados também deve estar disponível.
2. Os pontos de função solicitados pelos axios
Os dados foram montados, e o próximo passo é enviar a requisição axios, então quais são os preparativos necessários neste projeto, vamos dar uma olhada
1. Crie um novo arquivo API
Um novo módulo chegou, então o método de instância de envio da requisição precisa criar um novo arquivo, o novo arquivo src\api\bookManager.js
2. Mantenha e insira o URL do livro
No arquivo src\config\httpUrl.js , adicione a url da interface para entrada de livros, essa url é definida pela equipe do servidor e fornecida a nós, conforme mostra a figura
3. Adicione um método de solicitação para inserir informações do livro
No arquivo src\api\bookManager.js recém-criado, adicione o método de solicitação e o módulo subsequente de todo o gerenciamento do livro, o método de solicitação estará neste arquivo. O método de interface para upload de fotos antes é colocado em um arquivo separado porque pode ser possível no projeto Existem muitos requisitos que precisam usar upload de imagem, então upload de imagem é contado como um método público, portanto não é adicionado a este arquivo, o código é o seguinte
import request from '../utils/httpRequire.js';
import { URLS } from '../config/httpUrl.js';
// 录入图书信息
export function enterBook(data) {
return request({
url: URLS.createBook,
method: 'post',
data,
});
}3. Envio de solicitações em componentes de negócios
Os dados dos parâmetros de entrada estão prontos, e as peças solicitadas pelos axios estão prontas. Em seguida, é hora de retornar ao componente de negócios e realmente acionar e enviar a solicitação de entrada de informações do livro.
1. Apresente o método de solicitação
Introduza o método de instância axios no arquivo src\views\bookManager\Create.vue
import { enterBook } from '@/api/bookManager.js';2. Enviar solicitação
A seção anterior disse que o botão enviar chama o método handleSubmit. Depois que os dados de verificação são passados, para evitar que o botão seja clicado repetidamente, esse método adiciona o limite de alternância de isLoading . A configuração padrão é false. Quando os dados são enviados , é alterado para true, então o botão submit passa a ficar no estado de carregamento de envio. código mostra como abaixo:
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
console.log('已验证通过');
this.isLoading = true;
let params = this.form;
enterBook(params).then((res) => {
console.log(res);
if (res.code != 200) {
this.isLoading = false;
this.$message.error(res.message);
return;
}
this.isLoading = false;
this.$message({
message: '提交成功',
type: 'success'
});
let enterTimeout = setTimeout(() => {
window.clearTimeout(enterTimeout);
enterTimeout = null;
this.$router.push('/book-manager');
}, 1500)
})
}
})
},3. Processamento dos dados retornados pela interface
Deve haver situações normais e anormais no retorno da interface, portanto, quando a interface estiver anormal, ou seja, quando o valor do código retornado não for 200, solicitaremos ao usuário informações de msg e alteraremos a variável da chave isLoading para false, então que o usuário pode concluir o processamento Você pode continuar a enviar após a situação anormal e adicionar o código de retorno ao mesmo tempo para impedir que o código continue a ser executado
Se a interface retornar ao estado normal, o prompt "Envio bem-sucedido" aparecerá normalmente e, depois que o usuário vir o prompt pop-up, ele pulará para a página da lista de livros com um atraso de 1.500 milissegundos.
4. SetTimeout deve ser limpo manualmente
Muitas pessoas pensam que se setTimeout não se referir internamente a variáveis compostas externas, ou se não for usado para cálculos recursivos, não precisa ser limpo manualmente e o navegador o liberará automaticamente. No entanto, o irmão Gou sugere que, sempre que setTimeout for usado, não importa o quão simples as coisas sejam feitas internamente, ele deve ser limpo manualmente . E o código não é complicado, é fácil. Porque na manutenção de acompanhamento do código, ninguém sabe quem fará o quê no código e ninguém pode dizer o que acontecerá com a tecnologia futura, assim como ninguém disse setInterval antes, isso, aquilo, de repente um dia , os entrevistadores começaram a perguntar qual é o problema do setInterval, assim como acordar um dia, o servidor da empresa começou a atualizar o log4j, e muitas pessoas gostam de usar componentes de terceiros, então instale, muitas pessoas instalarão se quiserem preste atenção Sim, caso o usuário esteja usando um dia, aparece uma mensagem maravilhosa de repente, haha, está longe.
afinal
Esta coluna é uma série prática de projetos de separação de front-end e back-end criados em conjunto por mim e pelo servidor Tiange ( página inicial do Tiange ).O servidor de Tiange é: prática de projeto de separação de front-end SpringBoot+Vue . O irmão Tian já lançou muitas interfaces. Quero escrever um livro recentemente e estou trabalhando duro dia e noite, então o progresso está muito atrasado. Vou trabalhar mais e muitos amigos que compraram a coluna também a receberão Boa sorte com o código-fonte mais recente.
Por fim, preparei uma sessão de votação para todos, espero que gostem