Vue3 SpringBoot Axios注册小案例
时间: 2024-01-10 20:02:36 浏览: 27
这里提供一个基于 Vue3 和 SpringBoot 的前后端交互的小案例。首先需要安装 Node.js 和 Vue CLI 工具。然后可以按照以下步骤进行操作:
1. 创建一个 SpringBoot 项目,添加依赖:
```xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<dependency>
```
2. 创建一个 RESTful API 接口,用于接收前端发送的数据。
```java
@RestController
@RequestMapping("/api")
public class ApiController {
@PostMapping("/submit")
public String submitData(@RequestBody String data) {
// 处理接收到的数据
return "success";
}
}
```
3. 创建一个 Vue3 项目,使用 Axios 发送数据到后端接口。
```html
<template>
<div>
<input v-model="inputData" />
<button @click="submitData">提交</button>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
inputData: "",
};
},
methods: {
async submitData() {
const res = await axios.post("/api/submit", {
data: this.inputData,
});
console.log(res.data);
},
},
};
</script>
```
4. 运行后端 SpringBoot 项目和前端 Vue3 项目,即可实现前后端数据交互。
这是一个简单的案例,可以根据实际需求进行扩展和优化。