下面我将详细讲解“springboot vue测试平台接口定义前后端新增功能实现”的完整攻略，这包括如何进行前后端的接口定义以及新增功能的开发实现。具体攻略如下：

1. 环境准备

在开始之前，需要确保本机已经安装了以下环境：

JDK 8或以上版本
Node.js 8或以上版本
Vue CLI
IntelliJ IDEA 或其他java开发工具
VS Code 或其他前端开发工具

2. 后端接口定义

使用Spring Boot框架来开发后端的接口定义，我们需要创建一个Spring Boot项目。在项目中定义后端接口，这里假设你已经有了一个实现用户管理的简单接口。

示例代码：

@RestController
@RequestMapping("/users")
public class UserController {

  @Autowired
  private UserRepository userRepository;

  @GetMapping("/")
  public List<User> getUsers() {
      return userRepository.findAll();
  }

  @GetMapping("/{id}")
  public User getUserById(@PathVariable("id") Long id) {
      return userRepository.findById(id).orElse(null);
  }

  @PostMapping("/")
  public User addUser(@RequestBody User user) {
      return userRepository.save(user);
  }

  @PutMapping("/{id}")
  public User updateUser(@PathVariable("id") Long id, @RequestBody User user) {
      User existingUser = userRepository.findById(id).orElse(null);
      if(existingUser != null) {
          existingUser.setName(user.getName());
          existingUser.setEmail(user.getEmail());
          userRepository.save(existingUser);
      }

      return existingUser;
  }

  @DeleteMapping("/{id}")
  public void deleteUser(@PathVariable("id") Long id) {
      userRepository.deleteById(id);
  }
}

3. 前端接口定义

接下来我们需要定义前端的接口，我们将使用Vue.js框架来实现。首先，我们需要使用Vue CLI工具来创建一个Vue项目，在这里我将假设你已经完成了这一步。

假设我们需要实现前端的用户列表页面和新增用户页面，在前端定义相应的接口。

示例代码：

首先是用户列表页面 (Users.vue)：

<template>
  <div>
    <h1>用户列表</h1>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>邮箱</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{user.id}}</td>
          <td>{{user.name}}</td>
          <td>{{user.email}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    this.loadUsers();
  },
  methods: {
    loadUsers() {
      fetch('/users/')
        .then(response => response.json())
        .then(data => {
          this.users = data;
        });
    }
  }
}
</script>

然后是新增用户页面 (AddUser.vue)：

<template>
  <div>
    <h1>新增用户</h1>
    <form>
      <div>
        <label>姓名:</label>
        <input type="text" v-model="user.name">
      </div>
      <div>
        <label>邮箱:</label>
        <input type="email" v-model="user.email">
      </div>
      <button type="button" @click="addUser()">新增用户</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '',
        email: ''
      }
    }
  },
  methods: {
    addUser() {
      fetch('/users/', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.user)
        })
        .then(response => response.json())
        .then(data => {
          window.alert('用户添加成功！');
        });
    }
  }
}
</script>

4. 新增功能的实现

现在，我们已经定义好了前后端的接口，并且实现了用户列表和新增用户的页面。接下来，我们将实现向数据库中新增用户的功能。

首先，我们需要在前端通过调用后端的接口将新增的用户数据传递到后端。在前端，我们通过使用fetch函数向后端发送post请求传递新增的用户数据，如：

fetch('/users/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(user)
})
.then(response => response.json())
.then(data => {
  // 处理服务器端返回的响应
});

在后端，我们需要定义一个Controller，实现接收前端传递过来的用户数据并将其保存到数据库中。

示例代码：

@RestController
@RequestMapping("/users")
public class UserController {

  @Autowired
  private UserRepository userRepository;

  // 省略其他接口方法...

  @PostMapping("/")
  public User addUser(@RequestBody User user) {
    return userRepository.save(user);
  }
}

这样，我们就完成了从前端页面向数据库中新增用户数据的功能。