Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

读取json文件中的数据出现431状态码 #82

Open
RookieTerry opened this issue Apr 9, 2024 · 1 comment
Open

读取json文件中的数据出现431状态码 #82

RookieTerry opened this issue Apr 9, 2024 · 1 comment

Comments

@RookieTerry
Copy link

如题,前端环境是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>
@HC-teemo
Copy link
Collaborator

This doesn't seem to be a problem with InteractiveGraph. The json file imports fine in a html+js demo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants