使用Vue和Element UI来搭建一个个人中心页面,根据用户登录的ID从后端查找他的个人信息并在前端页面中展示出来

要实现根据用户登录的ID从后端获取个人信息并展示在前端页面中，你需要进行以下步骤：

1. 在后端创建一个接口，用于根据用户ID查询个人信息。可以使用Vue的Axios库来发送HTTP请求，获取后端数据。确保你已经配置好后端接口。

2. 在Vue的"PersonalCenter"组件中，添加一个方法来获取个人信息。可以在组件的`created`钩子函数中调用这个方法，确保在页面加载时就获取到用户的个人信息。

3. 在组件的`data`属性中添加一个空对象，用于保存用户的个人信息。

4. 在获取个人信息的方法中，使用Axios发送HTTP请求到后端接口，并传递用户ID作为参数。在请求成功的回调函数中，将返回的个人信息保存到组件的`data`属性中。

5. 在组件的模板中，使用Element UI的组件来展示个人信息。根据返回的数据，显示用户的姓名、头像、联系方式等信息。

下面是一个简单的示例代码：

<template>
  <div>
    <el-card>
      <!-- 显示用户的姓名 -->
      <h2>{{ userInfo.name }}</h2>
      <!-- 显示用户的头像 -->
      <img :src="userInfo.avatar" alt="Avatar" width="100">
      <!-- 显示用户的联系方式 -->
      <p>{{ userInfo.contact }}</p>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      userInfo: {} // 保存用户个人信息的对象
    };
  },
  created() {
    this.getPersonalInfo();
  },
  methods: {
    getPersonalInfo() {
      const userId = 'user_id'; // 假设这里是用户登录后获取的ID
      axios.get(`/api/user/${userId}`)
        .then(response => {
          this.userInfo = response.data; // 将返回的个人信息保存到userInfo
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

注意：上述代码中的`/api/user/${userId}`是根据你实际后端接口的路径进行替换。确保后端接口能够根据用户ID返回正确的个人信息。另外，根据实际情况，你可能还需要添加一些错误处理和加载状态的逻辑。