Contacts Management System - Frontend & Backend

Course for This Assignment

Table of Contents

1. GitHub Repositories
2. PSP Table
3. Final Product Showcase
4. Design and Implementation Process
5. Key Code Explanation
6. Personal Journey and Learnings

GitHub Repositories

• Frontend Repository: contacts-frontend
• Backend Repository: contacts-backend

PSP Table

Total Time:

• Estimated: 1485 minutes
• Actual: 1400 minutes

Final Product Showcase

Here are the key functionalities of the contacts management system, demonstrated with screenshots and explanations.

1. Homepage

The main page of the contacts management system, where users can see the list of contacts.

2. Add Contact

Users can click the "Add" button to create a new contact by entering the name and phone number.

3. Edit Contact

Users can modify contact details by clicking the "Edit" button. The changes are saved to the database.

4. Delete Contact

Contacts can be deleted by clicking the "Delete" button, and the list is updated accordingly.

5. Table Structure Diagram

The structure of table based on Mysql.

Design and Implementation Process

1. Frontend Design

The frontend was developed using WeChat Mini Program. The application has three main functionalities:

Add Contacts

In brief, when the "Add" button is clicked, a pop-up window appears. After the user inputs data in the window and submits it, the data is sent to the backend database through an API.

Modify Contacts

When the "Edit" button is clicked, a request is sent to the backend to retrieve the name and phone number of the target being edited. A pop-up window appears, with the original information displayed in the placeholders. After the user completes the new information and submits it, the updated information is saved to the database.

Delete Contacts

After clicking the "Delete" button, the corresponding ID is sent to the backend, and the entry with that ID is deleted from the database.

We used a minimalistic design to ensure the app is user-friendly and intuitive. The contact list is displayed on the main page, with buttons to add, edit, or delete a contact.

UI Flow:

1. Homepage: Displays the list of contacts.
2. Add Contact Modal: Allows users to enter contact information.
3. Edit Contact Modal: Enables users to update existing contact details.

2. Backend Design

The backend is developed using Node.js and Express, with a MySQL database to store the contact details. The backend provides RESTful APIs for the frontend to interact with:

• GET /contacts: Retrieves the list of contacts.
• POST /contacts: Adds a new contact.
• PUT /contacts/:id: Updates an existing contact.
• DELETE /contacts/:id: Deletes a contact.

The API endpoints were designed to handle requests from the frontend and interact with the MySQL database for persistent data storage.

Key Code Explanation

Frontend

1. Add Contact

addContact() {
  const newContact = this.data.newContact;
  if (!newContact.name || !newContact.phone) {
    wx.showToast({
      title: '请填写完整信息',
      icon: 'error'
    });
    return;
  }

  wx.request({
    url: `${this.data.baseUrl}/contacts`,
    method: 'POST',
    data: newContact,
    success: (res) => {
      this.setData({
        contacts: [...this.data.contacts, res.data],
        newContact: { name: '', phone: '' },  // 清空输入框
        showModal: false
      });
      wx.showToast({
        title: '联系人已添加',
        icon: 'success'
      });
    },
    fail: (err) => {
      console.error('添加联系人失败', err);
    }
  });
}

Description: This function adds a new contact by sending a POST request to the backend. It checks if the required fields (name, phone) are filled. If the request is successful, the new contact is added to the list and displayed on the frontend.

2. Delete Contact

deleteContact(e) {
  const contactID = e.currentTarget.dataset.id;  // 获取点击的联系人ID
  wx.request({
    url: `${this.data.baseUrl}/contacts/${contactID}`,
    method: 'DELETE',
    success: () => {
      // 删除成功后更新本地联系人列表
      this.setData({
        contacts: this.data.contacts.filter(contact => contact.id !== contactID)
      });
      wx.showToast({
        title: '联系人已删除',
        icon: 'success'
      });
    },
    fail: (err) => {
      console.error('删除联系人失败', err);
      wx.showToast({
        title: '删除失败',
        icon: 'error'
      });
    }
  });
}

Description: This function sends a DELETE request to the backend to remove a contact. If successful, the contact is removed from the list on the frontend, and a success message is displayed.

3. Modify Contact

modifyContact() {
  const contactID = this.data.newContact.id;
  const updatedContact = this.data.newContact;
  if (!updatedContact.name || !updatedContact.phone) {
    wx.showToast({
      title: '请填写完整信息',
      icon: 'error'
    });
    return;
  }

  wx.request({
    url: `${this.data.baseUrl}/contacts/${contactID}`,
    method: 'PUT',
    data: updatedContact,
    success: (res) => {
      this.getContacts();  // 更新联系人列表
      this.hideModifyModal();
      wx.showToast({
        title: '联系人已更新',
        icon: 'success'
      });
    },
    fail: (err) => {
      console.error('更新联系人失败', err);
      wx.showToast({
        title: '更新失败',
        icon: 'error'
      });
    }
  });
}

Description: This function updates the contact's details by sending a PUT request to the backend with the updated contact information. If the request succeeds, the contact list is refreshed, and a success message is shown.

Backend

4. Get Contact List

app.get('/contacts', (req, res) => {
  const query = 'SELECT * FROM contacts';
  connection.query(query, (err, results) => {
    if (err) {
      return res.status(500).json({ message: '无法获取联系人列表' });
    }
    res.json(results);
  });
});

Description: This API endpoint retrieves the entire contact list from the MySQL database. It sends a query to the database and returns the results as JSON.

5. Add Contact

app.post('/contacts', (req, res) => {
  const newContact = req.body;
  const query = 'INSERT INTO contacts (name, phone) VALUES (?, ?)';
  connection.query(query, [newContact.name, newContact.phone], (err, results) => {
    if (err) {
      return res.status(500).json({ message: '添加联系人失败' });
    }
    res.json({ id: results.insertId, ...newContact });
  });
});
Description: This API endpoint receives a POST request from the frontend to add a new contact. It inserts the contact details into the MySQL database and returns the newly created contact with its ID.

#### 6. Delete Contact
```javascript
app.delete('/contacts/:id', (req, res) => {
  const contactID = req.params.id;
  const query = 'DELETE FROM contacts WHERE id = ?';
  connection.query(query, [contactID], (err, results) => {
    if (err) {
      return res.status(500).json({ message: '删除联系人失败' });
    }
    res.json({ message: '联系人已删除' });
  });
});

Description: This API endpoint deletes a contact from the MySQL database based on the provided contact ID. It sends a DELETE query to the database and responds with a success message.

7. Modify Contact

app.put('/contacts/:id', (req, res) => {
  const contactID = req.params.id;
  const updatedContact = req.body;
  const query = 'UPDATE contacts SET name = ?, phone = ? WHERE id = ?';
  
  connection.query(query, [updatedContact.name, updatedContact.phone, contactID], (err, results) => {
    if (err) {
      return res.status(500).json({ message: '更新联系人失败' });
    }
    res.json({ message: '联系人已更新' });
  });
});

Description: This API endpoint updates an existing contact's details in the MySQL database. It receives a PUT request with the updated data and sends a query to update the corresponding contact.

Personal Journey and Learnings

Through this project, I gained practical experience in full-stack development. Here are some of the key takeaways:

1. RESTful API Design: I learned how to structure API endpoints to manage data between frontend and backend effectively.
2. MySQL Database Management: This was my first time setting up a database schema for a real-world application. I became more comfortable writing SQL queries and managing database connections.
3. WeChat Mini Program Development: I improved my skills in developing user interfaces using WeChat Mini Program. Handling user inputs and managing frontend-backend communication was an enriching experience.
4. Debugging: Encountering issues such as incorrect API calls and database connection problems taught me how to use tools like Postman and logging for efficient debugging.

Overall, this project helped me bridge the gap between theory and practice, particularly in connecting a frontend to a backend via REST APIs.

What I Want To Say

As a complete beginner in full-stack development, my understanding of frontend and backend work was initially limited to what I had learned from textbooks. Through this assignment, I managed to develop a simple WeChat Mini Program on my own, including deploying the backend to the cloud. Although I only implemented the basic functions required by the assignment, I still feel a great sense of accomplishment. I will continue to improve the contact management assignment and keep moving forward

Conclusion

This blog highlights the development process of the Contacts Management System, covering both frontend and backend aspects. Through the implementation of RESTful APIs and full-stack development, I successfully built a functional application that demonstrates CRUD operations.