Bagaimana untuk membangunkan rangka kerja Rangka Kerja Vue3+Spring

1. Persediaan persekitaran

Untuk menggunakan Node.js dan Java JDK pada komputer anda, anda perlu memasangnya terlebih dahulu. Kemudian, kita boleh mencipta projek Vue3 menggunakan Vue CLI:

rubyCopy code$ npm install -g @vue/cli
$ vue create vue-spring-demo

Kemudian, kita perlu mencipta projek Spring menggunakan Spring Initializr:

• Akses pada permulaan.spring. io/ Spring Initializr.

• Pilih kebergantungan projek dan pilihan konfigurasi lain.

• Klik butang "Jana" untuk memuat turun pakej termampat projek yang dijana.

• Ekstrak projek ke folder pada komputer anda.

Kini, kami bersedia untuk memulakan pembangunan praktikal Vue3 dan Spring.

2. Cipta komponen Vue3

Komponen dalam Vue3 ialah blok kod boleh guna semula yang digunakan untuk membina antara muka UI aplikasi web. Menggunakan sistem komponen Vue3, kami boleh mencipta berbilang komponen dan menggunakannya pada komponen induk.

Kami akan mencipta komponen Vue3 mudah untuk memaparkan nombor versi Rangka Kerja Spring. Cipta fail bernama SpringVersion.vue dan tambahkan kod berikut padanya:

htmlCopy code<template>
  <div>
    <h3>Spring Framework Version:</h3>
    <p>{{ version }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      version: &#39;&#39;,
    };
  },
  mounted() {
    fetch(&#39;/spring/version&#39;)
      .then(response => response.text())
      .then(data => (this.version = data))
      .catch(error => console.error(error));
  },
};
</script>

Dalam komponen ini, kami telah menggunakan tag d477f9ce7bf77f53fbcf36bec1b69b7a untuk mentakrifkan kandungan HTML komponen tersebut. Kami menggunakan {{ version }} untuk memaparkan nombor versi yang diperoleh daripada Spring Framework. Dalam teg 3f1c4e4b6b16bbbd69b2ee476dc4f83a, kami mentakrifkan kod JavaScript komponen. Kami menggunakan kaedah fetch() untuk mendapatkan nombor versi Spring Framework dan menyimpannya dalam atribut data version komponen. Kami juga memanggil kaedah mounted() dalam fetch() cangkuk kitar hayat.

3. Cipta pengawal Spring

Dalam Rangka Kerja Spring, pengawal ialah kelas Java yang digunakan untuk mengendalikan permintaan web. Kami akan menulis pengawal mudah yang mengembalikan nombor versi Rangka Kerja Spring.

Buat fail bernama SpringController.java dan tambah kod berikut ke dalamnya:

javaCopy codeimport org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class SpringController {
    @GetMapping("/spring/version")
    public String version() {
        return org.springframework.core.SpringVersion.getVersion();
    }
}

Dalam pengawal ini, kami menandakan kelas dengan anotasi @RestController, menunjukkan bahawa kelas itu ialah pengawal . Kami juga menandai kaedah @GetMapping dengan anotasi version() untuk menentukan bahawa kaedah itu yang mengendalikan permintaan GET untuk laluan /spring/version. Kaedah ini mengembalikan nombor versi Rangka Kerja Spring.

4. Konfigurasikan projek Spring

Sebelum kita boleh menjalankan projek Spring, kita perlu melakukan beberapa konfigurasi. Untuk Spring Boot dan Spring MVC mengendalikan permintaan dan respons web, kami perlu mengkonfigurasinya.

Pertama, kita perlu meletakkan fail SpringController.java ke dalam folder src/main/java/com/example/demo projek Spring. Kemudian, kita perlu menambah anotasi DemoApplication.java pada fail @ComponentScan untuk memberitahu Spring tempat mencari komponen. Kami juga perlu menambah @CrossOrigin anotasi untuk membenarkan permintaan silang asal.

javaCopy codeimport org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.web.bind.annotation.CrossOrigin;
@SpringBootApplication
@ComponentScan("com.example.demo")
@CrossOrigin(origins = "*")
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

Kini, kami telah menyelesaikan konfigurasi projek Spring. Kita boleh memulakan projek Spring dengan arahan berikut:

shellCopy code$ cd vue-spring-demo
$ ./mvnw spring-boot:run

5. Menggunakan komponen Vue3 dan pengawal Spring

Kini, kami bersedia untuk menggunakan komponen SpringVersion dan kawalan Spring dalam Vue3 peranti aplikasi. Kami perlu menambah komponen SpringVersion kepada beberapa komponen induk dalam aplikasi Vue3 dan memperkenalkannya dalam komponen menggunakan kod berikut:

<template>
  <div>
    <spring-version></spring-version>
  </div>
</template>
<script>
import SpringVersion from &#39;./components/SpringVersion.vue&#39;;
export default {
  components: {
    SpringVersion,
  },
};
</script>

Kini kami boleh mendapatkan semula versi Rangka Kerja Spring dalam Nombor aplikasi Vue3. Kita boleh menggunakan arahan berikut untuk memulakan aplikasi Vue3:

shellCopy code$ cd vue-spring-demo
$ npm run serve

Akses http://localhost:8080 dalam penyemak imbas untuk melihat nombor versi Spring Framework.

Atas ialah kandungan terperinci Bagaimana untuk membangunkan rangka kerja Rangka Kerja Vue3+Spring. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!