Course for this Assignment	EE308
Where are the requirement for this assigment	First assignment-- front-end and back-end separation contacts programming
Name and student ID	丁钦烨(Qinye Ding) 832202201
The objective of this assignment	1. Front-end and Back-end Separation;2. Deployment and Functionality;3. Code Quality and Documentation
Front-end repository on GitHub	https://github.com/A-Piao-ovo/-
Back-end repository on GitHub	https://github.com/A-Piao-ovo/houduan

1 Assignment
For this assignment, students are required to create a contact list using a front-end and back-end separation technology and meet the following basic requirements.

1.1 Basic Functions

1.1.1 Add:
Users can add new contact information through certain interactions.
1.1.2 Modify:
Users can modify existing contact information through certain interactions.
1.1.3 Delete:
Users can delete existing contact information through certain interactions
1.3 Documentation and Submission

Students are required to document their coding standards, development process, and project structure. The assignment must be submitted via GitHub, with separate repositories for the front end and back end, and a blog post detailing the assignment, development journey, and code explanations.
2 PSP Table

Activity	Comments	Estimated Time	Actual Time
planning	Overall plan of this project	1h	1h
Preparation(learning)	download IDEA, Vue etc	4h	4h
Demand Analysis	Determine the requirements of the project and the functions that can be achieved	1h	1.5h
Architecture Design	Design a frontend-backend separated architecture with Vue for the frontend and Spring Boot for the backend	1h	1h
API Design	Create excuses for the front and back ends, and correlate the front and back end designs	10h	11h
Database Design	Create the required classes and bind the back end to the database	15h	20h
Test	Test whether the project meets expectations	1h	1.5
Modify	Correct errors and optimize code	4h	6h
Total		37h	46h

3 Presentation of the Finished Product

4 Design and Implementation Process

4.1 Requirements Analysis

Functional Requirements: Implement the functions of adding, search, editing, and deleting contact information.
User Interface: The interface should be user-friendly, easy to operate, and compatible with mainstream browsers.
Tools Selection
Frontend: Use the Vue framework to build the user interface.
Backend: Utilize the Spring Boot and Maven framework.
Database: Choose MySQL to store contact data, use Navicat to visualize management data, ensuring data persistence and efficient querying.

4.2 Architectural Design:

Frontend Architecture: Develop using a component-based approach, leveraging the Element UI components to aid in development.
Backend Architecture: Study and implement backend code for CRUD (Create, Read, Update, Delete) operations.
Database Design: Design a reasonable table structure, including a contacts table (with fields such as ID, name, and phone number), and consider indexing to optimize search performance.

4.3 Project Implementation Process

·Environment setup and configuration:
Download Node.js to set up the Vue front-end environment, and download npm to get the front-end up and running.
Download IDEA and build the Spring Boot framework into it.
Download Mysql and Navicat to prepare for the subsequent database setup

·Frontend Development:
Design and create user interfaces and design user interaction logic.
Set the callback function to the back end and display the back end data.

·Backend Development:
Receive front-end requirements, access database data and return data to the front-end

·Database Design and Implementation:
Design the database table structure based on requirements analysis, create and initialize the database.
Write code to handle cross-origin resource sharing (CORS) and implement CRUD operations for data.
Optimize database performance, such as by adding indexes and using transactions.

·Testing and Debugging:
Test that the code is running correctly, and optimize the code

5 Code Description

5.1 Front-end code

5.1.1 System home page

<template>
  <div class="container">
    <h1>联系人管理</h1>
    <div class="button-container">
      <button @click="showAddModal">添加联系人</button>
    </div>
    <table>
      <thead>
      <tr>
        <th>姓名</th>
        <th>电话</th>
        <th>年龄</th>
        <th>性别</th>
        <th>地址</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="contact in contacts" :key="contact.id">
        <td>{{ contact.name }}</td>
        <td>{{ contact.phone }}</td>
        <td>{{ contact.age }}</td>
        <td>{{ contact.gender }}</td>
        <td>{{ contact.address }}</td>
        <td>
          <button @click="editContact(contact)">修改</button>
          <button @click="deleteContact(contact.id)">删除</button>
        </td>
      </tr>
      </tbody>
    </table>
    <modal v-if="showModal" @close="closeModal">
      <template #header>
        <h2>{{ editMode ? '修改联系人' : '添加联系人' }}</h2>
      </template>
      <template #body>
        <div>
          <label>姓名:</label>
          <input v-model="currentContact.name" />
          <label>电话:</label>
          <input v-model="currentContact.phone" />
          <label>年龄:</label>
          <input type="number" v-model="currentContact.age" />
          <label>性别:</label>
          <input v-model="currentContact.gender" />
          <label>地址:</label>
          <input v-model="currentContact.address" />
        </div>
      </template>
      <template #footer>
        <div class="button-group">
          <button @click="saveContact">确认</button>
          <button @click="closeModal">取消</button>
        </div>
      </template>
    </modal>
  </div>
</template>

5.1.2 TypeScript scripting section

<script>
import axios from 'axios';
import Modal from './AppModal.vue';

