javascript的行為不一致（particlesJS）

Question

我正在嘗試使登錄頁面正常工作。 以下是html主頁的正文（僅顯示正文以使內容簡潔）：

<body>
    <div class="container">
        <div id="login-box">
            <div class="controls">
                <input type="text" name="username" placeholder="Username" class="form-control" />
                <input type="text" name="username" placeholder="Password" class="form-control" />
                <button type="button" class="btn btn-default btn-block btn-custom">Login</button>
            </div>  <!-- /.controls -->
        </div>   <!-- /#login-box -->
    </div>    <!-- /.container -->

    <div id="particles-js"></div>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"> </script>

    <script>
    particlesJS.load('particles-js', 'particles.json', function() {
        console.log('callback - particles.js config loaded');
    });
    </script>

</body>

除此之外，我還有一個css和particles.json靜態文件。

當我在以apache2作為Web服務器的Web瀏覽器上執行它時，一切正常。

然后，我取出完全相同的文件並在Golang程序中使用它：

func main(){
    templates := template.Must(template.ParseFiles("../../templates/index.html"))
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request){
        if err:= templates.ExecuteTemplate(w, "index.html", nil) ; err != nil{
            http.Error(w, err.Error(), http.StatusInternalServerError)
        }
        //fmt.Fprintf(w, "Welcome to Gopherland")
    })
    http.Handle("/css/", http.FileServer(http.Dir("style")))
    http.Handle("/js/", http.FileServer(http.Dir("style")))
    http.ListenAndServe(":5000", nil)
}

並且它無法解析particles.json文件：

SyntaxError：JSON.parse：JSON數據的第1行第1列出現意外字符

Go不會引發其他任何編譯時或運行時錯誤。 此錯誤出現在瀏覽器控制台中。 我已經檢查了particles.json文件的有效性。

有人可以幫忙嗎？

particle.json的內容：

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 5,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true,
  "config_demo": {
    "hide_card": false,
    "background_color": "#b61924",
    "background_image": "",
    "background_position": "50% 50%",
    "background_repeat": "no-repeat",
    "background_size": "cover"
  }
}

Answer 1

http.HandleFunc("/",與其他地方不匹配的東西匹配，正如ServeMux文檔指出的那樣，從ServeMux ，它是一個ServeMux ：

模式命名固定的，有根的路徑（例如“ /favicon.ico”）或有根的子樹（例如“ / images /”）（請注意結尾的斜杠）。 較長的模式優先於較短的模式，因此，如果同時為“ / images /”和“ / images / thumbnails /”注冊了處理程序，則將為從“ / images / thumbnails /”開始的路徑調用后一個處理程序將在“ / images /”子樹中接收對任何其他路徑的請求。

由於它正在嘗試加載particles.json ，並且沒有更好的匹配項，因此它正在加載索引頁面。

您需要添加另一條路線，例如：

http.HandleFunc("/particles.json", func(w http.ResponseWriter, r *http.Request) {
   http.ServeFile(w, r, "./path/to/particles.json")
})

Answer 2

感謝您的寶貴意見。 我確實嘗試了上面建議的每個選項，但是直到我發現我對* http.HandleFunc（“ / ”）中的“ / ”有一個愚蠢的誤解（由於缺乏知識），才使該程序正常工作。 func（w http.ResponseWriter，r http.Request）是我的項目文件夾的根，即我的./src、./bin、./style/css/和./style/js/所在的文件夾

但是，事實並非如此。 我將代碼修改為：

func main () {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request){
        http.ServeFile(w, r, r.URL.Path)
    })
    http.ListenAndServe(":5000" , nil)
}

編譯並運行。 只是發現，如果我不傳遞任何路徑，它就會列出“ root”文件系統的內容，例如/ bin，/ home。 這足以讓我理解Go代碼正在考慮“ /”文件系統的根目錄而不是項目的根文件夾。 然后，我在index.html中更新了CSS和json文件的絕對路徑，並開始工作了。

再次感謝你的幫助。 它確實對我有很大幫助。

javascript的行為不一致（particlesJS）

問題描述

2 個解決方案

解決方案1
2 2018-05-14 23:32:00

解決方案2
0 2018-05-21 13:35:01

javascript的行為不一致（particlesJS）

問題描述

2 個解決方案

解決方案1 2 2018-05-14 23:32:00

解決方案2 0 2018-05-21 13:35:01

解決方案1
2 2018-05-14 23:32:00

解決方案2
0 2018-05-21 13:35:01