First assignment - front-end and back-end separation contacts programming 832201313邱宇哲

832201313邱宇哲 2024-10-30 01:52:52

Course for This Assignment	EE308FZ
Assignment Requirements	Create a front-end and back-end separation contacts programming
Objectives of This Assignment	The main objective of this assignment is to achieve functionality
Other References	https://www.bilibili.com/ https://www.csdn.net/

1. Assignment Description

The purpose of this project is to complete a front-end and back-end separate separation contacts.

Basic contacts functions：

Function 1: add
- Basic operations for adding contacts, including name, phone number, etc. and store contacts information in a back-end database
Function 2: modify
- Modify the contacts information. must be read from the back-end database, can not use the cache.
Function 3: delete
- Requirement as above

2. GitHub Link

front-end	yyyzzqq/First-assignment--front-end
back-end	yyyzzqq/First-assignment---back-end

3. PSH Table

Modules	Estimated Time	Actual Time
Demand Analysis	2 hours	2 hours
Environment Configuration	2 hours	4 hours
DBD(Database Design)	2 hours	3 hours
Back-end development	10 hours	12 hours
front-end development	10 hours	7 hours
Test	1 hour	1 hour
Total	27 hours	29 hours

4. Presentation of the Finished Product

Function 1: add

Function 2: modify

Function 3: delete

Function 4: query

5. Code Explanation

Requirements Analysis
- An contacts with add, delete, modify, query functions

In this contacts application, I use Spring Boot as the back end and Vue3 as the front end, providing basic functionality for adding, editing, and deleting user contacts. These functions are stored in the MySQL database.

Database Design
- Use MySQL to design a diagram with names and phone numbers
Back-end Development

/**
     * 查询联系人列表
     */
    
    @GetMapping("/list")
    public R list(ContactListReq contactListReq)
    {
        PageHelper.startPage(contactListReq.getPageNum(), contactListReq.getPageSize());
        Contact contact = new Contact();
        BeanUtils.copyProperties(contactListReq, contact);

        List<Contact> contacts = contactService.selectContactList(contact);
        if (contacts.size() > 0) {
            PageInfo<Contact> pageInfo = new PageInfo<>(contacts);
            return R.ok(pageInfo);
        }
        return R.ok(new PageInfo<Contact>(Collections.emptyList()));
    }

 
    /**
     * 获取联系人详细信息
     */
    
    @GetMapping(value = "/{id}")
    public AjaxResult getInfo(@PathVariable("id") Long id)
    {
        return success(contactService.selectContactById(id));
    }

    /**
     * 新增联系人
     */
    
   
    @PostMapping
    public AjaxResult add(@RequestBody Contact contact)
    {
        return toAjax(contactService.insertContact(contact));
    }

    /**
     * 修改联系人
     */
    
   
    @PutMapping
    public AjaxResult edit(@RequestBody Contact contact)
    {
        return toAjax(contactService.updateContact(contact));
    }

    /**
     * 删除联系人
     */
    
   
    @DeleteMapping("/{ids}")
    public AjaxResult remove(@PathVariable Long[] ids)
    {
        return toAjax(contactService.deleteContactByIds(ids));
    }
}

Front-end Development

<template>
  <div class="main">
    <div class="header">
      <el-input v-model="queryParams.name" placeholder="输入姓名" style="width: 120px;"/>
      <el-button type="primary" @click="getContactList" style="margin-left: 20px;">查询</el-button>  
      <el-button @click="handleAdd" type="success" class="btn-add">新增</el-button>
    </div>
    <el-table class="my-table" :data="state.data.list">
      
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="createTime" label="创建时间" />


      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button type="danger" @click="handleDel(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :total="state.data.total" :page-size="queryParams.pageSize"
      @change="onPageChange" />

    <el-dialog v-model="dialogVisible1" width="500" @close="clearData">

      <el-form class="form" :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone" />
        </el-form-item>
        
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
          <el-button type="primary" @click="saveOrUpdate">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="js" setup>
import { reactive, ref } from 'vue';
import axios from './axios2';
import { ElMessage } from 'element-plus';
let mode = '0'
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  name:''
})
const state = reactive({
  data: {},
  curContact: {}
})

const form = reactive({
  name: '',
  phone: '',
  id:'',

})
const dialogVisible1 = ref(false)

const clearData = () => {
  form.name = ''
  form.phone = ''
  form.id = ''
  mode = '0'
}



const getContactList = () => {

  axios.get('contact/list', { params: queryParams }).then(res => {

    state.data = res

    console.log(state.data)

  })

}

const saveOrUpdate = () => {
  if (mode == '0') {


    axios.post('contact', form).then(res => {

      dialogVisible1.value = false
      ElMessage.success('新增成功')
      getContactList()

    })
  } else {
    axios.put('contact', form).then(res => {

      dialogVisible1.value = false
      ElMessage.success('修改成功')
      getContactList()

    })
  }


}

const copyValue = (src, target) => {
  // 遍历 target 中的 key，并将 src 对应属性赋值给 target
  Object.keys(target).forEach((key) => {
    if (src[key] !== undefined) {
      target[key] = src[key] // 仅赋值存在于 src 中的属性
    }
  })
}

const handleAdd = () => {
  mode = '0'
  dialogVisible1.value = true
}

const handleEdit = (index, row) => {
  mode = '1'
  copyValue(row, form)
  dialogVisible1.value = true
}
const handleDel = (index, row) => {
  axios.delete('contact/' + row.id).then(res => {
    ElMessage.success("删除成功")
    getContactList()
  })
}

const onPageChange = (page, size) => {
  queryParams.pageNum = page
  getContactList()
}

getContactList()

</script>

<style lang="css" scoped>
.main {
  max-width: 1280px;
  margin: 0 auto;
  background-color: transparent;
}
.header {
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 30px;

}

.btn-add {
  /* position: absolute;
  right: 20px; */
  margin-left: 30px;
}
</style>

functional structure diagram

6. Personal Journey and Learnings

In this assignment, I learned how to implement the most basic front to back end interactions. I have a general understanding of how to develop and implement a program. From requirements analysis to project testing, I have a preliminary understanding of the course of software engineering.

As a student in EE, this assignment is a new challenge for me. In the process of completing the requirements, I came into contact with areas that I had not been exposed to before, and also encountered many unknown difficulties. Fortunately, by searching the Internet and seeking help from classmates, I gradually solved the problem and completed the project. I learned a lot from this assignment. This is not only for the completion of homework, but also how to determine the way to solve the problem. This will provide me with a lot of help in my future learning process.

...全文