Vue + SpringBoot 开发实战：详解前后端分离开发

2023-12-08 04:49:20

Vue + SpringBoot：前后端分离开发的详细指南

简介

近年来，前后端分离开发已成为一种主流模式，因为它能显著提升开发效率和代码维护性。如果您正考虑使用 Vue 和 SpringBoot 进行前后端分离开发，那么本文将为您提供全面的指南。

项目搭建

1. 前端项目：
使用 Vue CLI 创建一个新的 Vue 项目：

vue create my-vue-app

2. 后端项目：
使用 Spring Initializr 创建一个新的 Spring Boot 项目：

选择 Maven 项目
选择 Java 语言
使用最新的 Spring Boot 版本
选择 WAR 打包类型
添加 Spring Web、Spring Data JPA 和 MySQL 依赖项

3. 数据库：
创建一个 MySQL 数据库，并创建一个名为 "demo" 的表：

CREATE TABLE demo (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  PRIMARY KEY (id)
);

数据交互

1. 前端：
使用 Axios 库发送 HTTP 请求：

import axios from 'axios';

axios.get('http://localhost:8080/demo')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

2. 后端：
使用 Spring Data JPA 操作数据库：

@Entity
public class Demo {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Integer id;

    private String name;

    // getters and setters
}

@RestController
@RequestMapping("/demo")
public class DemoController {

    @Autowired
    private DemoRepository demoRepository;

    @GetMapping
    public List<Demo> getAllDemos() {
        return demoRepository.findAll();
    }

    @PostMapping
    public Demo createDemo(@RequestBody Demo demo) {
        return demoRepository.save(demo);
    }
}