-
Notifications
You must be signed in to change notification settings - Fork 262
Open
Description
如题,前端环境是vue3+typescript,我的json数据存储在本地,但是不知道为什么,数据的内容出现在了http请求get参数中,导致报错431 (Request Header Fields Too Large)。数据的内容不应该以http请求的方式读取吧?
vue文件中script标签代码如下:
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
// 导入JSON数据
import kgOneData from './kg_one.json';
const graphArea = ref<HTMLElement | null>(null);
// 动态加载 CSS
function loadCSS(href: string): void {
const cssLink = document.createElement('link');
cssLink.href = href;
cssLink.rel = 'stylesheet';
cssLink.type = 'text/css';
document.head.appendChild(cssLink);
}
// 动态加载 JS
function loadJS(src: string): Promise<HTMLScriptElement> {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.onload = () => resolve(script);
script.onerror = () => reject(new Error(`Script load error for ${src}`));
document.body.appendChild(script);
});
}
onMounted(async () => {
// 加载 CSS
loadCSS('/lib/interactive-graph-0.1.0/interactive-graph.min.css');
loadCSS('/lib/jquery-3.2.1/jquery-ui.css');
loadCSS('/lib/font-awesome-4.7.0/css/font-awesome.min.css');
// 顺序加载 JS
await loadJS('/lib/jquery-3.2.1/jquery-3.2.1.min.js');
await loadJS('/lib/jquery-3.2.1/jquery-ui.js');
await loadJS('/lib/interactive-graph-0.1.0/interactive-graph.min.js');
// 确保 interactive-graph 和 jQuery 已加载
// 这里假设你已经以某种方式声明了 `igraph` 的类型
if (graphArea.value) {
// 类型断言,假设已经为 GraphNavigator 声明了类型
const app = new (igraph as any).GraphNavigator(graphArea.value, 'LIGHT');
app.loadGson(kgOneData, {
"onGetNodeDescription": function(node: any) {
let description = "<p align=center>";
if (node.image !== undefined) {
description += "<img src='" + node.image + "' width=150/><br>";
}
description += "<b>" + node.label + "</b>" + "[" + node.id + "]";
description += "</p>";
if (node.info !== undefined) {
description += "<p align=left>" + node.info + "</p>";
} else {
if (node.title !== undefined)
description += "<p align=left>" + node.title + "</p>";
}
return description;
}
}, function() {});
}
});
</script>Metadata
Metadata
Assignees
Labels
No labels