文本差异（变更）对比 ----------- java + vue 实现

目录

一、效果图

二、代码

1、maven

2、工具类

2、接口

3、前端

三、讲解

1、后端

2、前端

---

一、效果图

 

 

 

二、代码

1、maven

        
            io.github.java-diff-utils
            java-diff-utils
            4.11
        

2、工具类

/**
 * 文本变更对比
 *
 * @author zenglingyao
 * @date 2023/04/11
 */
public class DiffTextUtil {

    /**
     * 发现差异
     *
     * @return {@link Map}
     */
    public static Map> findDiff(List a, List b) {

        //两文件的不同点
        Patch patch = DiffUtils.diff(a, b);

        List diffPosition = new ArrayList<>();

        List insertList = new ArrayList<>();

        List sourceChange = new ArrayList<>();

        List targetChange = new ArrayList<>();

        List deleteList = new ArrayList<>();

        List> deltas = patch.getDeltas();

        for (AbstractDelta abstractDelta : deltas) {

            int sourceStart = abstractDelta.getSource().getPosition();
            int sourceLast = abstractDelta.getSource().last();
            int targetStart = abstractDelta.getTarget().getPosition();
            int targetLast = abstractDelta.getTarget().last();

            switch (abstractDelta.getType()){
                case INSERT:
                    insertList.addAll(getAll(targetStart,  targetLast));
                    break;

                case CHANGE:

                    sourceChange.addAll(getAll(sourceStart,  sourceLast));
                    targetChange.addAll(getAll(targetStart,  targetLast));
                    break;

                case DELETE:
                    deleteList.addAll(getAll(sourceStart, sourceLast));
                    break;

                default:
                    continue;
            }

            diffPosition.add(new Integer[]{sourceStart, targetStart});

        }

        HashMap> hashMap = new HashMap<>();
        hashMap.put("sourceList", a);
        hashMap.put("targetList", b);
        hashMap.put("insertList", insertList);
        hashMap.put("sourceChange", sourceChange);
        hashMap.put("targetChange", targetChange);
        hashMap.put("deleteList", deleteList);
        hashMap.put("diffPosition", diffPosition);

        return hashMap;

    }


    private static List getAll(int start, int end) {
        List result = new ArrayList<>(end - start + 1);
        for (int i = start; i <= end; i++) {
            result.add(i);
        }
        return result;
    }
}

2、接口

@RestController
@RequestMapping("/api/demo")
public class DiffTextController {

    @RequestMapping("diff")
    public Map findDiff() {

        List a = null;
        List b = null;

        try {

            a = FileUtils.readLines(new File("E:\\test\\diff1.conf"));
            b = FileUtils.readLines(new File("E:\\test\\diff2.conf"));

        } catch (IOException ignore) {

        }

        return DiffTextUtil.findDiff(a, b);
    }

}

3、前端

三、讲解

1、后端

DiffTextUtil.findDiff 参数为两个需要对比的字符串列表，核心代码是

Patch patch = DiffUtils.diff(a, b);
List> deltas = patch.getDeltas();

第一个参数是源 （a），第二个参数是目的(b)

遍历对比的结果记录，找到新增、修改、删除对应的下标记录下来

insertList                记录目的新增下标      到前端变绿色用

sourceChange       记录源改变下标         到前端变蓝色用

targetChange         记录目的改变下标     到前端变蓝色用

deleteList               记录删除下标            到前端变红色用

diffPosition             记录每处差异开始位置，包括源和目的下标    到前端跳转到下一处差异按钮用

2、前端

• 跳转功能通过 HTML锚点 实现
• js 的 setTimeout​​ 方法，我调用时时间参数传的0，看起来没有，实际上可以等前面axios回调执行完再执行需要执行的方法
• this.post 是我自己封装的axios,用的时候可以自己改一下