前言
后端同学进行业务开发，业务建模往往是从业务逻辑角度出发。
而前端同学往往是从组件展示角度出发。
两者不同的角度，导致两者建模的字段不一致。
这时需要一方编写字段转换函数。
而前端往往有很大一部分的工作量就在写这个转换函数。
具体场景
已知后端接口返回的数据格式如下（mock数据）
{
// 合计
total: {
"yearPlanInvestAmount": 1000000,
"accumulateInvestAmount": 800000,
"planInvestAmount": 1200000,
"accumulateInvestScale": "80%",
"planExecuteScale": "67%",
"projectCount": 10,
"newProjectCount": 3,
"newProjectKgCount": 2,
"newProjectKgScale": "66%",
"projectKgCount": 5,
"projectKgScale": "50%"
},
// 平台
plat: {
"yearPlanInvestAmount": 1000000,
"accumulateInvestAmount": 800000,
"planInvestAmount": 1200000,
"accumulateInvestScale": "80%",
"planExecuteScale": "67%",
"projectCount": 10,
"newProjectCount": 3,
"newProjectKgCount": 2,
"newProjectKgScale": "66%",
"projectKgCount": 5,
"projectKgScale": "50%"
},
// 镇、街
town: {
"yearPlanInvestAmount": 1000000,
"accumulateInvestAmount": 800000,
"planInvestAmount": 1200000,
"accumulateInvestScale": "80%",
"planExecuteScale": "67%",
"projectCount": 10,
"newProjectCount": 3,
"newProjectKgCount": 2,
"newProjectKgScale": "66%",
"projectKgCount": 5,
"projectKgScale": "50%"
},
// 部门及国有公司
dept: {
"yearPlanInvestAmount": 1000000,
"accumulateInvestAmount": 800000,
"planInvestAmount": 1200000,
"accumulateInvestScale": "80%",
"planExecuteScale": "67%",
"projectCount": 10,
"newProjectCount": 3,
"newProjectKgCount": 2,
"newProjectKgScale": "66%",
"projectKgCount": 5,
"projectKgScale": "50%"
},
platList: [
{
"dutyCompany": "公司A",
"yearPlanInvestAmount": 1000000,
"accumulateInvestAmount": 800000,
"planInvestAmount": 1200000,
"accumulateInvestScale": "80%",
"planExecuteScale": "67%",
"projectCount": 10,
"newProjectCount": 3,
"newProjectKgCount": 2,
"newProjectKgScale": "66%",
"projectKgCount": 5,
"projectKgScale": "50%"
},
],
townList: [
{
"dutyCompany": "公司A",
"yearPlanInvestAmount": 1000000,
"accumulateInvestAmount": 800000,
"planInvestAmount": 1200000,
"accumulateInvestScale": "80%",
"planExecuteScale": "67%",
"projectCount": 10,
"newProjectCount": 3,
"newProjectKgCount": 2,
"newProjectKgScale": "66%",
"projectKgCount": 5,
"projectKgScale": "50%"
},
],
deptList: [
{
"dutyCompany": "公司A",
"yearPlanInvestAmount": 1000000,
"accumulateInvestAmount": 800000,
"planInvestAmount": 1200000,
"accumulateInvestScale": "80%",
"planExecuteScale": "67%",
"projectCount": 10,
"newProjectCount": 3,
"newProjectKgCount": 2,
"newProjectKgScale": "66%",
"projectKgCount": 5,
"projectKgScale": "50%"
},
],
}
而前端table组件需要的数据格式如下
{
"listLeft": [
[
null,
"合计",
100,
80,
120,
"80%",
"67%"
]
],
"listRight": [
[
null,
"合计",
10,
3,
2,
"66%",
5,
"50%"
]
]
}
最终页面的效果图如下
表格组件的展示
使用大模型生成转换函数
传统开发情况下，我们要人为识别字段之间的映射关系，接着写代码实现字段映射转换的功能。
在大模型辅助开发情况下，我们可以写提示词，基于大模型生成的代码进行优化再实现这个功能。
提示词如下
你是一个js专家，请用js代码把下面的数据`
{
// 合计
total: {
"yearPlanInvestAmount": 1000000,
"accumulateInvestAmount": 800000,
"planInvestAmount": 1200000,
"accumulateInvestScale": "80%",
"planExecuteScale": "67%",
"projectCount": 10,
"newProjectCount": 3,
"newProjectKgCount": 2,
"newProjectKgScale": "66%",
"projectKgCount": 5,
"projectKgScale": "50%"
},
// 平台
plat: {
"yearPlanInvestAmount": 1000000,
"accumulateInvestAmount": 800000,
"planInvestAmount": 1200000,
"accumulateInvestScale": "80%",
"planExecuteScale": "67%",
"projectCount": 10,
"newProjectCount": 3,
"newProjectKgCount": 2,
"newProjectKgScale": "66%",
"projectKgCount": 5,
"projectKgScale": "50%"
},
// 镇、街
town: {
"yearPlanInvestAmount": 1000000,
"accumulateInvestAmount": 800000,
"planInvestAmount": 1200000,
"accumulateInvestScale": "80%",
"planExecuteScale": "67%",
"projectCount": 10,
"newProjectCount": 3,
"newProjectKgCount": 2,
"newProjectKgScale": "66%",
"projectKgCount": 5,
"projectKgScale": "50%"
},
// 部门及国有公司
dept: {
"yearPlanInvestAmount": 1000000,
"accumulateInvestAmount": 800000,
"planInvestAmount": 1200000,
"accumulateInvestScale": "80%",
"planExecuteScale": "67%",
"projectCount": 10,
"newProjectCount": 3,
"newProjectKgCount": 2,
"newProjectKgScale": "66%",
"projectKgCount": 5,
"projectKgScale": "50%"
},
platList: [
{
"dutyCompany": "公司A",
"yearPlanInvestAmount": 1000000,
"accumulateInvestAmount": 800000,
"planInvestAmount": 1200000,
"accumulateInvestScale": "80%",
"planExecuteScale": "67%",
"projectCount": 10,
"newProjectCount": 3,
"newProjectKgCount": 2,
"newProjectKgScale": "66%",
"projectKgCount": 5,
"projectKgScale": "50%"
},
{
"dutyCompany": "公司E",
"yearPlanInvestAmount": 1800000,
"accumulateInvestAmount": 1440000,
"planInvestAmount": 2160000,
"accumulateInvestScale": "80%",
"planExecuteScale": "64%",
"projectCount": 22,
"newProjectCount": 5,
"newProjectKgCount": 4,
"newProjectKgScale": "80%",
"projectKgCount": 13,
"projectKgScale": "59%"
},
],
townList: [
{
"dutyCompany": "公司A",
"yearPlanInvestAmount": 1000000,
"accumulateInvestAmount": 800000,
"planInvestAmount": 1200000,
"accumulateInvestScale": "80%",
"planExecuteScale": "67%",
"projectCount": 10,
"newProjectCount": 3,
"newProjectKgCount": 2,
"newProjectKgScale": "66%",
"projectKgCount": 5,
"projectKgScale": "50%"
},
{
"dutyCompany": "公司E",
"yearPlanInvestAmount": 1800000,
"accumulateInvestAmount": 1440000,
"planInvestAmount": 2160000,
"accumulateInvestScale": "80%",
"planExecuteScale": "64%",
"projectCount": 22,
"newProjectCount": 5,
"newProjectKgCount": 4,
"newProjectKgScale": "80%",
"projectKgCount": 13,
"projectKgScale": "59%"
},
],
deptList: [
{
"dutyCompany": "公司A",
"yearPlanInvestAmount": 1000000,
"accumulateInvestAmount": 800000,
"planInvestAmount": 1200000,
"accumulateInvestScale": "80%",
"planExecuteScale": "67%",
"projectCount": 10,
"newProjectCount": 3,
"newProjectKgCount": 2,
"newProjectKgScale": "66%",
"projectKgCount": 5,
"projectKgScale": "50%"
},
{
"dutyCompany": "公司E",
"yearPlanInvestAmount": 1800000,
"accumulateInvestAmount": 1440000,
"planInvestAmount": 2160000,
"accumulateInvestScale": "80%",
"planExecuteScale": "64%",
"projectCount": 22,
"newProjectCount": 5,
"newProjectKgCount": 4,
"newProjectKgScale": "80%",
"projectKgCount": 13,
"projectKgScale": "59%"
},
],
}
`转换成下面的数据形式
`
{
"listLeft": [
[null, "合计", "1048.99", "269.73", "207.13", "76.79%", "120.13%"],
[null, "平台", "647.64", "158.77", "126.66", "79.78%", "139.77%"],
[1, "临平新城", "346.31", "83.06", "75.76", "91.21%", "148.06%"],
[2, "经济开发区", "172.02", "43.13", "33.27", "77.14%", "138.22%"],
[3, "大运河科创城", "129.3", "32.59", "17.63", "54.10%", "114.63%"],
[null, "镇、街", "94.96", "26.46", "15.74", "59.49%", "99.06%"],
[1, "临平街道", "7.14", "2.85", "2.81", "98.60%", "131.92%"],
[2, "乔司街道", "2.49", "0.51", "0.41", "80.39%", "68.33%"],
[3, "南苑街道", "15.36", "2.83", "2.2", "77.74%", "125.00%"],
[null, "部门及国有公司", "306.38", "84.5", "64.73", "76.60%", "98.21%"],
[1, "区规资分局", "1.23", "0.72", "0.72", "100.00%", "100.00%"],
[2, "区交通集团", "163.73", "32.37", "30.36", "93.79%", "125.25%"],
[3, "区机关中心", "1.15", "0.57", "0.47", "82.46%", "94.00%"],
],
"listRight": [
[null, "合计", "383", "179", "103", "57.54%", "305", "79.63%"],
[null, "平台", "186", "83", "57", "68.67%", "160", "86.02%"],
[1, "经济开发区", "58", "31", "22", "70.97%", "49", "84.48%"],
[2, "大运河科创城", "30", "10", "7", "70.00%", "27", "90.00%"],
[null, "镇、街", "118", "57", "24", "42.11%", "83", "70.34%"],
[1, "南苑街道", "14", "6", "4", "66.67%", "11", "78.57%"],
[null, "部门及国有公司", "79", "39", "22", "56.41%", "62", "78.48%"],
[1, "区教育局", "8", "3", "3", "100.00%", "8", "100.00%"],
]
}
`
请输出转换的js代码，不要输出其它信息。
这里通过注释，让大模型知道dept类字段和deptList类字段两者生成的数据是有区别，也就是生成的代码需要体现这个区别。
大模型生成的代码如下
function round(num) {
return Math.round(num * 100) / 100;
}
function convertData(data) {
const total = data.total;
const plat = data.plat;
const town = data.town;
const dept = data.dept;
const platList = data.platList;
const townList = data.townList;
const deptList = data.deptList;
const listLeft = [];
const listRight = [];
listLeft.push([null, "合计", round(total.yearPlanInvestAmount / 10000), round(total.accumulateInvestAmount / 10000),
round(total.planInvestAmount / 10000), total.accumulateInvestScale, total.planExecuteScale]);
listLeft.push([null, "平台", round(plat.yearPlanInvestAmount / 10000), round(plat.accumulateInvestAmount / 10000),
round(plat.planInvestAmount / 10000), plat.accumulateInvestScale, plat.planExecuteScale]);
let index = 1;
for (const platItem of platList) {
listLeft.push([index, platItem.dutyCompany, round(platItem.yearPlanInvestAmount / 10000), round(platItem.accumulateInvestAmount / 10000),
round(platItem.planInvestAmount / 10000), platItem.accumulateInvestScale, platItem.planExecuteScale]);
index++;
}
listLeft.push([null, "镇、街", round(town.yearPlanInvestAmount / 10000), round(town.accumulateInvestAmount / 10000),
round(town.planInvestAmount / 10000), town.accumulateInvestScale, town.planExecuteScale]);
index = 1;
for (const townItem of townList) {
listLeft.push([index, townItem.dutyCompany, round(townItem.yearPlanInvestAmount / 10000), round(townItem.accumulateInvestAmount / 10000),
round(townItem.planInvestAmount / 10000), townItem.accumulateInvestScale, townItem.planExecuteScale]);
index++;
}
listLeft.push([null, "部门及国有公司", round(dept.yearPlanInvestAmount / 10000), round(dept.accumulateInvestAmount / 10000),
round(dept.planInvestAmount / 10000), dept.accumulateInvestScale, dept.planExecuteScale]);
index = 1;
for (const deptItem of deptList) {
listLeft.push([index, deptItem.dutyCompany, round(deptItem.yearPlanInvestAmount / 10000), round(deptItem.accumulateInvestAmount / 10000),
round(deptItem.planInvestAmount / 10000), deptItem.accumulateInvestScale, deptItem.planExecuteScale]);
index++;
}
listRight.push([null, "合计", total.projectCount, total.newProjectCount, total.newProjectKgCount,
total.newProjectKgScale, total.projectKgCount, total.projectKgScale]);
listRight.push([null, "平台", plat.projectCount, plat.newProjectCount, plat.newProjectKgCount,
plat.newProjectKgScale, plat.projectKgCount, plat.projectKgScale]);
index = 1;
for (const platItem of platList) {
listRight.push([index, platItem.dutyCompany, platItem.projectCount, platItem.newProjectCount, platItem.newProjectKgCount,
platItem.newProjectKgScale, platItem.projectKgCount, platItem.projectKgScale]);
index++;
}
listRight.push([null, "镇、街", town.projectCount, town.newProjectCount, town.newProjectKgCount,
town.newProjectKgScale, town.projectKgCount, town.projectKgScale]);
index = 1;
for (const townItem of townList) {
listRight.push([index, townItem.dutyCompany, townItem.projectCount, townItem.newProjectCount, townItem.newProjectKgCount,
townItem.newProjectKgScale, townItem.projectKgCount, townItem.projectKgScale]);
index++;
}
listRight.push([null, "部门及国有公司", dept.projectCount, dept.newProjectCount, dept.newProjectKgCount,
dept.newProjectKgScale, dept.projectKgCount, dept.projectKgScale]);
index = 1;
for (const deptItem of deptList) {
listRight.push([index, deptItem.dutyCompany, deptItem.projectCount, deptItem.newProjectCount, deptItem.newProjectKgCount,
deptItem.newProjectKgScale, deptItem.projectKgCount, deptItem.projectKgScale]);
index++;
}
return {
listLeft: listLeft,
listRight: listRight
};
}
const data = {
// 数据省略...
};
const convertedData = convertData(data);
console.log(JSON.stringify(convertedData));
生成截图
我们看到大模型机智地生成了转换函数convertData。可直接使用的那种。
我们需要进一步对函数convertData进行改造。以便更符合业务需求。
此时我们可以选择人工或者提示词进一步优化。
这确实提高了生产效率。
网友评论