Vue和FastAPI实现前后端分离

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.username }}
      </li>
    </ul>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      users: []
    };
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get('http://localhost:8000/users/');
        this.users = response.data;
      } catch (error) {
        console.error('An error occurred while fetching users:', error);
      }
    }
  },
  created() {
    this.fetchUsers();
  }
};
</script>

这个Vue组件在创建时会调用fetchUsers方法，该方法通过axios.get异步请求FastAPI的后端API。成功获取数据后，会将用户列表存储在本地的users数据属性中，并在模板中进行渲染显示。如果请求失败，将在控制台输出错误信息。这个例子展示了如何在Vue中使用axios进行HTTP GET请求，并在组件创建时自动获取数据。