Java+vue实现家谱前后端分离系统

要实现Java+Vue的家谱前后端分离系统，可以分为以下几个步骤：

1. 设计数据库表结构：可以设计Person表来存储每个人的信息，包括姓名、性别、父亲ID、母亲ID等字段。

2. 创建Java后端API：使用Spring Boot框架创建后端API，提供获取所有人、获取某个人、添加人等接口，通过JPA或MyBatis等框架操作数据库。

3. 创建Vue前端页面：使用Vue框架创建前端页面，包括家谱的展示、添加人、查找人等功能，使用axios等库调用后端API获取数据或提交数据。

以下是Java+Vue实现家谱前后端分离系统的示例代码：

Java后端API：

@RestController
@RequestMapping("/api")
public class FamilyTreeController {
    @Autowired
    private PersonRepository personRepository;

    @GetMapping("/people")
    public List<Person> getAllPeople() {
        return personRepository.findAll();
    }

    @GetMapping("/person/{id}")
    public Person getPerson(@PathVariable Long id) {
        return personRepository.findById(id).orElse(null);
    }

    @PostMapping("/person")
    public Person addPerson(@RequestBody Person person) {
        return personRepository.save(person);
    }
}

Vue前端页面：

<template>
  <div>
    <h1>家谱</h1>
    <ul>
      <li v-for="person in people" :key="person.id">
        {{ person.name }}
        <ul>
          <li v-for="child in getChildren(person)" :key="child.id">
            {{ child.name }}
          </li>
        </ul>
      </li>
    </ul>
    <div>
      <h2>添加人</h2>
      <form @submit.prevent="addPerson">
        <label>姓名：</label>
        <input type="text" v-model="newPerson.name">
        <label>性别：</label>
        <select v-model="newPerson.gender">
          <option value="male">男</option>
          <option value="female">女</option>
        </select>
        <label>父亲：</label>
        <select v-model="newPerson.fatherId">
          <option v-for="person in people" :value="person.id" :key="person.id">
            {{ person.name }}
          </option>
        </select>
        <label>母亲：</label>
        <select v-model="newPerson.motherId">
          <option v-for="person in people" :value="person.id" :key="person.id">
            {{ person.name }}
          </option>
        </select>
        <button type="submit">添加</button>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      people: [],
      newPerson: {
        name: '',
        gender: 'male',
        fatherId: null,
        motherId: null
      }
    }
  },
  created() {
    this.loadPeople();
  },
  methods: {
    loadPeople() {
      axios.get('/api/people')
        .then(response => {
          this.people = response.data;
        });
    },
    getChildren(person) {
      return this.people.filter(p => p.fatherId == person.id || p.motherId == person.id);
    },
    addPerson() {
      axios.post('/api/person', this.newPerson)
        .then(response => {
          this.people.push(response.data);
          this.newPerson = {
            name: '',
            gender: 'male',
            fatherId: null,
            motherId: null
          };
        });
    }
  }
}
</script>

在上面的代码中，`FamilyTreeController`类是Java后端API的实现，提供获取所有人、获取某个人、添加人等接口。`vue`文件是Vue前端页面的实现，包括家谱的展示、添加人等功能。通过axios等库调用后端API获取数据或提交数据。