First Assignment 1_832201307_Du yuhan

[832201307 杜宇涵]

Course for This Assignment	EE308FZ Software Engineering
Where are the requirements for this assignment?	First assignment-- front-end and back-end separation contacts programming
Name and student ID	杜宇涵_Du yuhan_832201307
The objective of this assignment	Set up a web interface that separates the front and back ends of the address book
Other Reference	1. Method of Construction (《构建之法》2. Java毕业设计 基于SpringBoot+Vue前后端分离的前后端分离的通讯录项目的设计与实现

Uploaded cloud/ Webside	http://localhost:9090/gerentongxunlu
Front-end repository on GitHub	Front-end code
Back-end repository on GitHub	Back-end code
Code Standards Development	1. 前端代码开发规范总结 2. 后端环境搭建

• 1. Assignment Description
• 2. PSP Table
• 3. Presentation of the Finished Product
• 3.1 The Front-end Page
• 3.2 Basic contacts functions
• 3.2.1 Function 1: add
• 3.2.2 Function 2: modify
• 3.2.3 Function 3: delete
• 3.3 Other instructions
• 3.3.1 Administrator information
• 3.3.2 Contact classification
• 3.3.3 Announcement system
• 4.Design and Implementation Process
• 4.1 System flow analysis
• 4.1.1 Operation process
• 4.1.2 Login process
• 4.1.3 Information addition process
• 4.1.4 Information deletion process
• 4.2 System design
• 4.2.1 Principle of execution process
• 5. Code Explanation
• 5.1 Frontend Page Presentation
• 5.2 Backend Functionality Implementation
• 6. Personal Journey and Learnings

1. Assignment Description

This assignment allows the use of any visualization technology: web, Android, applet of WeChat, etc., but to reflect the front and back end separation to achieve the following functions
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
Other instructions
About Extended features
You can extend the function you want to extend, the extension function will be recorded as additional points, for the extension function please describe in detail in the blog.
About development
It is recommended to develop based on Web, using Web frameworks, such as common JSP, Servlet, spring series, flask, php, express and so on. Allows the use of any visualization technology: web, Android, wechat mini program, etc. But the front and back ends should be separated.
The technology used should be platform compatible and not dependent on the specific environment.
The main objective of this assignment is to achieve functionality, and technical considerations only count for a certain number of points. Do not use the prototype tool to generate code, set 0 points directly who gets caught.
Deadline：The deadline for this assignment is: November 1, 2024 23:59

2. PSP Table

Activity	Estimated Time/h	Actual Time/h	Comments
Setting up the development environment	5	7	The database installation encountered a problem
Preliminary learning(Vue.js, Spring Boot)	4	6	Need more study time
Find git related open source	1	2	Learned more commands
Design the front page style	2	3	Spent more time drawing prototypes
Build the back-end framework	2	2	A Springboot framework is built
Database design	2	4	Some fields are reserved for subsequent extensions
Implementation front end	6	8	Using Vue.js components saves a lot of time
Implementation back end	5	6	Using the Springboot framework saves a lot of time
Test the system	2	4	More time was spent testing and fixing problems
Integrate the front and rear ends	2	2	As I expected, keeping the front and rear access parameters consistent improved integration time

3. Presentation of the Finished Product

3.1 The Front-end Page

3.2 Basic contacts functions

3.2.1 Function 1: add

3.2.2 Function 2: modify

3.2.3 Function 3: delete

3.3 Other instructions

3.3.1 Administrator information

The administrator function has also been added to this address book, allowing you to modify and search user information as an administrator

3.3.2 Contact classification

The contact classification function is configured in the address book. You can classify and label different contacts

3.3.3 Announcement system

An announcement system is provided in the address book. The administrator can send announcements, and users in the address book can see public announcements

4.Design and Implementation Process

4.1 System flow analysis

4.1.1 Operation process

4.1.2 Login process

4.1.3 Information addition process

4.1.4 Information deletion process

4.2 System design

4.2.1 Principle of execution process

5. Code Explanation

5.1 Frontend Page Presentation

The front end of the contact management application is built using JSP, CSS, and JavaScript to provide users with a friendly page to interact with and manage contacts.

package com.controller;


import java.util.Arrays;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.ConfigEntity;
import com.service.ConfigService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.ValidatorUtils;

/**
 * 登录相关
 */
@RequestMapping("config")
@RestController
public class ConfigController{
    
    @Autowired
    private ConfigService configService;

    /**
     * 列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,ConfigEntity config){
        EntityWrapper<ConfigEntity> ew = new EntityWrapper<ConfigEntity>();
        PageUtils page = configService.queryPage(params);
        return R.ok().put("data", page);
    }
    
    /**
     * 列表
     */
    @IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params,ConfigEntity config){
        EntityWrapper<ConfigEntity> ew = new EntityWrapper<ConfigEntity>();
        PageUtils page = configService.queryPage(params);
        return R.ok().put("data", page);
    }

    /**
     * 信息
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") String id){
        ConfigEntity config = configService.selectById(id);
        return R.ok().put("data", config);
    }
    
    /**
     * 详情
     */
    @IgnoreAuth
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") String id){
        ConfigEntity config = configService.selectById(id);
        return R.ok().put("data", config);
    }
    
    /**
     * 根据name获取信息
     */
    @RequestMapping("/info")
    public R infoByName(@RequestParam String name){
        ConfigEntity config = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "faceFile"));
        return R.ok().put("data", config);
    }
    
    /**
     * 保存
     */
    @PostMapping("/save")
    public R save(@RequestBody ConfigEntity config){
//        ValidatorUtils.validateEntity(config);
        configService.insert(config);
        return R.ok();
    }

    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody ConfigEntity config){
//        ValidatorUtils.validateEntity(config);
        configService.updateById(config);//全部更新
        return R.ok();
    }

    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        configService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
}

