Rumah > hujung hadapan web > tutorial js > Bekerja dengan permintaan HTTP dalam Spring Boot

Bekerja dengan permintaan HTTP dalam Spring Boot

Mary-Kate Olsen
Lepaskan: 2024-10-06 22:37:02
asal
343 orang telah melayarinya

Working with HTTP requests in Spring Boot

Helo dunia!
Matlamat utama artikel ini adalah untuk membantu pembangun pemula mengendalikan permintaan HTTP dalam Spring Boot.

?Dalam contoh saya tidak merangkumi semua kod yang diperlukan untuk apl MVC, hanya beberapa bahagian untuk menunjukkan perbezaan dalam pemprosesan data.

Baru-baru ini, saya telah mengusahakan projek kejuruteraan bersama pelajar lain dalam kelas saya. Ia memperkenalkan kami kepada timbunan teknologi baharu, kerana kami dikehendaki membina pangkalan kod "lama". Pangkalan kod termasuk Java, Spring Boot dan Thymeleaf. Matlamat projek ini adalah untuk mencipta klon rangkaian sosial yang popular.
Fungsi teras adalah agak tipikal: pengguna boleh membuat siaran dan orang lain boleh mengulas atau menyukai siaran tersebut.
Untuk menambah sedikit kedinamikan visual, kami memutuskan untuk menggabungkan Thymeleaf dengan JavaScript. Dengan cara ini, apabila siaran dipaparkan pada halaman, pengguna boleh mengklik untuk menyukai atau mengulas, dan perubahan akan diproses di bahagian belakang. Pada ketika ini, kami memerlukan fungsi JavaScript untuk menghantar permintaan kepada pelayan untuk semua operasi CRUD standard.
Persoalannya ialah: bagaimana kita menghantar data dengan betul kepada pelayan menggunakan kaedah POST, PUT, atau DELETE? GET lebih kurang jelas, jadi saya langkau contoh dengan GET.
Berikut adalah cara yang mungkin.

Parameter URL (PathVariable)

Contoh URL: HTTP://myapp.com/posts/1

Sesuai untuk: PADAM, LETAK

Kes: Anda bekerja dengan entiti tertentu di bahagian belakang - satu siaran dalam contoh saya.

Contoh Anotasi:


@DeleteMapping("/posts/{post_id}")
public ResponseEntity<String> deletePost(@PathVariable("post_id") Long post_id) {
        // Some logic here...
        return ResponseEntity.ok("Deleted successfully");
    }


Salin selepas log masuk

Contoh kod JS yang sepadan:


 // Some pre-logic here to pass postId to the function, 
// or you can use const deletePost = async(postId)=>{} to pass postId directly
const deletePost = async () => {
    // Some pre-checks and error handling go here...
    const requestOption = {
        method:'DELETE',
        headers:{
            'Content-type':'application/json'
        }
    };
    await fetch(`/posts/${postId}`, requestOptions);
    // Some post-checks and error handling go here...
}


Salin selepas log masuk

Data borang (RequestParam)

Contoh URL: HTTP://myapp.com/posts atau HTTP://myapp.com/posts/1 untuk mengedit

Sesuai untuk: PUT, POST

Kes: Anda sedang mencipta atau mengemas kini entiti dengan satu atau dua parameter. Dalam contoh saya, ia ialah kandungan siaran (mesej teks).

Contoh Anotasi:


@PutMapping("/posts/{post_id}")
    public ResponseEntity<String> editPost(@PathVariable("post_id") Long post_id, @RequestParam("content") String content) {
        // Some logic goes here...
        return ResponseEntity.ok("Post updated successfully");
    }


Salin selepas log masuk

Contoh kod JS yang sepadan:


// Some pre-logic here to pass postId and content to the function, 
// or you can use const deletePost = async(postId, updatedContent)=>{} to pass 
// them directly directly
const updatePost = async ()=> {
    // Some pre-checks and error handling go here...
    const formData = new FormData();
    formData.append("content",updatedContent);
    requestOptions = {
        method:'PUT',
        body: formData
    };
    await fetch(`/posts/${postId}`,requestOptions);
    // Some post-checks and error handling go here...
}


Salin selepas log masuk

JSON Body (RequestBody)

Sesuai untuk: PUT, POST

Kes: Anda sedang mencipta atau mengemas kini entiti kompleks (cth. objek dengan 3 atau lebih parameter).

Contoh Anotasi:


@PutMapping("/posts/{post_id}")
    public ResponseEntity<String> editPost(@PathVariable("post_id") Long post_id, @RequestBody Post post) {
        // Some logic goes here...
        // It requires the whole object to be passed. 
        // After that it's possible to access values via getters of your object's model
        return ResponseEntity.ok("Post updated successfully");
    }


Salin selepas log masuk

Contoh kod JS yang sepadan:


const updatePost = async ()=> {
    // Some pre-checks and error handling go here...
    requestOptions = {
        method:'PUT',
        headers: {
            'Content-type':'application/json'
        },
        body: JSON.stringify({'content':updatedContent})
    };
    await fetch(`/posts/${postId}`,requestOptions);
    // Some post-checks and error handling go here...
}


Salin selepas log masuk

Ini dia. Semoga bermanfaat.
Ceria!

Atas ialah kandungan terperinci Bekerja dengan permintaan HTTP dalam Spring Boot. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan