搞开发用springboot+vue

### 使用 Spring Boot 和 Vue 进行全栈开发

#### 项目结构概述
在一个典型的基于 Spring Boot 和 Vue 的全栈应用中，项目的整体架构可以被划分为前端和后端两大部分。通常情况下，这两个部分会被放置在同一仓库的不同文件夹下以便于管理和协作。

对于 **后端 (Spring Boot)** ，其目录可能如下所示：

- `src/main/java/com/example/demo`：包含所有的 Java 类和服务实现。
- `src/main/resources/static/`: 存放静态资源，在此模式下可用来存放打包后的前端代码。
- `application.properties` 或者 `application.yml` ：用于定义应用程序的各种配置参数[^2]。

而对于 **前端 (Vue.js)** 来说，则有独立的工程结构:

- `public/index.html` : HTML 文件作为入口页面。
- `src/assets/`, `src/components/`, `src/views/` 等等...按照功能模块划分组件与样式表的位置。

当两者结合时，一种常见的做法是在根路径创建两个子文件夹分别代表前后端项目；另一种方法是让前端位于后端项目的特定位置（比如 resources 下），这样可以直接访问前端编译出来的静态文件[^1]。

#### 创建并运行一个简单示例程序

为了更好地理解整个流程，下面给出了一段简化版的例子来说明如何启动这样一个组合起来的服务。

##### 启动 Spring Boot 应用

首先确保已经安装好 JDK 并设置了 MAVEN_HOME 及 PATH 环境变量。接着可以在 pom.xml 中加入必要的依赖项以支持 web 开发和其他特性，例如 spring-boot-starter-web, h2-database(内存型数据库), Lombok 等工具库[^3]。

<dependencies>
    <!-- Web Starter -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!-- H2 Database for testing purposes -->
    <dependency>
        <groupId>com.h2database</groupId>
        <artifactId>h2</artifactId>
        <scope>runtime</scope>
    </dependency>

    <!-- Optional DevTools dependency -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
    </dependency>
    
    <!-- Other dependencies like lombok can be added here -->

</dependencies>

之后编写 RESTful API 控制器类，它负责处理来自客户端 HTTP 请求并将数据返回给调用方。

@RestController
@RequestMapping("/api")
public class HelloController {

    @GetMapping("/hello")
    public String sayHello() {
        return "Hello from backend!";
    }
}

##### 构建 Vue.js 前端界面

初始化一个新的 vue-cli 工程，并修改默认设置使其适应当前需求。编辑 src/App.vue 添加按钮点击事件触发 AJAX 调用向服务器发送请求获取消息显示出来。

vue create my-vue-app
cd my-vue-app
npm install axios --save

在 App.vue 内部添加相应逻辑：

<!-- src/App.vue -->
<div id="app">
  <button v-on:click="fetchMessage">Fetch Message From Backend</button>
  <p>{{ message }}</p>
</div>

<script>
import axios from 'axios';

export default {
  name: 'App',
  data () {
    return {message: ''};
  },
  methods:{
      fetchMessage(){
          axios.get('http://localhost:8080/api/hello')
              .then(response => this.message=response.data);
      }
  }
}
</script>

最后一步就是调整 package.json 中 scripts 字段里的 serve 命令指向正确的代理地址从而解决跨域问题。

// package.json
{
  ...
  "scripts": {
    "serve": "vue-cli-service serve --proxy http://localhost:8080"
  },
  ...
}

此时如果一切顺利的话应该能看到浏览器控制台打印出的信息是从后台传过来的数据字符串 “Hello from backend!”[^4].

---