freemarker与vue实践
# 逻辑
FreeMarker数据模型的map的key只可以是String类型; 可以通过json中转；
- 通过ftl把java中传递过来的数据；
- 传递给js中的vue的data数据；【重要】
- 再通过vue来渲染界面；
# 数据通信
- 处理字符串；
${exceptionSite}, //特殊字符不能用json处理；``包括起来； - 处理对象串；
Object.freeze(JSON.parse('${report}') || {}) - 处理数组串；
Object.freeze(JSON.parse('${componentReport}') || [])
# 处理
vue
var vm = new Vue({
el: "#app",
data: {
itemColumns,
columns,
columnsTask,
// activeKey: ["1", "2", "3", "4"],
activeKey: ["1"],
report: Object.freeze(JSON.parse('${report}') || {}), //对象
componentReport: Object.freeze(JSON.parse('${componentReport}') || []),//数组
indexReport: Object.freeze(JSON.parse('${indexReport}') || []),
applicationReport: Object.freeze(JSON.parse('${applicationReport}') || []),
repairAdvice: JSON.parse('${repairAdvice}') || '',
exceptionSite: `${exceptionSite}`, //特殊字符不能用json处理；
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
java
Map reportMap = new HashMap();
// reportMap.put("data", JSON.toJSONString(reportPreviewDto));
// reportMap.put("data", JSON.toJSONString("{'objList':'objList'}"));
reportMap.put("clusterName", JSON.toJSONString(reportPreviewDto.getClusterName()));
reportMap.put("report", JSON.toJSONString(reportPreviewDto.getReport()));
reportMap.put("componentReport", JSON.toJSONString(reportPreviewDto.getSceneDetail().getComponentReport()));
reportMap.put("indexReport", JSON.toJSONString(reportPreviewDto.getSceneDetail().getIndexReport()));
reportMap.put("applicationReport", JSON.toJSONString(reportPreviewDto.getSceneDetail().getApplicationReport()));
reportMap.put("exceptionSite", reportPreviewDto.getSceneDetail().getExceptionSite());
reportMap.put("repairAdvice", JSON.toJSONString(reportPreviewDto.getSceneDetail().getRepairAdvice()));
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 和ejs的对比
data: {
api: "<%= api %>",
urlNext: "<%= urlNext %>",
itemCurrent: JSON.parse('<%- JSON.stringify(one) %>'),
ships: JSON.parse('<%- JSON.stringify(ships) %>'),
},
1
2
3
4
5
6
2
3
4
5
6
上次更新: 2022/04/15, 05:41:32