GitHub Pages 网站的运行方式与使用实时服务器在本地运行时不同

如何解决GitHub Pages 网站的运行方式与使用实时服务器在本地运行时不同

我目前正在制作一个小型网站，有人可以在其中输入字谜，该网站将返回可以从字谜中组成的所有可能的单词。返回所有单词后，您可以单击某个单词以给出其所有定义。

当我使用实时服务器在本地运行该站点时，该站点工作正常，问题是当我使用 GitHub Pages 部署存储库时。

在本地运行时，当我输入一个词（例如英亩）时，该站点将返回所有可以正确找到的可能词，但是当我使用 GitHub Pages 执行相同操作时，该站点将不会返回相同的内容。与查找所有可能的单词相关的所有逻辑都在我的 script.js 文件中，所以我猜问题可能出在那里？ script.js 文件读入一个 dictionary.txt 文件以获取一组单词并过滤它们以找到可以从字谜中组成的单词。 script.js 文件还处理从外部字典 API 获取给定单词的定义并将数据添加到主 html 文件。

这是 script.js 文件。抱歉，如果有点乱！我对前端的 JavaScript 编码有点陌生。我还包含了 index.html 和 style.css 文件，以防问题出在其中之一。

let inputElement = document.querySelector("#anagram-input");

inputElement.addEventListener("keyup",onKeyUp);

let words = [];

fetch("dictionary.txt")
  .then(res => {
    return res.text();
  })
  .then(dictionary => {
    words = dictionary.split("\n");
    for (let i = 0; i < words.length; i++) {
      words[i] = words[i].slice(0,-1);
    }
  })
  .catch(error => {
    console.log(error);
  })

function fetchDeFinitions(e) {
  let chosenWord = e.target.parentElement.parentElement.firstElementChild.textContent;
  fetch(`https://wordsapiv1.p.rapidapi.com/words/${chosenWord}/deFinitions`,{
      "method": "GET","headers": {
        "x-rapidapi-key": "API-KEY","x-rapidapi-host": "wordsapiv1.p.rapidapi.com"
      }
    })
    .then(res => {
      return res.json();
    })
    .then(data => {
      let cardInnerElement = e.target.parentElement.parentElement.parentElement;
      cardInnerElement.style = "transform: rotateY(180deg)";
      let cardFrontElement = cardInnerElement.firstElementChild;
      cardFrontElement.style = "transform: rotateY(180deg)";
      addDeFinitionsHTML(cardFrontElement,data);
    })
    .catch(err => {
      console.error(err);
    });
}

function addDeFinitionsHTML(element,data) {
  let deFinitionsHTML;
  if (data.success === false || deFinitions.length === 0) {
    deFinitionsHTML = `No deFinition for this word is currently available. Sorry!`;
    element.lastElementChild.innerHTML = deFinitionsHTML;
    return;
  }
  deFinitionsHTML = `<p class="card-title" style="text-align: left">DeFinitions of ${data.word}:</p><ul>`;
  for (let i = 0; i < data.deFinitions.length; i++) {
    deFinitionsHTML += `<p style="text-align: left">${data.deFinitions[i].deFinition}</p>`;
  }
  deFinitionsHTML += `</ul>`;
  element.lastElementChild.innerHTML = deFinitionsHTML;
}

function onKeyUp(e) {
  let enteredWord = e.target.value;
  return findWordsFromAnagram(enteredWord);
}

function findWordsFromAnagram(anagram) {
  let filteredWordList = [];
  let finalWordList = [];
  anagram = anagram.toLowerCase().split("").sort();
  //filter the dictionary list by the length of the anagram
  for (let i = 0; i < words.length; i++) {
    if (words[i].length === anagram.length) {
      filteredWordList.push(words[i]);
    }
  }
  //make a copy of filteredWordList and sort all words inside alphabetically
  let sortedFilteredWordList = filteredWordList.map(x => x);
  for (let i = 0; i < sortedFilteredWordList.length; i++) {
    sortedFilteredWordList[i] = sortedFilteredWordList[i].split("").sort();
  }
  //Add any words from filteredWordList that have the same letters as anagram to finalWordList
  for (let i = 0; i < filteredWordList.length; i++) {
    let booleanTracker = true;
    for (let j = 0; j < anagram.length; j++) {
      if (sortedFilteredWordList[i][j] != anagram[j]) {
        booleanTracker = false;
      }
    }
    if (booleanTracker) {
      finalWordList.push(filteredWordList[i]);
    }
    booleanTracker = true;
  }
  return outputWordsFromAnagram(finalWordList);
}

function outputWordsFromAnagram(words) {
  let outputElement = document.querySelector("#output");
  let outputHTML = ``;
  for (let i = 0; i < words.length; i++) {
    outputHTML += `<div class="col-lg-12 col-m-12 col-sm-12 col-xs-12 mb-3 flip-card">
                                <div class="text-center flip-card-front">
                                    <div class="card border-primary flip-card-inner">
                                        <div class="card-header"><h5>${words[i]}</h5></div>
                                        <div class="card-body text-primary">
                                            <p id="deFinitions" class="click">Click here for its deFinition!<p>
                                        </div>
                                    </div>
                            </div>
                        </div>`;
  }
  outputElement.innerHTML = outputHTML;
  let deFinitionElements = document.querySelectorAll("#deFinitions");
  for (let i = 0; i < deFinitionElements.length; i++) {
    deFinitionElements[i].addEventListener("click",fetchDeFinitions);
  }
}

html,body {
  margin: 0px;
  height: 100%;
}

.click:hover {
  cursor: pointer
}

.flip-card {
  perspective: 1000px;
}


/* This container is needed to position the front and back side */

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
}


/* Position the front and back side */

.flip-card-front {
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="UTF-8">
  <Meta http-equiv="X-UA-Compatible" content="IE=edge">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Anagram App</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="./style.css">
</head>

<body>
  <header>
    <h1 class="text-center">Anagram App</h1>
  </header>
  <div class="container">
    <div class="input-group">
      <input id="anagram-input" type="text" class="form-control" placeholder="Anagram">
    </div>
  </div>
  <div class="container mt-3">
    <div id="output" class="row">
    </div>
  </div>
  <script src="./script.js"></script>
</body>

</html>

GitHub 页面的链接是 here

当我输入“英亩”作为字谜时，我已经包含了我从两者中获得的结果的屏幕截图。

• GitHub Pages screenshot
• Live Server screenshot

Here is the link to the GitHub repository itself

我就是不明白为什么它和本地的不一样。有什么我在这里遗漏的吗？

解决方法

查看返回的字典（\n 分隔的字符串），我无法弄清楚为什么要删除单词数组的每个单词的最后一个字符：

ClassifierBasedGermanTagger.py

当输入字母 'a' 时，该代码将 24 'a',24 'b',24 'c'...24 'z' 放入单词数组中。因此，在尝试查找字谜时，它也在搜索这些字母。

我认为没有明显的理由拥有该代码。据我所知，如果您将其删除，则会产生您期望的结果。