First assignment--832201206_LiuZhe

[832201206刘喆]

Table of Contents

1.Course Assignment Requirements

2.PSP Table

3.Final Product Presentation

3.1Functionality Demonstration

4Design and Implementation Process

4.1System Architecture

4.2Database Design

4.3Functional Implementation

5Code Explanation

Frontend Code

Backend Code

6Personal Journey and Learnings

Course Assignment Requirements

Course Name	Contact Management System
Assignment Requirements	Implement a contact management system with front-end and back-end separation, including adding, modifying, and deleting contacts
Objectives of This Assignment	Master front-end and back-end separation development, database operations, and basic web development frameworks
Other References	https://github.com/BYaoKSYao/Contacts

PSP Table

Module	Estimated Time	Actual Time	Remarks
Frontend Page Development	4 hours	5 hours
Backend API Development	6 hours	7 hours	Encountered database connection issues
Functional Testing	2 hours	3 hours	Testing covered all features
Documentation Writing	1 hour	2 hours	Including blog and code comments

Final Product Presentation

Functionality Demonstration

Below are the main functionalities of the system, including adding, modifying, and deleting contacts.

Main interface：

Adding a contact：

 

 

Editing a contact

 

 

 

 

 Deleting a contact

 

 

 

Design and Implementation Process

System Architecture

The system adopts a front-end and back-end separation architecture, with the front-end using the Vue.js framework, the back-end using the Express.js framework, and the MySQL database.

Database Design

A table named testout is created in the database, containing ID, name, age, phone fields.

Functional Implementation

• Add Contact: Store new contact information in the database through POST requests.
• Modify Contact: Update the contact information of a specified ID through POST requests.
• Delete Contact: Delete the contact information of a specified ID through DELETE requests.

Code Explanation

Frontend Code

Below is a code snippet from Vue.js for adding a contact:

async data_upload() {
  if (this.available) {
    try {
      const res = await axios.post('http://127.0.0.1:3000/post', {
        ID: '',
        name: this.name,
        age: this.age,
        phone: this.phone
      });
    } catch (error) {
      console.error(error);
    }

    this.name = ''
    this.age = ''
    this.phone = ''
    this.fetch_data()
  }
}

 

Backend Code

Below is a code snippet from Express.js for handling add contact requests:

router.post('/post', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  console.log(req.body);
  sql_function.post_sql((err, results) => {
    if (err) {
      console.error('Error fetching data');
      res.status(500).send('Internal Server Error');
    } else {
      console.log("Storage successful");
      res.send("Storage successful");
      console.log('-------------------------------------');
    }
  }, req.body);
});

 

Personal Journey and Learnings

Through this assignment, I learned about the development model of front-end and back-end separation, mastered the use of Vue.js and Express.js, and how to operate the MySQL database. During the development process, I encountered some challenges, such as database connection issues and data interaction between the front-end and back-end, but I successfully resolved these issues by consulting materials and continuous attempts. This assignment not only improved my technical skills but also exercised my problem-solving abilities.