采用B/S结构，用javaweb实现个人通讯录系统，该系统的设计目标是能够轻松地管理个人的联系恩信息，包括查看所有联系人、添加、修改、删除操作。联系人信息包括姓名，地址，电话以及邮箱。请给我具体实现代码

在Javaweb环境下，使用B/S架构（浏览器/服务器）构建个人通讯录系统，我们可以将整个项目分为几个关键部分：

1. **后端服务** (Server Side)：
- 使用Spring Boot作为基础框架，它能快速搭建RESTful API服务。

   @RestController
   public class ContactController {
       @Autowired
       private ContactRepository contactRepository; // 假设有一个ContactRepository接口用于数据库操作

       @GetMapping("/contacts")
       public List<Contact> getAllContacts() { return contactRepository.findAll(); }
       
       // 添加、更新和删除接口类似
       @PostMapping("/contacts")
       public ResponseEntity<?> addContact(@RequestBody Contact contact) {
           contactRepository.save(contact);
           return ResponseEntity.ok().build();
       }
       // 更新接口，接收ID和新的Contact对象
       @PutMapping("/contacts/{id}")
       public ResponseEntity<?> updateContact(@PathVariable Long id, @RequestBody Contact updatedContact) {
           Contact existing = contactRepository.findById(id).orElseThrow(() -> new ResourceNotFoundException("Contact not found"));
           existing.setName(updatedContact.getName());
           ... // 其他属性更新
           contactRepository.save(existing);
           return ResponseEntity.ok().build();
       }
       @DeleteMapping("/contacts/{id}")
       public ResponseEntity<?> deleteContact(@PathVariable Long id) {
           Contact deleted = contactRepository.deleteById(id);
           if (deleted.isPresent()) {
               return ResponseEntity.noContent().build();
           } else {
               throw new ResourceNotFoundException("Contact not found");
           }
       }
   }

2. **数据访问层** (Data Access Layer)：
- 数据库操作通常通过JPA或MyBatis等ORM工具处理，例如Hibernate。

   interface ContactRepository extends JpaRepository<Contact, Long> {
       // 自定义查询方法如按姓名搜索等
       List<Contact> findByLastName(String lastName);
   }

3. **前端页面** (Browser Side)：
- 使用HTML、CSS和JavaScript，搭配Vue.js或React.js这样的前端框架构建用户界面。
- AJAX请求向服务器发送CRUD操作。

<!-- 部分HTML模板 -->
<form @submit.prevent="addContact">
   <input v-model="newContact.name" placeholder="姓名">
   ... <!-- 地址、电话、邮箱输入框 -->
   <button type="submit">添加</button>
</form>

<button @click="editContact">编辑</button>
...

// Vue实例中的部分代码
export default {
   data() {
      return {
         newContact: {
            name: '',
            address: '',
            phone: '',
            email: ''
         },
         selectedContact: null,
      };
   },
   methods: {
      async addContact() {
         await this.$http.post('/contacts', this.newContact);
         this.newContact = {};
      },
      editContact(contact) {
         this.selectedContact = contact;
      }
   }
};