具体的代码怎么实现vue+springboot
时间: 2024-09-10 12:30:01 浏览: 51
Vue.js 和 Spring Boot 结合是一个常见的前后端分离架构,以下是简单的步骤和代码片段:
1. **安装依赖**:
- 使用`npm`或`yarn`安装 Vue CLI(命令行工具):
```
npm install -g @vue/cli
```
2. **创建Vue应用**:
- 创建一个新的Vue项目:
```
vue create my-project
```
进入项目目录并启动服务:
```
cd my-project
npm run serve
```
3. **构建RESTful API**:
- 在Spring Boot项目中,创建一个控制器(Controller),例如 `src/main/java/com/example/controllers`:
```java
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class MyController {
@GetMapping("/api/users")
public User getUsers() {
// 返回模拟的用户列表
}
}
```
记得添加`@RestController`注解以启用RESTful支持。
4. **Vue组件调用API**:
- 在Vue组件中,使用axios或Vuex等库去调用Spring Boot API:
```javascript
import axios from 'axios';
export default {
data() {
return {
users: []
};
},
created() {
axios.get('/api/users')
.then(response => (this.users = response.data))
.catch(error => console.error(error));
}
};
```
5. **跨域请求**:
- Spring Boot需要配置允许跨域请求:
```java
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("*").allowedMethods("*").allowCredentials(true);
}
}
```
6. **部署**:
- 将Vue应用打包成生产环境的静态文件,然后部署到服务器上。
- 同时,Spring Boot应用部署到另一台服务器上,监听特定端口。
注意:实际开发中,你需要根据项目的复杂度来管理状态、路由、权限控制等。以上只是一个基础示例。
阅读全文