后端使用Java前端vue请展示代码

在Java后端配合Vue前端的项目中，通常采用Spring Boot作为服务端框架，Vite或Vue CLI作为前端构建工具。这里是一个简单的例子，展示如何创建REST API接口供Vue组件调用：

**后端（Java + Spring Boot）示例（ServerController.java）**:

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ServerController {

    @GetMapping("/api/users/{id}")
    public User getUser(@PathVariable("id") Long userId) {
        // 这里假设有一个UserService来处理数据库查询
        return userService.getUserById(userId);
    }
}

在这个例子中，我们定义了一个`/api/users/:id`的GET请求，从URL路径参数`id`获取用户ID，然后调用`userService.getUserById`方法，假定该方法从数据库获取用户数据。

**前端（Vue）示例（App.vue）**:

<template>
  <div id="app">
    <h1>User Data</h1>
    <button @click="fetchUserData">Get User Data</button>
    <pre v-if="user">{{ user }}</pre>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      user: null,
    };
  },
  methods: {
    async fetchUserData() {
      try {
        const response = await axios.get('/api/users/' + this.userId);
        this.user = response.data;
      } catch (error) {
        console.error('Error fetching user:', error);
      }
    },
  },
  created() {
    // 获取当前用户的ID，此处仅作演示，实际应用需从路由或登录状态获取
    this.userId = 1;
  },
};
</script>

在这里，Vue组件通过`axios`库向`/api/users/:userId`发送GET请求，当用户点击按钮时，`fetchUserData`方法会被触发，获取用户数据并显示在页面上。

注意，这只是一个基础示例，实际项目中还需要考虑错误处理、权限验证、路由配置等其他细节。同时，前端部分也需要安装并配置axios以及v-pre（用于展示预渲染的内容）。