First Assigment -- Front-end and Back-end Separation Contact -- 832201315 XinyangChen

832201315陈欣洋 2024-10-30 23:14:53

Course for This Assignment	2401_MU_SE_FZU
Assignment Requirements	First assignment-- front-end and back-end separation contacts programming-CSDN社区
Objectives of This Assignment	Design a contact with separated front and back ends
Other References	黑马程序员SpringBoot3+Vue3
Github Front-end Repository	2401_MU_SE_FZU_1stAssigment_Front_end: 832201315XinyangChen's First Assigment
Github Back-end Repository	2401_MU_SE_FZU_1stAssigment_Back_end: 832201315XinyangChen's First assignment

Catalogue:

1.Project Description

2.PSP Table

3.Presentation of the Finished Product

4.Design and Implementation Proces

5.Code Explanation

1.Project Description

The contact management system project implements several functions. Users can add contacts, enter information such as names and phone numbers, and store this information in a back-end database. The system allows you to modify and delete contacts. Click Modify or Delete to modify or delete a specified contact in the address book.
The front-end of this program uses html, css, JavaScript, node.js, vue and other technologies, the back-end uses Springboot and other technologies, and uses mysql as the database.

2.PSP Table

Personal Software Process Stages	Estimated Time（h）	Actual Time（h）
Develop project plans	1	1
Front-end interface and interaction design, back-end design, database design	4	5.5
Front-end development	6	8
Back-end development	10	12
MySQL Database setup	1	1
Integration testing	2	3
Project review and reflection	1	1
Sum	25	31.5

3.Presentation of the Finished Product

3.1 User interface

You can add, delete, modify, and view your contacts on this page.

3.2 Backend Functionality Implementation

servers:

mysql:

Add:

In the Add form, you can enter the name and phone number of the new contact, and then choose whether to save it or not.

Edit:

After clicking Edit on the right, you can modify the information of the selected contact.

Delete:

After clicking Delete on the right of the contact, the software will ask you to confirm whether to delete the contact. After clicking Confirm, the contact will be deleted, and vice versa.

4.Design and Implementation Process

4.1 System Architecture:

The system adopts a separate architecture of front end and back end, which communicate through Axios module.
The back end is built using SpringBoot, by setting up a server-side api to receive front-end data, process and interact with the MySQL database.
The front end is developed using Vue.js and is responsible for page display, receiving user information and interacting with the user.

4.2 System implementation process:

The front end uses vue technology and elements plus library to accept requests initiated by users. Users can create, edit and delete contacts by calling out forms by controlling buttons. The table on the main interface displays contacts saved in the database by applying data from the back end through programs.
The front end uses the Axios module to initiate a data interaction request from the back end, which receives the front end request through the UserRepository.java file and sends it to the server for processing.
The back-end uses UserController.java to handle front-end requests, and reads the database definition in the User.java file to modify the data in the database, and returns the data to the front-end.

4.3 Functional Structure Diagram:

5. Code Explanation

5.1 User interface

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color:#77BBDD; position: relative; font-size: 35px; height: 40px;">
        Address Book
      </el-header>
      <el-main>

      <el-dialog
        v-model="dialogVisible"
        title="Add a new contact"
        width="30%"
        :before-close="handleClose"
      >
        <span>
          <el-form
            :label-position="labelPosition"
            label-width="120px"
            :model="form"
            style="max-width: 500px"
          >
            <el-form-item label="Name">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="TelephoneNumber">
              <el-input v-model="form.telephone_number" />
            </el-form-item>
          </el-form>
        </span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="save">
              Save
            </el-button>
          </span>
        </template>
      </el-dialog>

      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="name" label="Name"/>
        <el-table-column prop="telephone_number" label="TelephoneNumber" />
        <el-table-column fixed="right" label="Operations" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="Edit(scope.row)">Edit</el-button>
            <el-popconfirm title="Are you sure you want to delete this contact?" @confirm="Delete(scope.row.id)">
              <template #reference>
              <el-button link type="primary" size="small">Delete</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    
    <el-footer>
      <div>
        <el-button @click="add" type="primary">
          Add a new contact 
        </el-button>
      </div>
    </el-footer>
    </el-container>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'HomeView',
  data(){
    return{
      form:{},
      dialogVisible:false,
      tableData:[]
    }
  },
  created(){
    this.load()
  },
  methods:{
    add(){
      this.dialogVisible=true
    },
    load(){
      request.get("http://localhost:9090/user").then(
        res=>{
          this.tableData=res
        }
      )
    },
    save(){
      request.post("http://localhost:9090/user",this.form).then(
        res=>{
          this.load()
        }
      )
      this.dialogVisible=false
    },
    Edit(row){
      this.form=JSON.parse(JSON.stringify(row))
      this.dialogVisible=true
    },
    Delete(id){
      request.delete("http://localhost:9090/user/"+id).then(
        res=>{
          this.load()
        }
      )
    }
  }

}
</script>

The header, main interface, and tail are defined in <el-container>. <el-header> represents the name of the program, <el-main> defines a form and a table, the form can be called and closed by the button, for accepting user input; Tables are used to display the user information stored in the current database. Finally, <el-footer> defines a button at the bottom of the screen for adding contacts. The <script> section defines the actions performed by the program when each button is pressed, including calling out and closing the form, uploading user input data or performing operations on the data to the back-end server, and accepting the server to display the result after processing to the user.

5.2 Back-end server

5.2.1 User.Java:

package com.example.demo.entity;

import jakarta.persistence.*;
import lombok.Data;

@Entity
@Data
@Table(name="user")
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int id;

    private String name;

    private String telephone_number;
}

This Java code defines an entity class named User that represents the user table in the database. Specific functions are as follows:

Mark the User class as a JPA entity using the @Entity annotation.
Use the @Data annotation to automatically generate getters, setters, tostrings, and so on.
Use the @Table annotation to specify the database table name user.
The id field is the primary key, which is generated using the @Id and @GeneratedValue annotations.
The name and telephone_number fields represent the user's name and phone number, respectively.

5.2.2 UserRepository:

package com.example.demo.repository;

import com.example.demo.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface UserRepository extends JpaRepository<User,Integer> {
}

This Java code defines an interface called UserRepository, which inherits the JpaRepository interface. UserRepository is used to manage database operations for User entities. By inheriting JpaRepository, UserRepository automatically acquires basic CRUD (Create, read, update, delete) functionality.

5.2.3 UserController:

package com.example.demo.controller;

import com.example.demo.entity.User;
import com.example.demo.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/user")
@CrossOrigin(origins = "*",maxAge = 3600)
public class UserController {

    @Autowired
    UserRepository repo;

    @PostMapping
    void save(@RequestBody User user){
        repo.save(user);
    }

    @GetMapping
    List<User>userList(){
        return repo.findAll();
    }

    @DeleteMapping("/{id}")
    void delete(@PathVariable int id){
        repo.deleteById(id);
    }
}

This Java code defines a Spring Boot controller, UserController, to handle user-specific HTTP requests. Specific functions are as follows:

Save user: The user object is saved to the database through a POST request.
GET a list of users: Return a list of all users via a GET request.
Deleting a user: Deletes a specified user based on the user ID through a DELETE request.

...全文