avant-propos
Examen de la section précédente
La section précédente expliquait les préparatifs avant la saisie des informations sur le livre, en utilisant principalement la forme el d' ElementUI pour créer la disposition de base de l'interface de saisie, y compris el-input el-select el-date-picker et le téléchargement d'images et d'autres composants. Dans le même temps, une fois la mise en page terminée, utilisez les règles fournies avec el-form pour vérifier les données avant de les soumettre. Les étudiants qui ne comprennent pas le contexte peuvent jeter un coup d'œil : Utilisez Vue + el-form + rules pour réaliser la fonction de saisie des informations sur le livre
Cette rubrique présente
Cette section est déjà le 13e blog pratique de cette colonne. Sur la base de la section précédente, les données soumises ont été vérifiées. Il est temps de commencer à assembler les données , puis d'utiliser axios pour les soumettre. Une fois la soumission réussie, une grande partie des fonctions du projet seront terminées, et la prochaine étape est le module de liste de livres.
Table des matières
1. Assemblage de données par défaut
2. Assemblage des données JSON du projet Vue
2. Les points de fonction demandés par axios
1. Créez un nouveau fichier API
2. Maintenir et saisir l'URL du livre
3. Ajouter une méthode de demande pour saisir les informations sur le livre
3. Envoi des requêtes dans les composants métiers
1. Introduire la méthode de requête
3. Traitement des données renvoyées par l'interface
4. SetTimeout doit être effacé manuellement
1. Assemblage des données
Désormais les données soumises par l'interface générale, le front end et le front end vont coordonner l'utilisation du format JSON, c'est-à-dire que la valeur de l'attribut Content-Type dans l'entête de requête de l'interface est application/json.
1. Assemblage de données par défaut
Avant d'utiliser le projet Vue, lorsque nous soumettons les données, nous devons assembler les données des paramètres d'entrée, ou lorsque nous avons l'habitude d'utiliser le formulaire de formulaire plus tôt, la valeur du nom de l'élément dans le formulaire est la donnée à soumettre. Ensuite, l'assemblage de données JSON normal devrait ressembler à ceci dans ce cas
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. Assemblage des données JSON du projet Vue
Mais dans le projet Vue, en plus de la correspondance un à un entre la dépendance de données et la partie DOM, vous constaterez que le formulaire dans la dépendance de données n'est que le pré-assemblage du tableau soumis, vous pouvez donc directement fais ceci:
let params = this.form;De cette façon, les données JSON obtenues par params se trouvent être les données du formulaire. Pas assez Dans ce cas, les données du formulaire correspondent juste aux données soumises par l'interface, ce qui peut être facilement fait de cette manière. Mais dans le vrai travail, il y aura certainement des projets de type papillon de nuit, qui devront utiliser la méthode d'assemblage précédente. La première méthode d'assemblage des données doit donc également être disponible.
2. Les points de fonction demandés par axios
Les données ont été assemblées et la prochaine étape consiste à envoyer la demande axios, alors quelles préparations sont nécessaires dans ce projet, jetons un coup d'œil
1. Créez un nouveau fichier API
Un nouveau module est arrivé, donc la méthode d'instance d'envoi de la requête doit créer un nouveau fichier, le nouveau fichier src\api\bookManager.js
2. Maintenir et saisir l'URL du livre
Dans le fichier src\config\httpUrl.js, ajoutez l'url de l'interface de saisie des livres. Cette url est définie par le personnel du serveur et nous est donnée, comme le montre la figure
3. Ajouter une méthode de demande pour saisir les informations sur le livre
Dans le fichier src\api\bookManager.js nouvellement créé, ajoutez la méthode de requête et le module suivant de la gestion complète du livre, la méthode de requête sera dans ce fichier. La méthode d'interface pour le téléchargement des images avant est placée dans un fichier séparé car cela peut être possible dans le projet De nombreuses exigences nécessitent l'utilisation du téléchargement d'image, donc le téléchargement d'image est compté comme une méthode publique, il n'est donc pas ajouté à ce fichier, le code est le suivant
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. Envoi des requêtes dans les composants métiers
Les données des paramètres d'entrée sont prêtes, et les parties demandées par axios sont prêtes. Ensuite, il est temps de retourner au composant métier et de déclencher et d'envoyer réellement la demande d'entrée d'informations sur le livre.
1. Introduire la méthode de requête
Introduisez la méthode d'instance axios dans le fichier src\views\bookManager\Create.vue
import { enterBook } from '@/api/bookManager.js';2. Envoyer la demande
La section précédente indiquait que le bouton d'envoi appelle la méthode handleSubmit . Une fois les données de vérification transmises, afin d'éviter que le bouton ne soit cliqué à plusieurs reprises, cette méthode ajoute la limite de commutation isLoading . Le paramètre par défaut est false . Lorsque les données sont soumises , il est remplacé par true, puis le bouton de soumission commence à être dans l'état de chargement de la soumission. code afficher comme ci-dessous:
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. Traitement des données renvoyées par l'interface
Il doit y avoir des situations normales et anormales dans le retour de l'interface, donc lorsque l'interface est anormale, c'est-à-dire lorsque la valeur de code renvoyée n'est pas 200, nous demanderons à l'utilisateur les informations msg et changerons la variable de commutateur isLoading en false, donc que l'utilisateur peut terminer le traitement Vous pouvez continuer à soumettre après la situation anormale et ajouter le code de retour en même temps pour empêcher le code de continuer à s'exécuter
Si l'interface revient à l'état normal, l'invite "Soumission réussie" s'affichera normalement, et après que l'utilisateur verra l'invite contextuelle, l'utilisateur passera à la page de la liste des livres avec un délai de 1500 millisecondes.
4. SetTimeout doit être effacé manuellement
Beaucoup de gens pensent que si setTimeout ne fait pas référence à des variables composées externes en interne, ou s'il n'est pas utilisé pour des calculs récursifs, il n'a pas besoin d'être effacé manuellement et le navigateur le publiera automatiquement. Cependant, Brother Gou suggère que partout où setTimeout est utilisé, peu importe la simplicité des choses en interne, il doit être effacé manuellement . Et le code n'est pas compliqué, c'est facile. Parce que dans le suivi de la maintenance du code, personne ne sait qui fera quoi dans le code, et personne ne peut dire ce qu'il adviendra de la future technologie, tout comme personne n'a dit setInterval plus tôt, ceci, cela, tout à coup un jour , les enquêteurs ont commencé à demander quel était le problème avec setInterval, tout comme au réveil un jour, le serveur de l'entreprise a commencé à mettre à jour log4j, et beaucoup de gens aiment utiliser des composants tiers, alors installez-le, beaucoup de gens l'installeront s'ils faites attention Oui, au cas où l'utilisateur l'utilise un jour, un message merveilleux apparaît soudainement, haha, c'est loin.
enfin
Cette colonne est une série pratique de projets de séparation front-end et back-end créés conjointement par moi et le serveur Tiange ( page d'accueil de Tiange ).Le serveur de Tiange est : SpringBoot+Vue front-end separation project practice . Frère Tian a déjà publié de nombreuses interfaces. Je veux écrire un livre récemment, et je travaille dur jour et nuit, donc les progrès sont assez en retard. Je travaillerai plus dur, et de nombreux amis qui ont acheté la colonne l'obtiendront également Bonne chance avec le dernier code source.
Enfin, j'ai préparé une séance de vote pour tout le monde, j'espère qu'elle vous plaira