Assignment 5
Frontend: Vue.js Interface
The frontend provides a user-friendly interface for managing users, including functionalities like
searching, editing, deleting, and paginating through user data. It also includes real-time feedback for
user actions.
Key Features of the Frontend
1. User Search and Filtering
Search Input: Users can search by username or email using a text input field.
Filtering Logic: As the user types in the search field, the list of users is dynamically filtered based
on matching username or email.
2. User Table
Display: A table lists all users with columns for ID, username, email, age, and gender.
Actions:
Edit Button: Opens a modal where the user’s details can be updated.
Delete Button: Prompts the user to confirm deletion before removing the user.
3. Pagination
The user data is paginated, allowing navigation between pages of users. Users are displayed 10
per page.
The fetchUsers() method dynamically retrieves the current page's data from the backend using
Axios.
4. Edit Modal
Pre-filled Data: The selected user’s details are pre-filled in a form within a modal.
Update Logic: Users can modify fields like username, email, age, and gender. The changes are
sent to the backend via an API call.
Form Validation: All fields are validated to ensure no invalid data is submitted.
5. Delete Confirmation
SweetAlert2 Integration: Provides a visually appealing modal to confirm deletion.
Once confirmed, the user is removed from the list both on the UI and backend.
6. Error Handling
Any error encountered during API calls (fetch, update, or delete) is displayed as a message to the
user.
Ensures the system provides feedback if operations fail (e.g., "Failed to update user" or "Failed to
fetch users").
Backend: Java with MyBatis Plus
The backend provides the API that handles user data operations. It is built using Java with MyBatis Plus
for database management.
Key Features of the Backend
1. User Search by Username or Email
Method: searchUser(String usernameOrEmail)
Description: This method searches for a user by either username or email using a query
wrapper. If a match is found, the user’s data (excluding the password for security) is returned.
2. Get All Users
Method: getAllUsers()
Description: Retrieves a list of all users from the database. Passwords are excluded for security
before the data is sent to the frontend.
3. Update User Information
Method: updateUserInfo(Long userId, Userinfo updatedUser)
Description: This method updates a user’s details (username, email, gender, age) based on their
ID. The password remains unchanged to ensure security.
4. Delete User by ID
Method: deleteUserById(Long userId)
Description: Deletes a user from the database based on their ID. A success or failure response is
returned depending on the result of the operation.
5. Pagination for Users
Method: getUsersWithPagination(int page, int size)
Description: Implements pagination by fetching a specified page of users. The method uses
MyBatis Plus’s pagination feature to limit the number of users retrieved in each request.
API Integration with Frontend
The backend is integrated with the frontend through RESTful APIs that handle CRUD (Create,
Read, Update, Delete) operations.
Endpoints:
GET /userinfo/getPages: Fetch paginated users.
PUT /userinfo/update/{userId}: Update user details.
DELETE /userinfo/delete/{userId}: Delete a user by ID.
Screen Shots:
