vue+ruoyi调用接口

Vue和Ruoyi都是Java Web应用程序，因此它们可以通过HTTP请求调用接口。

以下是调用接口的步骤：

1.创建Vue组件

在Vue项目中创建一个组件，该组件将向后端发送HTTP请求以获取数据。例如，你可以创建一个名为"UserList.vue"的组件。

2.编写HTTP请求代码

在组件中编写代码，以使用axios或其他HTTP客户端库向后端发送HTTP请求。例如，你可以使用以下代码获取用户列表数据：

import axios from 'axios';

export default {
  data() {
    return {
      userList: []
    }
  },
  methods: {
    getUserList() {
      axios.get('/api/user/list').then(response => {
        this.userList = response.data;
      });
    }
  },
  created() {
    this.getUserList();
  }
}

3.在Ruoyi后端编写接口

在Ruoyi项目中编写一个Controller类来处理前端发送的HTTP请求。例如，你可以编写一个名为"UserController"的类来处理获取用户列表的请求：

@RestController
@RequestMapping("/api/user")
public class UserController {
 
    @Autowired
    private IUserService userService;
 
    @GetMapping("/list")
    public List<User> getUserList() {
        return userService.selectUserList(new User());
    }
}

在上面的代码中，我们使用了Spring注解@RestController和@RequestMapping来将这个类转换为一个RESTful风格的Controller。我们还通过@Autowired注解将IUserService接口注入到UserController中。

4.启动Ruoyi项目

在Ruoyi项目中启动后端服务。你可以使用maven命令mvn spring-boot:run或在IDE中运行RuoyiApplication类来启动后端服务。

5.访问前端页面

在浏览器中访问前端页面，例如"http://localhost:8080/user/list"，你应该能够看到来自后端的用户列表数据。