简单网站建设优化seo 整站优化

需求：客户想要对比上一次和这一次日志之间更新了那些配置，每次的日志有很多看起来很不方便。要求做一个左右对比的功能，并且把更新的参数单独拿出来进行展示，方便客户直接观看具体更新了那些配置项。

效果图

实现方式

下载插件

pnpm add v-code-diff -S or npm install v-code-diff -S
pnpm add vue3-json-viewer -S or npm install vue3-json-viewer -S

技术栈

	"v-code-diff": "^1.13.1","vue": "^3.5.13","vue3-json-viewer": "^2.2.2",

整体代码

<script setup>
import {onMounted, ref} from "vue";
import {CodeDiff} from 'v-code-diff'import {JsonViewer} from "vue3-json-viewer";
import "vue3-json-viewer/dist/index.css";const diffValue = ref({});const newJson = {aigcFeePoint: 0,aigcFreeDay: 3,aigcFreeEndTime: null,aigcFreeFeePoint: 1000,authority: "全部",birthday: null,createEnterpriseId: null,createMember: null,createMemberName: null,createTime: "2024-03-11 16:51:51",dataStatus: "0",department: null,enterpriseAbbreviation: "汪汪国际",enterpriseHeadPortrait: null,enterpriseId: "4",enterpriseName: "汪汪汪国际物流有限公司",firstLoginTime: "2024-07-16T12:09:33.000+08:00",genderId: null,headPortrait: null,idNumber: null,jobNo: null,languageId: "3",latestLoginTime: "2025-03-14T10:33:02.000+08:00",mailbox: null,memberCode: "186288888888",memberFirstName: "斌",memberId: "2",memberName: "汪汪汪",memberNickname: "汪汪汪",memberSurName: "周",mobilephone: "186288888888",personalProfile: null,post: "互联网中心",qq: "269851111111",redeemCode: null,registerTime: null,scene: "订单单证查询",tenantId: "1",tenantName: "汪汪集团",updateMember: "2",updateMemberName: "汪汪汪",updateTime: "2025-03-14 10:33:02",wechat: "83892",wechatId: "83892",xbmId: null
}const oldJson = {aigcFeePoint: 1,aigcFreeDay: 3,aigcFreeEndTime: null,aigcFreeFeePoint: 1000,authority: "全部",birthday: null,createEnterpriseId: null,createMember: null,createMemberName: null,createTime: "2024-03-11 16:51:51",dataStatus: "0",department: null,enterpriseAbbreviation: "汪汪国际",enterpriseHeadPortrait: null,enterpriseId: "4",enterpriseName: "汪汪汪国际物流有限公司",firstLoginTime: "2024-07-16T12:09:33.000+08:00",genderId: null,headPortrait: null,idNumber: null,jobNo: null,languageId: "3",latestLoginTime: "2025-03-14T10:33:02.000+08:00",mailbox: null,memberCode: "186288888888",memberFirstName: "斌",memberId: "2",memberName: "汪汪汪",memberNickname: "汪汪汪",memberSurName: "周",mobilephone: "186288888888",personalProfile: null,post: "互联网中心",qq: "269851111111",redeemCode: null,registerTime: null,scene: "用户权限",tenantId: "1",tenantName: "汪汪集团",updateMember: "2",updateMemberName: "汪汪汪",updateTime: "2025-03-14 10:33:02",wechat: "83892",wechatId: "83892",xbmId: 1,name_T: "XO"
};const newResult = JSON.stringify(newJson);
const oldResult = JSON.stringify(oldJson);const handleDiff = (diff) => {console.log("新增、删除、是否发生变化", diff);
};function deepDiff(obj1, obj2) {const diff = {};function compare(o1, o2, path = '') {for (let key in o1) {if (!o2.hasOwnProperty(key)) {diff[path + key] = { from: o1[key], to: undefined };} else if (typeof o1[key] === 'object' && typeof o2[key] === 'object') {compare(o1[key], o2[key], path + key + '.');} else if (o1[key] !== o2[key]) {diff[path + key] = { from: o1[key], to: o2[key] };}}for (let key in o2) {if (!o1.hasOwnProperty(key)) {diff[path + key] = { from: undefined, to: o2[key] };}}}compare(obj1, obj2);return diff;
}// 将数据转换成我想要的数据格式
function convertObj(obj) {const newObj = {};for (let key in obj) {const { from, to } = obj[key];// 如果 from 是 undefined，使用 from，否则使用 fromif (from === undefined) {newObj[key] = from;} else if (to === undefined) {newObj[key] = from;} else {newObj[key] = from;  // 如果 from 和 to 都有值，使用 from}}return newObj;
}
const value = ref();
onMounted(()=>{diffValue.value = deepDiff(newJson, oldJson);value.value = convertObj(diffValue.value);console.log("diffValue.value", diffValue.value)console.log("value.value", value.value)
})</script><template><CodeDiff:language="json":old-string="oldResult":new-string="newResult"output-format="side-by-side"forceInlineComparison@diff="handleDiff"></CodeDiff><h4>两次对比之后修改的属性如下：</h4><JsonViewer :value="value" copyable boxed sort expanded />
</template>

文档

vue3-json-view

v-code-diff

结语

让自己进入一片雪，一片叶，一片云，让自己平和安乐是一种修行。