Project Description	Content
Course Name	2401_MU_SE_EE308
Team Name	YYDS
Project Requirement	Create an address book with different user contacts
Project Goal	Improve teamwork skills and learn coding knowledge
Other References	None
Student Number	832201325HuangBohui ；832201306SuJingxuan

GitHub Submit Log

1. Project Overview 📋

Bestie CONTACT is a personal contact management system developed using the SSM (Spring + Spring MVC + MyBatis) framework and Vue.js frontend framework. The project aims to help users efficiently manage personal contact information and provide a favorite feature to quickly access important contacts. The system is divided into two roles: admin and regular user. Admins can manage all users and contact information, while regular users can only manage their own contacts.

2. Technology Stack 🛠️

Backend: Spring + Spring MVC + MyBatis
Frontend: Vue.js + Element UI + Axios
Database: MySQL
Other: Hutool (for Excel operations), PageHelper (for pagination)

3. Project Address 🔗

GitHub: https://github.com/15078012385/contact-system
Live URL: http://182.160.5.148:8080/view/h_version/login.html

4. Function Implementation Ideas 💡

4.1 User Management 👤

The user management module is responsible for user registration, login, and personal information modification. Users can create new accounts through the registration function and access the system through the login function. After logging in, users can modify their personal information such as passwords and email addresses.

4.2 Contact Management 📇

The contact management module provides a rich set of features, including adding, editing, and deleting contact information, batch deleting contacts, paging querying the contact list, and favoriting important contacts. Users can also export their contact list to an Excel file or import contact information in bulk by uploading an Excel file.

4.3 Admin Functionality 🛡️

The admin functionality module is primarily for system administrators, providing user management, role management, contact management, and viewing favorite contact lists. Admins can view, edit, and delete all users in the system, manage user roles and permissions, view and edit all users' contact information, and view all users' favorite contact lists.

4.4 AOP Logging 📝

The system implements logging functionality using AOP (Aspect-Oriented Programming). Detailed information for each request, including the request URL, request method, request parameters, request body, request IP address, request time, request headers, response body, and time taken, is recorded. Log information is output in JSON format for easy subsequent analysis and processing.

4.5 Global Exception Handling 🚨

The system designs a global exception handling mechanism to capture and handle various exception situations. Common exceptions include BaseException, UserNotFoundException, UnauthorizedException, and BusinessException. Exception information is logged and returned to the frontend with user-friendly error messages.

4.6 Token Interceptor 🔐

The system implements user authentication and authorization using JWT (JSON Web Token). Each request must carry a valid JWT token; otherwise, it will be intercepted and return an unauthorized error. The interceptor extracts the token from the request header, verifies its validity, and sets the user information in the request context for subsequent processing.

4.7 Frontend Permission Control 🔒

The frontend implements menu and function permission management through the permission control module. Menu items and functions are dynamically displayed and hidden based on the user's role. The permission control module defines the permission list for different roles, and the frontend dynamically generates menus and function buttons based on the current user's role.

5. Function Screenshots And GIF 📸

5.1 Login Page 🖥️

5.2 Bookmark contacts ⭐

5.3 Add multiple contact methods ➕

5.4 Import and Export📤

5.5 Other Screenshots 📤

6. Team Roles 👥

Member	Responsibilities	Work Percentage	Challenges and Solutions
Huang Bohui	Responsible for backend development and database design, including Spring, MyBatis integration, API development, and MySQL table structure design and optimization.	50%	Challenge 1: Encountered issues with capturing request and response bodies in `SystemLogAOP`. Solution: Created a custom `RepeatedlyReadRequestWrapper` class to allow multiple reads of the request body, resolving the issue. Captured the response body using `objectMapper.writeValueAsString(result)` in the `doAround` method. Challenge 2: Found that some tables had too many fields, leading to degraded query performance. Solution: Split the table structure, moving less frequently used fields to separate tables and using foreign keys to link them, optimizing query performance.
Su Jingxuan	Responsible for frontend development and testing deployment, including Vue.js, Element UI integration, page design, and functional, performance testing, and online deployment.	50%	Challenge 1: Encountered component style conflicts when integrating Vue.js and Element UI, causing layout issues. Solution: Adjusted CSS style priorities and used Scoped CSS to limit the scope of styles, resolving the conflict. Challenge 2: Found it difficult to write test cases for certain complex interaction operations during the functional testing phase. Solution: Introduced Cypress as a frontend automation testing tool, wrote detailed test cases, and used mock data to simulate complex interaction scenarios, improving test coverage.

7. PSP Table

7.1 Personal Software Process Stages (Huang Bohui )

PSP Stages	Estimated Time (hours)	Actual Time (hours)
Planning	1	1
Development	4	4
• Backend Development	2	2
• Database Design	1	1
Test	1	1.5
Deploy	1	0.5
Sum	10	10

7.2 Personal Software Process Stages (Su Jingxuan )

PSP Stages	Estimated Time (hours)	Actual Time (hours)
Planning	1	1
Development	3	3
• Frontend Development	2	2
Test	1	1
Deploy	1	1
Sum	8	8

8. Project Summary 🚀

Bestie CONTACT project achieves efficient management of user contact information through a monolithic project architecture. The project not only provides a rich set of features but also focuses on user experience, ensuring that users can easily get started. Team members each played their part, working closely together to ensure the project was completed on time and to a high standard. We hope this project will bring convenience to users and will be continuously optimized and improved in future iterations.

...全文