export default {
  components: { Modal },
  data() {
    return {
      contacts: [],
      currentContact: { name: '', phone: '', age: null, gender: '', address: '' },
      showModal: false,
      editMode: false,
    };
  },
  methods: {
    fetchContacts() {
      axios.get('/api/contacts').then(response => {
        this.contacts = response.data;
      });
    },
    showAddModal() {
      this.currentContact = { name: '', phone: '', age: null, gender: '', address: '' };
      this.editMode = false;
      this.showModal = true;
    },
    editContact(contact) {
      this.currentContact = { ...contact };
      this.editMode = true;
      this.showModal = true;
    },
    deleteContact(id) {
      axios.delete(`/api/contacts/${id}`).then(() => {
        this.fetchContacts();
      });
    },
    saveContact() {
      const method = this.editMode ? 'put' : 'post';
      const url = this.editMode ? '/api/contacts' : '/api/contacts';

      axios[method](url, this.currentContact).then(() => {
        this.closeModal();
        this.fetchContacts();
      });
    },
    closeModal() {
      this.showModal = false;
    }
  },
  mounted() {
    this.fetchContacts();
  }
};
</script>

5.1.3 Style

<style scoped>
/* 页面主样式 */
h1 {
  text-align: center;
  font-size: 2rem;
  margin: 20px 0;
  color: #333;
}

/* 表格容器 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* 表格样式 */
table {
  width: 50vw; /* 设置表格宽度为视口宽度的一半 */
  margin: 20px auto; /* 表格水平居中 */
  border-collapse: collapse;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

th, td {
  padding: 12px;
  border: 1px solid #ccc;
  text-align: center;
  word-wrap: break-word;
  white-space: nowrap; /* 防止内容换行 */
  overflow: hidden; /* 隐藏溢出文本 */
  text-overflow: ellipsis; /* 使用省略号表示溢出文本 */
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

tbody tr:hover {
  background-color: #f5f5f5;
}

/* 媒体查询 */
@media (max-width: 768px) {
  table {
    display: block; /* 在小屏幕上使用块布局 */
    overflow-x: auto; /* 超出部分水平滚动 */
    white-space: nowrap; /* 避免单元格内容换行 */
  }

  th, td {
    display: block; /* 每个单元格为块元素 */
    text-align: right; /* 文字右对齐 */
  }

  th {
    text-align: left; /* 表头文字左对齐 */
  }

  tbody tr {
    margin-bottom: 10px; /* 行间距 */
    border: none; /* 移除行的边框 */
  }
}


/* 按钮容器样式 */
.button-container {
  display: flex; /* 使用 Flexbox 排列按钮 */
  justify-content: center; /* 水平居中 */
  margin-bottom: 20px; /* 下方外边距 */
}

/* 按钮组样式 */
.button-group {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  gap: 10px; /* 按钮之间的间距 */
  flex-wrap: nowrap; /* 防止换行 */
  max-width: 100%; /* 最大宽度限制 */
}

/* 按钮样式 */
button {
  padding: 10px 15px; /* 内边距 */
  background-color: #007bff; /* 按钮背景颜色 */
  color: white; /* 按钮字体颜色 */
  border: none; /* 去掉边框 */
  border-radius: 5px; /* 圆角 */
  cursor: pointer; /* 鼠标悬停时的指针样式 */
  transition: background-color 0.3s; /* 背景颜色过渡 */
  margin: 0 5px; /* 按钮间距 */
  font-size: 1rem; /* 字体大小 */
}

button:hover {
  background-color: #0056b3; /* 鼠标悬停时背景颜色变化 */
}



/* 输入框样式 */
input {
  width: 100%; /* 输入框宽度 */
  padding: 10px; /* 内边距 */
  margin: 10px 0; /* 上下外边距 */
  border: 1px solid #ccc; /* 边框 */
  border-radius: 5px; /* 圆角 */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* 内部阴影 */
}

input:focus {
  border-color: #007bff; /* 聚焦时边框颜色 */
  outline: none; /* 去掉默认聚焦轮廓 */
}

.button-group {
  display: flex; /* 使用 flexbox 布局 */
  justify-content: center; /* 水平居中 */
  gap: 10px; /* 按钮之间的间距 */
}

button {
  padding: 10px 20px; /* 增加按钮内边距 */
  border: none; /* 去掉边框 */
  border-radius: 5px; /* 圆角 */
  background-color: #007bff; /* 按钮背景色 */
  color: white; /* 文字颜色 */
  cursor: pointer; /* 鼠标指针效果 */
  transition: background-color 0.3s; /* 背景色过渡效果 */
}

button:hover {
  background-color: #0056b3; /* 鼠标悬停时背景色 */
}

</style>

5.2 back-end code

import com.example.demo.entity.Contact;
import com.example.demo.service.ContactService;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

@RestController
@RequestMapping("/api/contacts")
public class ContactController {

    @Resource
    private ContactService contactService;

    @GetMapping
    public List<Contact> getAllContacts() {
        return contactService.getAllContacts();
    }

    @GetMapping("/{id}")
    public Contact getContact(@PathVariable Integer id) {
        return contactService.getContactById(id);
    }

    @PostMapping
    public void addContact(@RequestBody Contact contact) {
        contact.setId(null); // 确保不传入 id
        contactService.addContact(contact);
    }

    @PutMapping
    public void updateContact(@RequestBody Contact contact) {
        contactService.updateContact(contact);
    }

    @DeleteMapping("/{id}")
    public void deleteContact(@PathVariable Integer id) {
        contactService.deleteContact(id);
    }
}

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

@Data
@TableName("contacts")
public class Contact {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String name;
    private String phone;
    private Integer age; 
    private String gender;
    private String address;
}

6 Personal Journey and Learnings

Through this project of separating the front and back ends, I have a deep understanding of the operation law of the front and back ends of the web page, can make some web pages, and know the underlying law of the back end.

...全文