EE308 First assignment-- front-end and back-end separation contacts programming-优快云博客

832302108王楷瑜

代码仓库地址

一、作业描述

二、PSP 记录表

三、成品功能演示

四、设计与实现流程

五、项目总结

项目仓库地址

前端仓库：前端代码

后端仓库：后端代码

网站地址：http://localhost:5173/

此次次作业旨在通过学习前后端代码并灵活运用，开发实现简易的通讯录系统，实现联系人的添加、删除与编辑等基础功能。作业采用前后端分离架构确保通信顺畅，前端基于Vue框架，通过HTML构建联系人信息的输入表单、列表展示及编辑删除界面；后端使用Spring Boot框架，整合Spring Data JPA与MySQL数据库存储数据，提供RESTful API接口并配置跨域支持，实现前后端的流畅交互。

二、PSP记录表

任务内容	预估耗时(h)	实际耗时(h)
需求分析与规划	3	2
前端页面设计	3	2
后端API设计	3	2
核心功能开发	3	2
前后端联调	3	2
测试与 Bug 修复	3	2
代码优化	3	2
部署上线	3	2
文档撰写	3	2
总计	27	18

三、成品功能演示

首页

添加联系人

添加失败（未输入正确的手机号）

添加成功

编辑

删除

删除成功

四、设计与实现流程

选择 Vue 前端框架搭建用户交互平台，后端采用 Spring Boot 框架与 Java 语言提供 RESTful API 接口服务，处理前端传输的数据，同时通过 Spring Data JPA 整合 MySQL 数据库实现数据持久化存储，无需额外配置轻量数据库，构建前后端分离架构的通讯录系统。

前端设计思路：框架与语法：采用 Vue 3 框架，基于 Composition API 与 `<script setup>` 语法组织代码，提升组件逻辑的可读性与维护性。路由管理：使用 vue-router 实现页面跳转，配置 `/contacts`（列表页）、`/contacts/add`（添加页）、`/contacts/edit/:id`（编辑页）等路由，确保页面间切换流畅。核心组件设计： - ContactList 组件：展示联系人列表，包含空状态提示（无数据时显示）、联系人卡片（展示姓名、电话等信息）及添加/编辑/删除按钮。 - AddContact 组件：通过表单收集联系人信息（姓名、手机号、邮箱、地址），实现前端实时校验（如手机号格式、非空检查），提交后调用后端接口完成添加。 - 公共交互：使用原生 JavaScript 实现弹窗提示（操作结果反馈）、路由跳转（完成操作后返回列表页）。数据交互：封装 axios 调用后端 API 接口，实现联系人数据的加载、添加、编辑、删除等操作，同时处理请求异常（如网络错误、后端返回的校验失败信息）。样式实现：采用 scoped CSS 隔离组件样式，通过 Flex、Grid 布局构建响应式界面，区分按钮状态（正常/ hover / 禁用）及错误提示样式，提升用户体验。核心逻辑：通过双向绑定（v-model）实现表单数据与组件状态的同步，利用 v-for 循环渲染联系人列表，结合条件渲染（v-if）处理空状态等场景，确保界面与数据状态一致。

后端设计思路：

服务器框架：Spring Boot（基于 RESTful API 接口服务）数据访问：Spring Data JPA（简化数据库操作）数据库：MySQL（持久化存储联系人数据）跨域处理：@CrossOrigin 注解（允许前端前端域名访问限制）数据校验：后端请求参数合法性校验（确保姓名、手机号等字段符合规则）

后端通过 Spring Boot 自动后端服务，借助 Spring Data JPA 与 MySQL 交互实现数据的增删改查，同时配置跨域配置保障前端 Vue 项目的正常请求，无需依赖轻量 JSON 数据库，直接基于关系型数据库完成数据存储与管理。

五、项目总结

首先实现了基于 Vue 3 的前端界面与 Spring Boot 后端的协同开发，使用 Composition API 与 `<script setup>` 语法实现组件逻辑的高效管理，通过前端表单验证（如手机号格式校验、非空检查）结合后端参数合法性校验（姓名、手机号规则验证），确保用户输入数据的合法性。拓展了通讯录的核心功能，添加了操作结果提示（成功/失败弹窗）、删除确认对话框、加载状态等交互元素，提升了用户体验。后端采用 Spring Data JPA 与 MySQL 实现数据持久化，无需依赖轻量数据库，简化了数据管理流程。最终实现了一个功能完整（支持联系人添加、删除、编辑、列表展示）、交互流畅的通讯录应用，代码结构清晰（前端组件化、后端分层设计），易于维护和扩展。但项目仍存在些许不足：界面风格较为简洁，缺乏更丰富的视觉设计；功能上以基础操作为主，未拓展分组管理、搜索筛选等进阶功能。通过本次开发，深入掌握了前后端分离架构的实现方式，学会了如何通过 RESTful API 接口实现跨域数据传输，理解了前端表单数据与后端数据库的交互逻辑，同时实践了 Vue 路由管理、组件通信及 Spring Boot 接口开发等核心技术，为后续复杂应用开发奠定了基础。