Detaillierter Prozessbericht der Vue2-Initiierungsanfragen mit Axios

npm install -S axios

// Referenziere Axios-Abhängigkeit importiere Axios von „Axios“

//Hängen Sie es in Vue auf, hier mounten wir Axios als Anfrage und wir können this.request verwenden, um Axios in der Komponente Vue.prototype.request = Axios aufzurufen;

@RestController
@RequestMapping("/Benutzer")
öffentliche Klasse UserController {
    @GetMapping("/Liste")
    öffentliche R-Liste() {
        return R.success("Benutzerlistenabfrage erfolgreich!");
    }
}

<Vorlage>
    <div id="index">
        <button @click="selectList">Benutzer abfragen</button>
    </div>
</Vorlage>
<Skript>
Standard exportieren {
    Name: "Index",
    Methoden: {
        Auswahlliste() {
            // Eine einfache GET-Anfrage kann implementiert werden, indem man einfach die URL this.request.get("http://localhost:8000/user/list").then(res => { übergibt.
                Konsole.log("res", res);
            }).catch(e => {
                console.log("e", e);
            })
        }
    }
}
</Skript>
<Stil></Stil> 

@RestController
@RequestMapping("/Benutzer")
öffentliche Klasse UserController {
    @GetMapping("/get")
    öffentliche R get(String id) {
        return R.success("Benutzerakquise erfolgreich!");
    }
}

wähleEines() {
    let konfiguration = {
        Parameter: {id: "1"}
    }
    // Auf die URL folgt das Konfigurationsobjekt. Das Params-Attribut im Konfigurationsobjekt entspricht den Anforderungsparametern this.request.get("http://localhost:8000/user/get", config).then(res => {
        Konsole.log("res", res);
    }).catch(e => {
        console.log("e", e);
    })
},

@RestController
@RequestMapping("/Benutzer")
öffentliche Klasse UserController {
    @PostMapping("/speichern")
    öffentliche R speichern() {
        return R.success("Benutzer erfolgreich hinzugefügt!");
    }
}

speichern() {
    // Das Senden einer einfachen POST-Anfrage ähnelt einer einfachen GET-Anfrage. Sie müssen lediglich die Get-Methode in die Post-Methode this.request.post("http://localhost:8000/user/save").then(res => { ändern.
        Konsole.log("res", res);
    }).catch(e => {
        console.log("e", e);
    })
}, 

@RestController
@RequestMapping("/Benutzer")
öffentliche Klasse UserController {
    /**
     * Im Allgemeinen werden beim Initiieren einer POST-Anforderung die Parameter in den Anforderungstext eingefügt und dann über @RequestBody analysiert. * Ich werde hier keine Entitätsklasse erstellen, sondern direkt die Map-Sammlung verwenden, um sie zu empfangen. */
    @PostMapping("/speichern")
    öffentliche R speichern(@RequestBody Map<String, String> data) {
        return R.success("Benutzer erfolgreich hinzugefügt!")
                .setAttribute("name", data.get("benutzername"))
                .setAttribute("pwd", data.get("Passwort"));
    }
}

speichern() {
    lass Daten = {
        Benutzername: „Java-Grundschüler丶“,
        Passwort: "123456789"
    }
    // Wenn Sie die Parameterliste sehen, sollten Sie es erraten können. Setzen Sie einfach das Objekt in den zweiten Parameter. // Beachten Sie, dass die von dieser Methode übertragenen Parameter im Anforderungstext this.request.post("http://localhost:8000/user/save", data).then(res => {
        Konsole.log("res", res);
    }).catch(e => {
        console.log("e", e);
    })
},

@RestController
@RequestMapping("/Benutzer")
öffentliche Klasse UserController {
    @PostMapping("/speichern")
    public R save(String Benutzername, String Passwort) {
        return R.success("Benutzer erfolgreich hinzugefügt!")
                .setAttribute("name", Benutzername)
                .setAttribute("pwd", Passwort);
    }
}

