我正在设计我的第一个webapp,我已经编写了很大一部分前端,现在我想制作一个非常简单的后端来开始实现一些功能。在过去的几天里,我一直在尽可能多地学习有效的后端开发和其他各种事情,但我遇到了一个巨大的问题。我从根本上不了解如何连接我的前端和我的后端(我想使用nodejs)。
我想要的只是使用我的浏览器转到localhost:8080并自动查看我的前端的html文档然后在我的前端代码中让应用程序与服务器通信(获取json信息或指示服务器添加内容到数据库或类似的东西)。
答案 0 :(得分:0)
在系统中安装节点后。
文件夹结构:
将您的文件保存在app文件夹中的公共文件夹中
导航到Terminal
或Command 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");
})
**此代码旨在帮助您开始使用节点js,以便更好地理解node documentation。阅读mime
模块,这里正在使用它。
答案 1 :(得分:0)
答案 2 :(得分:0)
您可以使用Grunt并使用Connect插件,创建一个简单的服务器,足以开发纯JS Web应用程序。
使用Grunt基本上需要2个文件
self.stashButtonTopConstraint.constant -= 3
self.stashButton.removeConstraint(self.stashButtonConstraint)
let newConstraint = NSLayoutConstraint(item: self.stashButtonConstraint.firstItem, attribute: self.stashButtonConstraint.firstAttribute, relatedBy: self.stashButtonConstraint.relation, toItem: self.stashButtonConstraint.secondItem, attribute: self.stashButtonConstraint.secondAttribute, multiplier: 0.13, constant: 0)
self.stashButton.addConstraint(newConstraint)
package.json
Gruntfile.js
定义了Grunt运行所需的依赖项。在你的情况下,它将包括
package.json
grunt
(设置服务器的插件)`根据您的要求,它还可能包含其他依赖项。
grunt-contrib-connect
定义依赖项的配置。在您的情况下应该如何设置服务器。如果你使用其他Gruntfile.js
插件,你也应该配置它们。
参考: