Vue3 (V) Details zur Integration der HTTP-Bibliothek axios

npm installiere [email protected] --save

<Vorlage>
  <a-Layout>
    <a-layout-sider width="200" style="Hintergrund: #fff">
      <a-Menü
          Modus="inline"
          v-Modell:selectedKeys="selectedKeys2"
          v-Modell:openKeys="openKeys"
          :Stil="{ Höhe: '100%', Rahmen rechts: 0 }"
      >
        <a-sub-menu key="sub1">
          <Vorlage #Titel>
                <span>
                  <Benutzer-umrissen />
                  Unternavigation 1
                </span>
          </Vorlage>
          <a-menu-item key="1">Option1</a-menu-item>
          <a-menu-item key="2">Option2</a-menu-item>
          <a-menu-item key="3">Option3</a-menu-item>
          <a-menu-item key="4">Option4</a-menu-item>
        </a-Untermenü>
        <a-sub-menu key="sub2">
          <Vorlage #Titel>
                <span>
                  <laptop-umrissen />
                  Unternavigation 2
                </span>
          </Vorlage>
          <a-menu-item key="5">Option 5</a-menu-item>
          <a-menu-item key="6">Option6</a-menu-item>
          <a-menu-item key="7">Option 7</a-menu-item>
          <a-menu-item key="8">Option8</a-menu-item>
        </a-Untermenü>
        <a-sub-menu key="sub3">
          <Vorlage #Titel>
                <span>
                  <Benachrichtigung-umrissen />
                  Unternavigation 3
                </span>
          </Vorlage>
          <a-menu-item key="9">Option9</a-menu-item>
          <a-menu-item key="10">Option10</a-menu-item>
          <a-menu-item key="11">Option11</a-menu-item>
          <a-menu-item key="12">Option12</a-menu-item>
        </a-Untermenü>
      </a-Menü>
    </a-layout-sider>
    <a-Layout-Inhalt
        :style="{ Hintergrund: '#fff', Polsterung: '24px', Rand: 0, min. Höhe: '280px' }"
    >
      Inhalt
    </a-layout-inhalt>
  </a-layout>
</Vorlage>

<script lang="ts">
importiere { defineComponent } von „vue“;
importiere Axios von „Axios“;

exportiere StandarddefiniereKomponente({
  Name: "Home",
  aufstellen(){
    console.log('einrichten');
    axios.get("http://localhost:8888/ebook/list?name=spring").then(response =>{
      console.log(Antwort);
    })
  }
});
</Skript>

importiere org.springframework.context.annotation.Configuration;
importiere org.springframework.web.cors.CorsConfiguration;
importiere org.springframework.web.servlet.config.annotation.CorsRegistry;
importiere org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Konfiguration
öffentliche Klasse CorsConfig implementiert WebMvcConfigurer {

    @Überschreiben
    public void addCorsMappings(CorsRegistry-Registrierung) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedHeaders(CorsConfiguration.ALL)
                .allowedMethods(CorsConfiguration.ALL)
                .allowCredentials(true)
                .maxAge(3600); // Keine Vorprüfung innerhalb von 1 Stunde erforderlich (OPTIONS-Anfrage senden)
    }

}