противоречивое поведение JavaScript (частиц JS) - PullRequest
Новая
       16

противоречивое поведение JavaScript (частиц JS)

0 голосов
/ 14 мая 2018

Я пытаюсь сделать страницу входа с работой.Ниже приведено тело главной 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 и beans.json.

Всеработает, когда я выполняю его в веб-браузере с apache2 в качестве веб-сервера.

Затем я беру те же самые файлы и использую их в программе 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)
}

и не удается разобратьФайл частиц.json:

Синтаксическая ошибка: JSON.parse: неожиданный символ в строке 1 столбца 1 данных JSON

Никаких других ошибок времени компиляции или выполнения не генерируетсяпо Го.Эта ошибка появляется в консоли браузера.Я проверил действительность файла частиц.json.

Может кто-нибудь помочь, пожалуйста?

Содержимое частиц.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"
  }
}

Ответы [ 2 ]

0 голосов
/ 21 мая 2018

Спасибо за ваши бесценные комментарии. Я попробовал все предложенные выше варианты, но не смог заставить программу работать, пока не понял, что у меня глупое заблуждение (конечно, из-за недостатка знаний), что " / " в: * 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)
}

скомпилировано и запущено. Только для того, чтобы обнаружить, что если я не прохожу путь, он перечисляет содержимое корневой файловой системы, например, / bin, / home. Этого было достаточно, чтобы я понял, что код Go учитывает корень файловой системы "/" и корневую папку проекта NOT . Затем я обновил абсолютный путь к файлам css и json в моем index.html и boom ... Это сработало!

Еще раз спасибо за вашу помощь. Это мне очень помогло.

0 голосов
/ 15 мая 2018

http.HandleFunc("/", соответствует чему-либо, что не соответствует нигде в другом месте, по сути, это ловушка, поскольку документация 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")
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...