Thought Process:
When building a simple contact management application, you can follow the following structure to organize your HTML, CSS, and JavaScript code. This structure will ensure that the user interface is both clear and easy to navigate.

5.2 Backend Functionality Implementation

The back end is built using Java. and uses the Springboot framework to process front-end requests and interwork with the database to return data to the front end for display.

The list query uses a get request, which uses the Spring framework's @RequestMapping annotation to map the URL path /page to a method that handles the HTTP request. The method is called page and takes two parameters: a Map to store the request parameters and an HttpServletRequest object to retrieve the HTTP request information. The method records the debug log internally, and then obtains the user role and ID from the session. If the role is User, the user ID is added to the parameters. Then, call lianxirenService queryPage query paging data, and use the dictionaryService. DictionaryConvert conversion table data dictionary. Finally, the query results are encapsulated in a response object R and returned to the caller. This method is mainly used to handle the logic of paging queries and dictionary table data transformations

    /**
    * 后端列表
    */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params, HttpServletRequest request){
        logger.debug("page方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(StringUtil.isNotEmpty(role) && "用户".equals(role)){
            params.put("yonghuId",request.getSession().getAttribute("userId"));
        }
        params.put("orderBy","id");
        PageUtils page = lianxirenService.queryPage(params);

        //字典表数据转换
        List<LianxirenView> list =(List<LianxirenView>)page.getList();
        for(LianxirenView c:list){
            //修改对应字典表字段
            dictionaryService.dictionaryConvert(c);
        }
        return R.ok().put("data", page);

The new contact uses the save method, a Java method that uses the @RequestMapping("/save") annotation of the Spring framework to handle the HTTP request to save the contact. It receives an @RequestBody parameter containing the contact entity and an HttpServletRequest object. The debug log is first recorded inside the method, and then a query Wrapper is created to check whether a contact record with the same properties exists in the database. If no identical record exists, set the creation time and insert a new record. If so, an error response is returned. This method is mainly used to save contact information and avoid duplicate data insertion.

    /**
    * 后端新增
    */
    @RequestMapping("/save")
    public R save(@RequestBody LianxirenEntity lianxiren, HttpServletRequest request){
        logger.debug("save方法:,,Controller:{},,lianxiren:{}",this.getClass().getName(),lianxiren.toString());
        Wrapper<LianxirenEntity> queryWrapper = new EntityWrapper<LianxirenEntity>()
            .eq("lianxiren_name", lianxiren.getLianxirenName())
            .eq("lianxirensex_types", lianxiren.getLianxirensexTypes())
            .eq("yonghu_id", lianxiren.getYonghuId())
            .eq("lianxiren_types", lianxiren.getLianxirenTypes())
            .eq("lianxiren_age", lianxiren.getLianxirenAge())
            .eq("lianxiren_phone", lianxiren.getLianxirenPhone())
            .eq("lianxiren_email", lianxiren.getLianxirenEmail())
            .eq("lianxiren_qq", lianxiren.getLianxirenQq())
            .eq("lianxiren_zhuzhi", lianxiren.getLianxirenZhuzhi())
            .eq("lianxiren_danwei", lianxiren.getLianxirenDanwei())
            ;
        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        LianxirenEntity lianxirenEntity = lianxirenService.selectOne(queryWrapper);
        if(lianxirenEntity==null){
            lianxiren.setCreateTime(new Date());
        //  String role = String.valueOf(request.getSession().getAttribute("role"));
        //  if("".equals(role)){
        //      lianxiren.set
        //  }
            lianxirenService.insert(lianxiren);
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }

Modify contacts using the update method, a Java method that uses the Spring framework's @RequestMapping("/update") annotation to handle HTTP requests to update contacts. It receives an @RequestBody parameter containing the contact entity and an HttpServletRequest object. Method first logs the debug log and then creates a query Wrapper to check if there are records in the database that have the same attributes (but different ids) as the contact to update. If the same record does not exist, the update operation is performed. If so, an error response is returned. This method is mainly used to update the contact information and ensure that the update operation does not violate the uniqueness constraint of the data.

 /**
    * 后端修改
    */
    @RequestMapping("/update")
    public R update(@RequestBody LianxirenEntity lianxiren, HttpServletRequest request){
        logger.debug("update方法:,,Controller:{},,lianxiren:{}",this.getClass().getName(),lianxiren.toString());
        //根据字段查询是否有相同数据
        Wrapper<LianxirenEntity> queryWrapper = new EntityWrapper<LianxirenEntity>()
            .notIn("id",lianxiren.getId())
            .andNew()
            .eq("lianxiren_name", lianxiren.getLianxirenName())
            .eq("lianxirensex_types", lianxiren.getLianxirensexTypes())
            .eq("yonghu_id", lianxiren.getYonghuId())
            .eq("lianxiren_types", lianxiren.getLianxirenTypes())
            .eq("lianxiren_age", lianxiren.getLianxirenAge())
            .eq("lianxiren_phone", lianxiren.getLianxirenPhone())
            .eq("lianxiren_email", lianxiren.getLianxirenEmail())
            .eq("lianxiren_qq", lianxiren.getLianxirenQq())
            .eq("lianxiren_zhuzhi", lianxiren.getLianxirenZhuzhi())
            .eq("lianxiren_danwei", lianxiren.getLianxirenDanwei())
            ;
        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        LianxirenEntity lianxirenEntity = lianxirenService.selectOne(queryWrapper);
        if(lianxirenEntity==null){
            //  String role = String.valueOf(request.getSession().getAttribute("role"));
            //  if("".equals(role)){
            //      lianxiren.set
            //  }
            lianxirenService.updateById(lianxiren);//根据id更新
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }

Deleting a contact uses the delete method, a Java method that uses the Spring framework's @RequestMapping("/delete") annotation to handle HTTP requests to delete a contact. It receives an @RequestBody parameter that contains an array of contact ids. Method first record log, and then call lianxirenService. DeleteBatchIds method, the ID is converted to an array list, and delete the corresponding contact record. Finally, a response object r.oke () is returned indicating that the operation was successful. This method is used to delete contact information in batches.

    /**
    * 删除
    */
    @RequestMapping("/delete")
    public R delete(@RequestBody Integer[] ids){
        logger.debug("delete:,,Controller:{},,ids:{}",this.getClass().getName(),ids.toString());
        lianxirenService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }

Thought Process:
Using Spring Boot framework can simplify the development process, improve development efficiency and project maintainability, and greatly reduce boilerplate code and manual configuration through automatic configuration and default Settings, and improve development efficiency. And built-in Tomcat, Jetty and other servers, can be directly packaged into executable JAR files, easy to deploy and run. It also provides a dependency management tool to automatically resolve dependency conflicts and version compatibility issues. Integrated testing framework, support for unit testing and integration testing, and built-in servers simplify deployment.

6. Personal Journey and Learnings

Through the development of personal address book, I deeply understand the process of developing a program software. When I decide to develop a program of personal address book, I conduct a reasonable demand analysis of its functions during the development, and then design the functional framework of the program software, design the entity and data table of the database, and implement the detailed interface of the functions of the program software. In this process, all aspects of the program encountered difficulties, large and small, but through repeated analysis of these problems, in-depth thinking, with a variety of relevant literature provided methods and solutions to solve the problems successfully. Finally, the personal address book I developed was successfully run.