speichern() {
    let konfiguration = {
        Parameter: {
            Benutzername: „Java-Grundschüler丶“,
            Passwort: "123456789"
        }
    }
    // Daten werden hier nicht verwendet, stattdessen wird die Konfiguration zur Parameterübergabe verwendet oder das Objekt wird als Parameter zur Übergabe gekapselt this.request.post("http://localhost:8000/user/save", null, config).then(res => {
        Konsole.log("res", res);
    }).catch(e => {
        console.log("e", e);
    })
},

@RestController
@RequestMapping("/Benutzer")
öffentliche Klasse UserController {
    @PostMapping("/hochladen")
    öffentlicher R-Upload (MultipartFile-Datei, String-Dateiname) {
        // Das Dateiobjekt ist die empfangene Datei und die Verarbeitungslogik für die Datei wird ausgelassen …
        return R.success("Dateiupload erfolgreich!")
                .setAttribute("Dateiname", Dateiname);
    }

<Vorlage>
    <div id="index">
        <!-- input:file wird verwendet, um eine Datei auszuwählen. Nach der Auswahl einer Datei wird das Änderungsereignis ausgelöst, um die Methode fileChange aufzurufen-->
        <input type="file" id="file" @change="fileChange" />
        <!-- Methode zum Hochladen von Dateien ausführen-->
        <button @click="upload">Zum Hochladen klicken</button>
    </div>
</Vorlage>

<Skript>
Standard exportieren {
    Name: "Index",
    Daten() {
        zurückkehren {
            Datei: null
        }
    },
    Methoden: {
        Dateiänderung(Ereignis) {
            // Diese Methode wird ausgelöst, wenn eine Datei ausgewählt wird, und das Dateiobjekt wird in der Datei this.file = event.target.files[0] gespeichert.
        },
        hochladen() {
            // Erstellen Sie ein FormData-Objekt, legen Sie die Datei darin ab. Sie können auch einige andere Parameter eingeben. let data = new FormData();
            data.append('Datei', diese.Datei);
            data.append('Dateiname', "11223344.txt");
            // Erstellen Sie ein Konfigurationsobjekt und setzen Sie den Anforderungsheadertyp auf multipart/form-data
            let konfiguration = {
                Überschriften: {'Inhaltstyp': 'multipart/form-data'}
            }
            // Initiiere eine Anfrage mit dem gerade erstellten Objekt this.request.post('http://localhost:8000/user/upload', data, config).then(res => {
                Konsole.log("res", res);
            })
        }
    }
}
</Skript> 

<Skript>
Standard exportieren {
    Name: "Index",
    Daten() {
        zurückkehren {
            Konfiguration: {
                Basis-URL: "http://localhost:8000"
            }
        }
    },
    Methoden: {
        prüfen() {
            let data = {name: "Java-Grundschüler"};
            this.request.post("/user/speichern", data, this.config).then(res => {
                Konsole.log("res", res);
            });
        },
    }
}
</Skript>

<Skript>
Standard exportieren {
    Name: "Index",
    Daten() {
        zurückkehren {
            Konfiguration: {
                Basis-URL: "http://localhost:8000",
                Zeitüberschreitung: 5000
            }
        }
    },
    Methoden: {
        prüfen() {
            let data = {name: "Zhang Hanzhe"};
            this.request.post("/user/speichern", data, this.config).then(res => {
                Konsole.log("res", res);
            });
        },
    }
}
</Skript> 

<Skript>
Standard exportieren {
    Name: "Index",
    Daten() {
        zurückkehren {
            Konfiguration: {
                Basis-URL: "http://localhost:8000",
                // Erfordert die Zusammenarbeit des Servers mit Credentials: true,
                Zeitüberschreitung: 5000
            }
        }
    },
    Methoden: {
        prüfen() {
            let data = {name: "Java-Grundschüler"};
            this.request.post("/user/speichern", data, this.config).then(res => {
                Konsole.log("res", res);
            });
        },
    }
}
</Skript>