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没有抛出其他编译时间或运行时错误。此错误出现在浏览器控制台中。我检查了particle.json文件的有效性。

有人可以帮忙吗？

particles.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文档中的所有内容：

模式名称是固定的，有根的路径，例如＆＃34; /favicon.ico"或根管子树，例如＆＃34; / images /＆＃34; （注意斜杠）。较长的模式优先于较短的模式，因此如果有两个处理程序注册了＆＃34; / images /＆＃34;和＆＃34; / images / thumbnails /＆＃34;，后面的处理程序将被调用路径开始＆＃34; / images / thumbnails /＆＃34;前者将接收＆＃34; / images /＆＃34;中任何其他路径的请求;子树。

由于它正在尝试加载particles.json，并且没有更好的匹配，因此它正在加载您的索引页。

您需要添加其他路线，例如：

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

Answer 2

感谢您的宝贵意见。我确实尝试了上面提出的所有选项但是无法使程序工作直到我发现我有一个愚蠢的误解（由于当然缺乏知识）＆＃34; / ＆＃34; in：* http.HandleFunc（＆＃34; / ＆＃34;，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)
}

编译并运行。只是发现，如果我没有通过任何路径，它就会列出＆＃34; root＆＃34;文件系统的内容，如/ bin，/ home。这足以让我理解Go代码正在考虑＆＃34; /＆＃34; filesystem的root和 NOT 项目的根文件夹。然后我在index.html中更新了css和json文件的绝对路径并且繁荣......它工作了！

再次感谢您的帮助。它对我帮助很大。

javascript（particlesJS）的不一致行为

2 个答案: