# UserInfoManager

**Repository Path**: Yozora_xu/user-info-manager

## Basic Information

- **Project Name**: UserInfoManager
- **Description**: 一个简单的用户管理界面全功能CRUD，撤销
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-27
- **Last Updated**: 2023-02-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 【全栈工程师】项目初试题

> 后端技术栈
>
> - 业务层：SpringMVC/SpringBoot
> - 持久化：Mybatis-Plus
> - 数据库：Mysql
> - 数据源：Druid
> - 日志：logback
>
> 前端技术栈：
>
> - 页面：Vue.js/ElementUI
> - 数据交互：Ajax



##### 文件结构

```
UserInfoManager
--src
  --main
    --java
      --com
      	--xuyl
      	  --config 配置类
      	  --constant 常量类
      	  --controller 表现层
      	  	--utils 表现层中用到的工具类
      	  --dao 数据层
      	  --domain 实体类
      	  --entity 工具类
      	  --exception 异常类
      	  --servcie 业务层
      	  --utils 工具类
    --resource
   	  --config 工具类所需配置和数据
      --com
        --xuyl
          --dao Mybatis的XML文件
 	  --static 页面等静态资源
 	  --templates 插件
  --test
--.gitignore
--pom.xml
--README.md
```



### 环境依赖配置：

整个框架使用SSMP搭建，使用Lombok简化实体类的开发，使用MP简化数据层的开发，由于业务需要摒弃了MP的业务层简化。

数据处理方面使用fastjon将User对象转为String类型，以便撤销操作的实现，用来记录数据前后发生的变化。

使用dom4j与对应工具类对地址下拉框进行实现

```xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.9</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <groupId>com.xuyl</groupId>
    <artifactId>UserInfoManager</artifactId>
    <version>0.0.1-SNAPSHOT</version>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!--mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.3</version>
        </dependency>

        <!--druid-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.2.8</version>
        </dependency>

        <!--fastjson-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.47</version>
        </dependency>


        <!--地址有关依赖-->
        <dependency>
            <groupId>dom4j</groupId>
            <artifactId>dom4j</artifactId>
            <version>1.6.1</version>
        </dependency>


        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

```



### 后端开发

- 开发亮点：

  1. 对所有返回前端的结果进行了统一，无论是异常信息还是结果信息，统一成一样的格式，便于联调
  2. 使用异常捕获通知实现所有异常统一管理，不用在业务层再处理异常，将异常抛出即可，提高了系统的稳定性，也给予了客户足够的稳定的系统
  3. 使用信息常量处理前端提示信息，便于管理和解耦。
  4. 使用乐观锁来解决一定的并发情况，提高了系统的合理性和健壮性

- 难点：

  1. 使用dom4j来获取地址，并与前端组件数据保持一致性，需要一定的时间分析整个数据结构，以便于后端数据的处理。第二点在于数据的回显和存储，由于表单控件的地址组件是下拉菜单，数据是存储的数组，所以将地址分为省，城市，区，和详细地址来存储，查询、添加和修改的时候都对其对应的字段进行更新，对数组进行操作，完成数据的赋值，和数据的回显。

     

  2. 对于撤销操作的实现，关键在于如何记录操作和操作的数据。以及如何实现反操作。要完成撤销操作，需要对增，删，改进行记录。使用数据库表tbl_operation(id, operation, before_data, after_data)进行数据存储，后两个字端为json格式。在每一次增删改时都记录本次操作的名称，操作前数据和操作后的数据。

     1. 因为id为自增策略，每次点撤销都查询最大的id值则能获取最后的操作，在撤销之后，删除最后一条操作记录，则能再次撤销上上次的操作。实现了多次撤销的功能
        1. 对于增加，则根据id删除对应数据即可，使用MP会自动记录每次增加的id值
        2. 对于删除，我使用了MP的deleted字段，将deleted更新为0即可恢复数据
        3. 对于更新，由于引入了乐观锁机制，所以每次修改完后都要重新查一次最新数据，以便更新版本号。当撤销操作发生时，将最新数据的版本号给予旧数据，然后使用根据id更新即可。



### 前端开发

- 开发亮点
  1. 整个前端框架使用Vue.js，和ElementUI进行绘制，使用vue的双向绑定和axios的异步通信实现前后端数据的交互。
- 难点
  1. 搜索框的实时搜索，由于时间问题，采用的方案是，每次搜索框发生change事件者调用条件查询服务进行查询，在数据量较小，服务器性能优秀时反应十分迅速，给用户良好的体验。
  2. 地址数据和控件的数据绑定，需要研究级联控件的整个数据结构，和对应标签的赋值。
  3. 实现刷新也能保留条件查询的数据，采用localStorage进行数据存储，当页面刷新时对数据进行初始化，率先使用localStorage中存储的数据，没有则init。这样实现了查询条件的保留