SpringBoot+Vue实现数据添加功能

下面我将详细讲解如何使用Spring Boot和Vue实现数据添加功能的完整攻略，包含如下步骤：

环境准备

1. 安装 Java 和 Node.js

首先需要安装 Java 和 Node.js 以支持后续操作。可以从以下网站下载并安装：

Java：https://www.oracle.com/java/technologies/downloads/
Node.js：https://nodejs.org/zh-cn/

2. 安装 IDE

可以选择自己喜欢的集成开发环境（IDE），如 Eclipse、IntelliJ IDEA 等等。本教程默认使用 IntelliJ IDEA。

3. 创建 Spring Boot 项目

使用 IntelliJ IDEA 创建 Spring Boot 项目：

打开 IntelliJ IDEA，选择 New Project，然后选择 Spring Initializr。
在弹出的窗口中，填写 Group、Artifact 和 Dependencies 信息，然后点击 Next。
在下一步中，选择项目名称、项目路径、主类等信息，并且点击 Finish 完成创建。

4. 集成 Vue.js

我们需要在 Spring Boot 项目中引入 Node.js 和 Vue.js。可以在项目根目录下创建一个 package.json 文件，然后在你喜欢的终端中执行 npm init 命令初始化。接着，执行以下命令安装 Vue.js：

npm install vue --save

5. 创建 Vue.js 项目

执行以下命令创建一个新的 Vue.js 项目：

vue create frontend

然后进入 frontend 目录：

cd frontend

6. 集成开发环境

在 Vue.js 项目中使用 Element UI，并且使用 axios 来请求后端 API。我们需要安装以下依赖：

npm install --save axios
npm install --save element-ui

添加数据

1. 创建数据库

本示例中使用 MySQL 数据库。

CREATE DATABASE `example_db`;

CREATE TABLE `example` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) DEFAULT NULL,
  `age` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

然后插入一些初始数据：

INSERT INTO `example` (`name`, `age`) VALUES ('Tom', 18);
INSERT INTO `example` (`name`, `age`) VALUES ('Jane', 20);

2. 创建后端 API

使用 Spring Boot 创建后端 API。

首先创建一个实体类 Example：

@Getter
@Setter
@NoArgsConstructor
@AllArgsConstructor
@Entity
@Table(name = "example")
public class Example {

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

    private String name;
    private Integer age;
}

然后创建一个数据访问层接口 ExampleRepository：

public interface ExampleRepository extends JpaRepository<Example, Integer> {
}

最后创建一个 RESTful API，API 文档位于 http://localhost:8080/swagger-ui.html

@RestController
public class ExampleResource {

    private final ExampleRepository exampleRepository;

    public ProductResource(ProductRepository exampleRepository) {
        this.exampleRepository = exampleRepository;
    }

    @GetMapping("/examples")
    public List<Example> getExamples() {
        return exampleRepository.findAll();
    }

    @PostMapping("/examples")
    public Example createExample(@RequestBody Example example) {
        return exampleRepository.save(example);
    }
}

3. 创建前端页面

在 frontend/src/views 目录下创建 Examples.vue 页面，并使用 Element UI 组件构建。

<template>
  <div>
    <el-row>
      <el-col :span="4">姓名：</el-col>
      <el-col :span="20"><el-input v-model="name"></el-input></el-col>
    </el-row>
    <el-row>
      <el-col :span="4">年龄：</el-col>
      <el-col :span="20"><el-input v-model="age" type="number"></el-input></el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-button type="primary" @click="submit">提交</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      name: '',
      age: ''
    }
  },
  methods: {
    submit() {
      axios.post('/examples', {
        name: this.name,
        age: this.age
      }).then((response) => {
        console.log(response)
      })
    }
  }
}
</script>

4. 集成前后端

在 frontend/src/App.vue 中引入 Examples.vue，并设置路由：

<template>
  <div>
    <router-view/>
  </div>
</template>

<script>
import Examples from './views/Examples.vue'

export default {
  name: 'App',
  components: {
    Examples
  },
  data() {
    return {}
  }
}
</script>

在 frontend/src/router/index.js 中添加路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Examples from '../views/Examples.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Examples',
    component: Examples
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router