后端代码

import api
import upload

save_dir = "uploads"


async def rand_content(request):
    key = api.req.get_query(request, "key")
    return api.resp.success(f"{key} " * 100)


app = api.Api(
    routes=[
        api.resp.get("/", rand_content),
        upload.download("/download/{filename}", save_dir),
    ],
    middleware=[api.middleware.cors()]
)

if __name__ == "__main__":
    app.run()

前端代码

<script setup>
import {ref} from 'vue';
import axios from "axios";

const tabListNoTitle = [
  {
    key: 'article',
    tab: 'article',
  },
  {
    key: 'app',
    tab: 'app',
  },
  {
    key: 'project',
    tab: 'project',
  },
];
const noTitleKey = ref('app');
const message = ref("random data")
const onTabChange = (value, type) => {
  axios.get(`http://localhost:8888/?key=${value}`).then((response) => {
    message.value = response.data.data
  })
  noTitleKey.value = value;
};
</script>
<template>
  <div class="p-8 bg-indigo-300">
    <a-card
        style="width: 100%"
        :tab-list="tabListNoTitle"
        :active-tab-key="noTitleKey"
        @tabChange="key => onTabChange(key, 'noTitleKey')"
    >

      <p>{{ message }}</p>

      <template #tabBarExtraContent>
        <a href="#">More</a>
      </template>
    </a-card>
  </div>
</template>

渲染效果