前言
后端同學進行業(yè)務開發(fā)，業(yè)務建模往往是從業(yè)務邏輯角度出發(fā)。
而前端同學往往是從組件展示角度出發(fā)。
兩者不同的角度，導致兩者建模的字段不一致。
這時需要一方編寫字段轉(zhuǎn)換函數(shù)。
而前端往往有很大一部分的工作量就在寫這個轉(zhuǎn)換函數(shù)。
具體場景
已知后端接口返回的數(shù)據(jù)格式如下（mock數(shù)據(jù)）
{
// 合計
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%"
},
// 鎮(zhèn)、街
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組件需要的數(shù)據(jù)格式如下
{
"listLeft": [
[
null,
"合計",
100,
80,
120,
"80%",
"67%"
]
],
"listRight": [
[
null,
"合計",
10,
3,
2,
"66%",
5,
"50%"
]
]
}
最終頁面的效果圖如下
表格組件的展示
使用大模型生成轉(zhuǎn)換函數(shù)
傳統(tǒng)開發(fā)情況下，我們要人為識別字段之間的映射關系，接著寫代碼實現(xiàn)字段映射轉(zhuǎn)換的功能。
在大模型輔助開發(fā)情況下，我們可以寫提示詞，基于大模型生成的代碼進行優(yōu)化再實現(xiàn)這個功能。
提示詞如下
你是一個js專家，請用js代碼把下面的數(shù)據(jù)`
{
// 合計
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%"
},
// 鎮(zhèn)、街
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%"
},
],
}
`轉(zhuǎn)換成下面的數(shù)據(jù)形式
`
{
"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, "經(jīng)濟開發(fā)區(qū)", "172.02", "43.13", "33.27", "77.14%", "138.22%"],
[3, "大運河科創(chuàng)城", "129.3", "32.59", "17.63", "54.10%", "114.63%"],
[null, "鎮(zhèn)、街", "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, "區(qū)規(guī)資分局", "1.23", "0.72", "0.72", "100.00%", "100.00%"],
[2, "區(qū)交通集團", "163.73", "32.37", "30.36", "93.79%", "125.25%"],
[3, "區(qū)機關中心", "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, "經(jīng)濟開發(fā)區(qū)", "58", "31", "22", "70.97%", "49", "84.48%"],
[2, "大運河科創(chuàng)城", "30", "10", "7", "70.00%", "27", "90.00%"],
[null, "鎮(zhèn)、街", "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, "區(qū)教育局", "8", "3", "3", "100.00%", "8", "100.00%"],
]
}
`
請輸出轉(zhuǎn)換的js代碼，不要輸出其它信息。
這里通過注釋，讓大模型知道dept類字段和deptList類字段兩者生成的數(shù)據(jù)是有區(qū)別，也就是生成的代碼需要體現(xiàn)這個區(qū)別。
大模型生成的代碼如下
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, "鎮(zhèn)、街", 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, "鎮(zhèn)、街", 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 = {
// 數(shù)據(jù)省略...
};
const convertedData = convertData(data);
console.log(JSON.stringify(convertedData));
生成截圖
我們看到大模型機智地生成了轉(zhuǎn)換函數(shù)convertData?？芍苯邮褂玫哪欠N。
我們需要進一步對函數(shù)convertData進行改造。以便更符合業(yè)務需求。
此時我們可以選擇人工或者提示詞進一步優(yōu)化。
這確實提高了生產(chǎn)效率。
