First Assignment - 832201220 - Shihao Zhou

[832201220周诗皓]

Course for This Assignment	2401_MU_SE_FZU
Student ID	FZU 832201220 MU 22125906
Assignment Requirements	Create a contact management system that features distinct front-end and back-end components
Objectives of This Assignment	Improve self-directed learning and gain essential skills in software development
Other References	Java毕业设计基于SpringBoot+Vue前后端分离的前后端分离的通讯录项目的设计与实现+部署文档+全部资料（优秀项目）资源-CSDN文库     2021最新阿里代码规范（前端篇）-阿里云开发者社区

 

1.Assignment Introduction

1.1 Project Objectives and Requirements

This project aims to build a contact management system with a fully decoupled frontend and backend architecture, enabling core functionalities like adding, updating, and deleting contacts. By hosting the project on a cloud server, users gain convenient access, promoting efficient contact management. This initiative serves as a robust test of frontend and backend development skills and enhances comprehension of essential workflows and technology stacks typical in modern web development.

The project leverages Vue.js for the frontend interface, Express.js for the backend, and MySQL as the database management system. The frontend presents a contact list and supports essential operations like adding, editing, and removing contacts, with all actions directly interfacing with the backend database, avoiding reliance on cached data. A primary focus is on achieving complete frontend-backend separation, which facilitates independent development, testing, and deployment by implementing API-based communication between the frontend and backend—an approach that improves both development efficiency and maintainability.

1.2 Git Repository Links and Coding Standards

Frontend Repository :832201220---Fronted/ at main · LongIslandIcedTeaaa/832201220---Fronted

Backend Repository:832201220---Backend/ at main · LongIslandIcedTeaaa/832201220---Backend

 

1.3 PSP table

PSP stage	Estimated Time	Actual time
Determine What I Need	1h	1h
Constitute Environment	2h	4h
Learing and Programming	10h	20h
Testing My Program	5h	10h
Total	18h	35h

Design and Implementation Process

Project Background

The need for effective contact management in daily life has led to the development of this contact management system. It provides basic CRUD operations and additional features to enhance user experience and management efficiency.

Project Significance

This project adopts a front-end and back-end separation architecture, allowing for flexible development and maintenance. It also deploys on the cloud, enabling data synchronization across devices.

Functional Structure Diagram

Setting up the development environment involves installing the Java Development Kit (JDK), Spring Boot framework, and MySQL database management system. Ensure all necessary software versions are compatible and configure environment variables. Create a MySQL database instance on a local or cloud server and design an appropriate database schema to store contact information, including the creation of a contact table with fields such as name, phone number, etc.

Development Environment Setup

1. Install JDK: Download and install the Java Development Kit version suitable for your operating system. After installation, set the JAVA_HOME environment variable and add the JDK's bin directory to the system PATH.

2. Install Spring Boot: Create a new Spring Boot project through Spring Initializr, selecting the required dependencies such as Spring Web, Spring Data JPA, and the MySQL driver. Download the project zip file and extract it, or directly create the project using an IDE like IntelliJ IDEA or Eclipse.

3. Install MySQL: Download and install the MySQL database server. During installation, set the root password for the database and create a new database for storing contact information.

4. Configure Database Schema: Create a new database in MySQL and design a table that includes fields for storing contact data such as name, phone number, etc.

Feature Implementation

Adding Contact Information

• Backend: The backend service implements a POST endpoint to handle HTTP requests from the frontend. This endpoint receives contact data in JSON format and persists it to a MySQL database through Spring Boot's Repository. The backend also verifies the integrity and consistency of the data to ensure there are no duplicate contact entries.

• Frontend: The frontend application, built with Vue.js and Element UI, provides forms for inputting new contact information. Before submission, the frontend performs data validation, such as checking if required fields are filled and if the email format is correct. After validation, the frontend uses the Axios library to send POST requests to the backend API with the contact data. Upon successful addition, the frontend retrieves the latest contact list from the backend and updates the display.

Deleting Contact Information

• Backend: The backend offers DELETE endpoints for individual contact deletion and POST endpoints for batch deletion of contacts. These endpoints perform database deletion operations based on the received ID or list of IDs.

• Frontend: The frontend includes a delete button next to each contact entry, which, when clicked, triggers a confirmation dialog using Element UI. After confirmation, the frontend collects the IDs of the contacts to be deleted and calls the backend's deletion endpoint. Post-deletion, the frontend removes the corresponding contact entries from the list.

Modifying Contact Information

• Backend: The backend implements a PUT endpoint to receive updated contact information. It searches for the corresponding record based on the ID provided in the request and updates the information accordingly.

• Frontend: The frontend provides an interface for editing contact information, displaying detailed information of the current contact, and allowing modifications. After the user completes the edits, the frontend collects the new data and sends a PUT request to the backend via Axios. Once the update is successful, the frontend displays the updated contact information.

Searching for Contact Information

• Backend: The backend implements a GET endpoint that receives search keywords and other pagination parameters, performs database queries, and returns a list of matching contacts. It should implement pagination logic to optimize performance when handling large data sets.

• Frontend: The frontend includes a search box. After the user inputs search criteria, the frontend calls the backend's search endpoint and displays the results in a list.

Paging of Contact List

• Backend: In addition to search functionality, the backend's GET endpoint should also accept page number and records per page parameters to return the specific page data requested by the user.

• Frontend: The frontend implements pagination controls at the bottom of the contact list, showing the current and total page numbers. When users click on page numbers or use pagination buttons, the frontend calls the backend endpoint to request data for the corresponding page and updates the list display.