java后端跳到vue页面

原创

mob64ca12f3f05d 2024-03-04 04:06:05 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12f3f05d的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何实现Java后端跳转到Vue页面

1. 流程图

stateDiagram
    开发者 -> 小白: 教学
    小白 -> 开发者: 提问
    开发者 --> 小白: 回答问题

2. 步骤表格

步骤	描述
1	用Java后端构建数据
2	创建Vue页面
3	调用Java后端接口
4	在Vue页面展示数据

3. 具体步骤

步骤一：用Java后端构建数据

在Java后端编写接口，返回需要展示的数据：

// 示例代码
@RestController
@RequestMapping("/api")
public class DataController {

    @GetMapping("/data")
    public List<String> getData() {
        List<String> data = new ArrayList<>();
        data.add("Hello");
        data.add("World");
        return data;
    }
}

步骤二：创建Vue页面

在Vue项目中创建页面，使用axios调用Java后端接口获取数据：

// 示例代码
<template>
  <div>
    Data from Java Backend
    <ul>
      <li v-for="item in data" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: [],
    };
  },
  created() {
    axios.get('http://localhost:8080/api/data')
      .then((response) => {
        this.data = response.data;
      })
      .catch((error) => {
        console.error(error);
      });
  },
};
</script>