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