我如何从我的nodejs服务器上的js文件加载我的js函数?

时间:2018-12-05 00:32:11

标签: javascript node.js

我正在一个小型网站上工作,我是javascript和nodejs的初学者,我用nodejs创建了一个小型服务器,但是我不知道如何在服务器帮助中加载file.js。 这是我的服务器:

enter code here

let http = require('http');
let fs = require('fs');
let path = require('path');

http.createServer(function(req, res)
{ 

    if(req.url === "/")
    {
        fs.readFile("index.html", "UTF-8", function(err, html)
        {
            res.writeHead(200, {"Content-Type": "text/html"});
            res.end(html);
        });
    }else if(req.url.match("\.css$"))
    {
        var cssPath = path.join(__dirname, '', req.url);
        var fileStream = fs.createReadStream(cssPath, "UTF-8");
        res.writeHead(200, {"Content-Type": "text/css"});
        fileStream.pipe(res);

    }else if(req.url.match("\.png$")){
        var imagePath = path.join(__dirname, '', req.url);
        var fileStream = fs.createReadStream(imagePath);
        res.writeHead(200, {"Content-Type": "images/png"});
        fileStream.pipe(res);
    }else if (req.url.match("\.jpg$")) {
         var imagePath = path.join(__dirname, '', req.url);
        var fileStream = fs.createReadStream(imagePath);
        res.writeHead(200, {"Content-Type": "images/jpg"});
        fileStream.pipe(res);
    }
    else
    {
        res.writeHead(404, {"Content-Type": "text/html"});
        res.end("No Page Found");
    }
}).listen(3000, '127.0.0.1');

这是我的javascript文件的一部分

$(function(){
    let navMain=document.querySelector('nav');
    let ul=document.getElementById('mainUl');
    let li=document.createElement('li');
    let a=document.createElement('a');
    let login=document.createTextNode('Login');

        $(window).on('scroll',function(){
            const navMainTopMesure=navMain.offsetTop;
            if($(window).scrollTop() && window.scrollY>=navMainTopMesure){
                $('nav').addClass('fixed');
                a.appendChild(login);
                li.appendChild(a);
                ul.appendChild(li);
                a.addEventListener('click',function(){
                    document.querySelector('.login').style.display='flex';
                });
                return 0;

            }else{
                $('nav').removeClass('fixed');
                ul.removeChild(li);
            }
        })
  });

  $(function(){


    window.addEventListener('click',function(e){
        if(e.target == document.querySelector('.register')){
            document.querySelector('.register').style.display='none';
        }

    })

    window.addEventListener('click',function(e){
        if(e.target == document.querySelector('.login') ){
             document.querySelector('.login').style.display='none';
        }
    })

  let date =new Date();
  document.getElementById('date').innerHTML=date.toDateString();
  document.querySelector('.sign-up').addEventListener('click',function(){
      document.querySelector('.register').style.display='flex';

  })

  document.querySelector('.closeRegister').addEventListener('click',function(){
  document.querySelector('.register').style.display='none';
  })

  document.querySelector('.sign-in').addEventListener('click',function(){
    document.querySelector('.login').style.display='flex';
})

document.querySelector('.closeLogin').addEventListener('click',function(){
  document.querySelector('.login').style.display='none';
})

$('.mobile-nav').on('click',function(){
    $('.nav-main ul').toggleClass('drop');
   $('.mobile-nav i').toggleClass('fa-times');
})  
    });



function smoothScroll(target,duration)
{
    var target = document.querySelector(target);
    var targetposition = target.getBoundingClientRect().top;
    var startposition = window.pageYOffset;
    var distance = targetposition-startposition;
    var starttime = null;

我只想在服务器中的javascripte文件中执行我的功能。 当我在浏览器中的localhost上执行html文件时,我的问题很明显,但是发生了任何javascript事件

1 个答案:

答案 0 :(得分:0)

您要执行的操作是在主应用程序目录中创建一个名为“ frontend”或“ src”或“ public”的文件夹,并在该文件夹中创建供index.html文件使用的目录。将您的JS文件放在您想要的任何位置。

在节点的主服务器或app.js文件中,执行app.use(express.static(path.join(__ dirname,'whatevernameyouchoseforyourfrontendfiles')));

每当服务器收到文件请求后,您便在提供初始HTML文件后,服​​务器就会知道在哪里查找。