【问题标题】:How to localhost a webapp with nodejs如何使用 nodejs 本地化 webapp
【发布时间】:2015-07-19 05:53:38
【问题描述】:

我正在设计我的第一个 web 应用程序,我已经编写了相当一部分前端,现在我想制作一个非常简单的后端来开始实现一些功能。在过去的几天里,我尽可能多地学习有效的后端开发和其他各种东西,但我遇到了一个巨大的问题。我基本上不明白如何附加我的前端和后端(我想使用 nodejs)。

我想要的只是使用我的浏览器转到 localhost:8080 并使用我的前端自动查看 html 文档,然后在我的前端代码中让应用程序与服务器通信(以获取 json 信息或指示服务器添加内容到数据库或类似的东西)。

【问题讨论】:

  • 你在使用 Express 吗?
  • 我还没有开始,这会让我想做的事情更容易吗?
  • 是的,它肯定会让你想做的事情变得更容易;从添加不同的 API 路由到为您的静态文件提供服务。
  • 这看起来很有帮助,谢谢

标签: javascript node.js


【解决方案1】:

在系统中安装节点后。

文件夹结构:

将您的文件保存在应用文件夹内的公共文件夹中

导航到TerminalCommand Prompt 中的应用程序文件夹:

然后创建一个package.json 的文件,并在其中保留以下代码:

{

    "name" : "YourAppName",
    "version" : "0.0.1",
    "description" : "App description",
    "dependencies" : {
        "mime" : "~1.2.7"
    }
}

然后回到终端并运行npm install

然后创建一个server.js 的文件,并在其中保留以下代码:

var http = require("http");
var fs = require("fs");
var path = require("path");
var mime = require("mime");
var cache = {};
function send404(responce){
    responce.writeHead(404,{"content-type":"text/plain"});
    responce.write("Error 404: resourse not found");
    responce.end()
}
function sendFile(responce,filePath,fileContents){
    responce.writeHead(200,{"content-type": mime.lookup(path.basename(filePath))});
    responce.end(fileContents);
}
function serveStatic(responce,cache,abspath){
    if(cache[abspath]){
        sendFile(responce,abspath,cache[abspath]);
    }else{
        fs.exists(abspath,function(exists){
            if(exists){
                fs.readFile(abspath,function(err,data){
                    if(err){
                        send404(responce);
                    }else{
                        cache[abspath] = data;
                        sendFile(responce,abspath,data);
                    }
                })
            }else{
                send404(responce)
            }
        })
    }
}
var server = http.createServer(function(request,responce){
    var filePath = false;
    if(request.url == '/'){
        filePath = 'public/index.html';
    }else{
        filePath = 'public'+request.url;
    }
    var abspath = './'+filePath;
    serveStatic(responce,cache,abspath);
})
server.listen(8080,function(){
    console.log("server running on 3000");
})

** 这段代码是为了帮助你开始使用node js,为了更好的理解去node documentation。也可以阅读mime 模块,这里正在使用它。

【讨论】:

    【解决方案2】:

    您可以使用免费的云服务,例如Parse.com。这个js sdk

    【讨论】:

      【解决方案3】:

      您可以使用 Grunt 并使用 Connect 插件,创建一个简单的服务器,足以开发纯 JS Web 应用程序。

      使用 Grunt 基本上需要 2 个文件

      • package.json
      • Gruntfile.js

      package.json 定义了 Grunt 运行所需的依赖项。在您的情况下,它将包括

      • grunt
      • grunt-contrib-connect(搭建服务器的插件)`

      根据您的要求,它还可能包含其他依赖项。

      Gruntfile.js 定义依赖项的配置。在您的情况下,应该如何设置服务器。如果你使用grunt-contrib-connect以外的插件,你也应该配置它们。

      参考:

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2020-11-05
        • 1970-01-01
        • 2019-03-18
        • 1970-01-01
        • 2018-06-18
        • 1970-01-01
        • 1970-01-01
        • 2020-10-26
        相关资源
        最近更新 更多