八月作业1

最新推荐文章于 2024-09-13 14:34:15 发布

姜建斌

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量14

点赞数

文章标签： vue.js 前端 javascript ecmascript 前端框架

结合 Vue CLI 和 Spring Boot 创建一个全栈应用，涉及到前端和后端的协同工作。以下是一个简单的示例，展示如何将 Vue CLI 生成的前端应用与 Spring Boot 后端服务结合起来。

步骤 1: 创建 Vue CLI 前端应用

首先，使用 Vue CLI 创建一个新的前端项目：

按照提示完成项目设置。

步骤 2: 开发前端应用

在 my-vue-app 目录中开发你的前端应用。例如，创建一个组件来显示从 Spring Boot 后端获取的数据。

<!-- my-vue-app/src/components/MyData.vue -->
<template>
  <div>
    <h1>Data from Backend</h1>
    <p>{{ data }}</p>
  </div>
</template>

<script>
import axios from 'axios';

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

步骤 3: 创建 Spring Boot 后端应用

在另一个目录中创建 Spring Boot 应用。

创建 pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <!-- 其他配置略... -->
  <dependencies>
    <!-- Spring Boot Starter Web -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- Spring Boot Starter Tomcat (默认包含，可以省略) -->
    <!-- 其他依赖略... -->
  </dependencies>
</project>

创建主应用程序类：

// MyApplication.java
package com.example;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class MyApplication {

    public static void main(String[] args) {
        SpringApplication.run(MyApplication.class, args);
    }
}

创建一个控制器来返回数据：

// MyController.java
package com.example;

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

@RestController
public class MyController {

    @GetMapping("/api/data")
    public String getData() {
        return "Hello from Spring Boot!";
    }
}