一个完整的基于Node.js的web应用(入门级)

最新推荐文章于 2023-02-08 20:34:31 发布

技术成长ing

最新推荐文章于 2023-02-08 20:34:31 发布

阅读量3.6k

点赞数 2

分类专栏： Node 文章标签： node搭建web应用 node.js node初学者入门

本文链接：https://blog.csdn.net/jackson23333/article/details/81301402

版权

Node 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在此之前先大概了解下Node.js(服务端的javascript):

Node.js事实上是另外一种上下文，它允许在后端（脱离浏览器环境）运行JavaScript代码。

要实现在后台运行JavaScript代码，代码需要先被解释然后正确的执行。Node.js的原理正是如此，它使用了Google的V8虚拟机（Google的Chrome浏览器使用的JavaScript执行环境），来解释和执行JavaScript代码。

除此之外，伴随着Node.js的还有许多有用的模块，它们可以简化很多重复的劳作，比如向终端输出字符串。

因此，Node.js事实上既是一个运行时环境，同时又是一个库。

要使用Node.js,首先需要进行安装。关于如何安装Node.js，可以直接进入官方网址https://nodejs.org/en/

我们的Web应用要求可以分文一下三点：

用户可以通过浏览器使用我们的应用。
当用户请求http://domain/start时，可以看到一个欢迎页面，页面上有一个文件上传的表单。
用户可以选择一个图片并提交表单，随后文件将被上传到http://domain/upload，该页面完成上传后会把图片显示在页面上。

接下来就开始动手，先用记事本创建一个server.js文件，用于构建一个简单的http服务器，代码如下：

//创建一个http模块
var http = require("http");
//创建一个url模块
var url = require("url");
function start(route,handle){
      function onRequest(request, response){
            var postData = "";
            var pathname = url.parse(request.url).pathname;
            console.log(typeof handle[pathname]);
            console.log("Request for "+pathname+" received.");
            route(handle, pathname, response, request);
      }
      http.createServer(onRequest).listen(8888);
      console.log("Server has started");
}
//导出server模块
exports.start = start;

创建一个请求“路由”文件router.js,方便把服务端的对象参数传递给事件处理程序，就是待会要创建的新文件，代码如下：

exports.route = route;

接下来创建requestHanders.js文件，对事件进行处理，代码如下：

var querystring = require("querystring"),
fs = require("fs"),
formidable = require("formidable");

function start(response){
console.log("Request handler 'start' was called.");

    var body = '<html>' +
         '<head>' +
         '<meta http-equiv="Content-Type" content="text/html; ' +
         'charset=UTF-8" />' +
         '</head>'+
         '<body>' +
         '<form action="/upload" enctype="multipart/form-data" '+' method="post">' +
         '<input type="file" name="upload" multiple="multiple" style="margin:100px auto 0;border:1px solid #ccc;border-radius:4px;display:block;" />'+
         '<input type="submit" value="Upload file" style="width:200px;height:30px;border-radius:4px;border:1px solid #ccc;margin:40px auto;background-color:#109059;display:block;"/>' +
         '</form>' +
         '</body>' +
         '</html>';

         response.writeHead(200,{"Content-Type":"text/html"});
         response.write(body);
         response.end();
}
function upload(response, request){
    console.log("Request handler 'upload' was called.");

exports.start = start;
exports.upload = upload;
exports.show = show;

最后一步需要创建一个主文件index.js，把三个分散的模块连接在一起：

var server = require("./server");
var router = require("./router");
var requestHandlers = require("./requestHandlers");

var handle = {};
handle["/"] = requestHandlers.start;
handle["/start"] = requestHandlers.start;
handle["/upload"] = requestHandlers.upload;
handle["/show"] = requestHandlers.show;

server.start(router.route,handle);

然后在命令行启动服务器输入命令node index.js（记住必须切换到文件目录下运行文件）

浏览器呈现的效果图：

点击浏览选择./tmp/test.png图片进行测试，图片的路径一定要是与四个js文件在同一个目录下，然后点击上传后，如下图所示：

一个基础的web应用到此就完成了，具体参考node初学者入门，网址：http://ourjs.com/detail/529ca5950cb6498814000005

技术成长ing

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
一个完整的基于Node.js的web应用(入门级)

在此之前先大概了解下Node.js(服务端的javascript):Node.js事实上是另外一种上下文，它允许在后端（脱离浏览器环境）运行JavaScript代码。要实现在后台运行JavaScript代码，代码需要先被解释然后正确的执行。Node.js的原理正是如此，它使用了Google的V8虚拟机（Google的Chrome浏览器使用的JavaScript执行环境），来解释和执行Ja...
复制链接

扫一扫