Java实现电话本管理系统

1. 简介

电话本管理系统是一款方便用户管理联系人信息的工具，可以添加、删除、修改和查看联系人信息。本文将会介绍使用Java来开发这样一款电话本管理系统的完整攻略。

2. 技术选择

• 编程语言：Java
• 开发环境：Eclipse
• 数据库：MySQL
• Web框架：Spring Boot
• 前端框架：Vue.js
• 项目构建工具：Maven

3. 开发步骤

3.1 数据库设计

首先确定电话本管理系统需要存储哪些信息，结合实际需求，设计数据库表结构。

例如，可以设计联系人表（contact）和通讯录表（address_book），其中联系人表中包含联系人姓名（name）、联系人电话（phone）、联系人地址（address）等字段，通讯录表中包含对应联系人的主键ID和通讯录所属人的信息。

3.2 创建Spring Boot项目

使用Spring Initializr创建一个基于Spring Boot的Maven项目。

3.3 配置数据库

在application.properties中配置数据库相关信息，如数据库名称、用户名和密码等。

3.4 创建实体类和DAO层

创建实体类和DAO层，用于操作联系人和通讯录等信息。

3.5 创建RESTful API

使用Spring Boot提供的注解创建RESTful API，用于实现添加、删除、修改、查看联系人及通讯录信息。

例如，可以使用@Api和@ApiOperation注解来为api添加文档，如下所示：

@RestController
@RequestMapping("/addressbook")
@Api(tags = "通讯录操作接口")
public class AddressBookController {

    @Autowired
    private AddressBookService addressBookService;

    @PostMapping("/addContact")
    @ApiOperation(value = "添加联系人", notes = "添加通讯录中的联系人信息")
    public ResultDTO<String> addContact(ContactDO contactDO) {
        addressBookService.addContact(contactDO);
        return ResultDTO.success("添加成功");
    }

    @GetMapping("/{id}")
    @ApiOperation(value = "查看联系人", notes = "根据ID查看通讯录中的联系人信息")
    public ResultDTO<ContactDO> getContactById(@PathVariable("id") Long id) {
        return ResultDTO.success(addressBookService.getContactById(id));
    }

    //...其他接口
}

3.6 创建Vue.js前端页面

使用Vue.js创建一个前端页面，可以获取用户输入的信息并发送请求。

例如，可以创建一个表单组件（ContactForm）用于添加联系人，代码如下所示：

<template>
  <div class="container">
    <form @submit.prevent="addContact">
      <div class="form-group">
        <label for="name">姓名</label>
        <input type="text" class="form-control" v-model="name" placeholder="请输入姓名">
      </div>
      <div class="form-group">
        <label for="phone">电话</label>
        <input type="text" class="form-control" v-model="phone" placeholder="请输入电话">
      </div>
      <div class="form-group">
        <label for="address">地址</label>
        <input type="text" class="form-control" v-model="address" placeholder="请输入地址">
      </div>
      <button type="submit" class="btn btn-primary">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'ContactForm',
  data () {
    return {
      name: '',
      phone: '',
      address: ''
    }
  },
  methods: {
    addContact () {
      // 发送添加联系人的请求
      const params = {
        name: this.name,
        phone: this.phone,
        address: this.address
      }
      this.$http.post('/addressbook/addContact', params)
        .then(response => {
          alert('添加成功')
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

<style scoped>
.container {
  margin: 20px;
}
</style>

3.7 整合前后端

最后，在前端页面中引入刚刚创建的表单组件，将页面与后端接口整合起来。

例如，在App.vue中引入ContactForm组件：

<template>
  <div>
    <contact-form />
  </div>
</template>

<script>
import ContactForm from './components/ContactForm.vue'

export default {
  name: 'App',
  components: {
    ContactForm
  }
}
</script>

4. 示例说明

4.1 示例一

【操作】用户在前端页面中填写联系人信息并点击添加按钮。

【结果】发送添加联系人的请求，后端接收请求并将联系人信息添加到数据库中。返回成功消息并在数据库中更新联系人表信息。

4.2 示例二

【操作】用户在前端页面中查看联系人列表，点击某一行所在的联系人信息。

【结果】发送查看联系人的请求，后端接收请求并查询指定ID的联系人信息。通过ResultDTO将查询结果返回至前端页面，在前端页面中显示联系人的详细信息。