前后端通信demo

<template>
<div>
  <div>Bot 昵称:{{ bot_name }}</div>
  <div>Bot战力: {{ bot_rating }}</div>
</div>
</template>

<script setup>
import {ref ,onMounted} from "vue";
import axios from "axios";
const bot_name = ref("");
const bot_rating = ref("");
onMounted(async()=>{
  try{
    const response = await axios.get("http://localhost:3000/pk/getbotinfo");
    bot_name.value = response.data.name;
    bot_rating.value = response.data.rating;
  }catch(err){
    console.error(err);
  }
})
</script>
<style>
body {
  background-image: url("@/assets/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
</style>

前后端通信