在现代Web开发中，前后端分离的架构越来越受到欢迎，而Vue.js作为一款流行的前端框架，因其轻量、灵活和易学的特性，成为开发者的首选。本文将介绍如何创建一个基本的Vue前端工程，并与Spring Boot后端进行简单的集成。
一、环境准备
在开始之前，确保你的计算机上安装了以下软件：
- Node.js：Vue.js依赖于Node.js运行环境，建议安装最新的稳定版本。
-
Vue CLI：Vue CLI是一个强大的官方脚手架工具，用于快速搭建Vue项目。使用以下命令进行全局安装：
bash npm install -g @vue/cli -
Spring Boot：确保你已经安装了JDK和Maven，并熟悉基本的Spring Boot开发。
二、创建Vue项目
使用Vue CLI创建一个新的Vue项目。打开终端，然后运行以下命令：
vue create my-vue-app
根据提示选择预设，默认选项通常足够使用。创建完成后，进入项目目录：
cd my-vue-app
三、基础结构
项目结构大致如下：
my-vue-app
│ ├── node_modules
│ ├── public
│ ├── src
│ │ ├── assets
│ │ ├── components
│ │ ├── App.vue
│ │ ├── main.js
│ └── package.json
四、基本代码示例
在src/components目录下，创建一个名为HelloWorld.vue的组件，内容如下：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button @click="fetchData">获取后端数据</button>
<p v-if="backendData">{{ backendData }}</p>
</div>
</template>
<script>
export default {
data() {
return {
msg: '欢迎使用Vue.js!',
backendData: ''
}
},
methods: {
async fetchData() {
try {
const response = await fetch('http://localhost:8080/api/data');
const data = await response.json();
this.backendData = data.message;
} catch (error) {
console.error('获取后端数据失败', error);
}
}
}
}
</script>
<style scoped>
h1 {
color: blue;
}
</style>
五、启动前端项目
在项目根目录下，使用以下命令启动Vue项目：
npm run serve
默认情况下，项目会在http://localhost:8080上运行。
六、创建Spring Boot后端
接下来，我们创建一个简单的Spring Boot后端应用。首先，确保你的Spring Boot项目已设置好。在src/main/java/com/example/demo目录下，创建一个名为HelloController.java的控制器，如下所示：
package com.example.demo;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class HelloController {
@GetMapping("/api/data")
public Map<String, String> getData() {
Map<String, String> response = new HashMap<>();
response.put("message", "来自Spring Boot后端的数据");
return response;
}
}
七、整合前后端
为了允许Vue前端访问Spring Boot后端，你可能需要设置CORS。你可以在Spring Boot主类中添加以下注解：
import org.springframework.web.bind.annotation.CrossOrigin;
@CrossOrigin(origins = "*")
这样就允许来自所有源的跨域请求了。
八、运行与测试
- 启动Spring Boot应用。
- 然后访问Vue项目的
http://localhost:8080，点击“获取后端数据”按钮，你应该能看到从Spring Boot后端获取的数据。
结论
通过上述步骤，我们创建了一个简单的Vue前端项目，并与Spring Boot后端进行了数据交互。Vue.js和Spring Boot的结合提供了灵活且强大的解决方案，让开发者能够高效构建现代Web应用。在未来的项目中，你可以根据需求扩展组件、添加路由以及与数据库交互等。希望本文能为你的Vue项目开发提供一些启示。
