帮我写一个前后端分离的代码，前台用hbuilder x的vue格式来写，后端用idea的springboot写，要可以连接数据库做简单的增删改查

好的，以下是一个简单的前后端分离的代码示例：

1. 后端代码

在后端，您可以使用Spring Boot来构建RESTful API，并使用JPA来连接数据库。以下是一个简单的示例，可以实现增删改查操作：

@Entity
@Table(name = "users")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String email;
    // getters and setters
}

@Repository
public interface UserRepository extends JpaRepository<User, Long> {
}

@RestController
public class UserController {
    @Autowired
    private UserRepository userRepository;

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

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

    @GetMapping("/users/{id}")
    public User getUserById(@PathVariable Long id) {
        return userRepository.findById(id).orElseThrow(() -> new ResourceNotFoundException("User not found"));
    }

    @PutMapping("/users/{id}")
    public User updateUser(@PathVariable Long id, @RequestBody User user) {
        User existingUser = userRepository.findById(id).orElseThrow(() -> new ResourceNotFoundException("User not found"));
        existingUser.setName(user.getName());
        existingUser.setEmail(user.getEmail());
        return userRepository.save(existingUser);
    }

    @DeleteMapping("/users/{id}")
    public ResponseEntity<?> deleteUser(@PathVariable Long id) {
        User user = userRepository.findById(id).orElseThrow(() -> new ResourceNotFoundException("User not found"));
        userRepository.delete(user);
        return ResponseEntity.ok().build();
    }
}

2. 前端代码

在前端，您可以使用Vue.js来构建Web应用程序界面，并使用Axios库来发送HTTP请求并处理响应。以下是一个简单的示例，可以实现显示用户列表、添加用户、编辑用户和删除用户的功能：

<template>
  <div>
    <h1>User List</h1>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>Edit</th>
          <th>Delete</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>
          <td><button @click="editUser(user)">Edit</button></td>
          <td><button @click="deleteUser(user)">Delete</button></td>
        </tr>
      </tbody>
    </table>
    <h1 v-if="editing">Edit User</h1>
    <form v-if="editing" @submit.prevent="saveUser">
      <label>ID:</label>
      <input type="text" v-model="currentUser.id" disabled>
      <label>Name:</label>
      <input type="text" v-model="currentUser.name">
      <label>Email:</label>
      <input type="text" v-model="currentUser.email">
      <button type="submit">Save</button>
    </form>
    <h1 v-else>Add User</h1>
    <form v-else @submit.prevent="addUser">
      <label>Name:</label>
      <input type="text" v-model="newUser.name">
      <label>Email:</label>
      <input type="text" v-model="newUser.email">
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      users: [],
      newUser: {
        name: '',
        email: ''
      },
      currentUser: null,
      editing: false
    }
  },
  mounted() {
    axios.get('/users').then(response => {
      this.users = response.data
    }).catch(error => {
      console.log(error)
    })
  },
  methods: {
    addUser() {
      axios.post('/users', this.newUser).then(response => {
        this.users.push(response.data)
        this.newUser = {
          name: '',
          email: ''
        }
      }).catch(error => {
        console.log(error)
      })
    },
    editUser(user) {
      this.currentUser = Object.assign({}, user)
      this.editing = true
    },
    saveUser() {
      axios.put(`/users/${this.currentUser.id}`, this.currentUser).then(response => {
        const index = this.users.findIndex(user => user.id === response.data.id)
        this.users.splice(index, 1, response.data)
        this.currentUser = null
        this.editing = false
      }).catch(error => {
        console.log(error)
      })
    },
    deleteUser(user) {
      axios.delete(`/users/${user.id}`).then(response => {
        const index = this.users.findIndex(u => u.id === user.id)
        this.users.splice(index, 1)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

希望这个示例可以帮助您开始编写前后端分离的代码！