使用node.js创建一个简易服务器，让本地的HTML页面可以通过localhost方式访问

不念不忘少年蓝@ 2022-12-11 05:29 359阅读 0赞

最近一直在复习当中，所以会一写 HTML/js什么的。但是都是通过`file:///Users/baiyinyu/Documents/privateProgram/test/918.html`的方式去查看执行结果的。 。。。。

看起来丑不说， 其他电脑上也不能访问这个。。。 也不能在手机上访问这个页面。。。。。。。。。

就在想啊，本地的vue项目为什么可以通过`localhost:port`的方法访问了， 怎么做才能实现这个效果呢？

这时候我们的node.js就派上用场了。。。。。

***注：这篇文章只实现了最简单最基础的功能，***

**1、使用到的模块**

*  `http`，是node.js内置的模块，可用于搭建服务端 `var http=require("http")`
 *  `fs`，是node.js内置的模块，用于实现文件相关的，读取、写入啊之类的等等等等`var fs=require("fs")`

**2、简易的代码实现**

> 在本地的项目根目录下新建`server.js`。其内容如下：

**3、使用**

> 现在，简易的服务器已经搭起来了，在命令行 执行 `node server.js`，在浏览器中访问`localhost:9090/index.html`即可

当前的目录结构如下：为了让方便截图，给server.js改了个名字。。。。。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70_pic_center]

浏览器访问`localhost:9090/918.html`的结果如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70_pic_center 1]

**4、手机上访问**

> 好吧，目前为止现在还是访问不了。需要把localhost替换成本机IP才行 。。。。。。。。  
> 先去翻个资料，找到后补充下。。

***解决方法：直接listen(端口号，IP地址即可)。。。。。。***

http.createServer(function(request,response){ 
          var pathname=(request.url).slice(1);
          fs.readFile(pathname,function(err,data){ 
             if(err){ 
                console.log(err,"------ 读取文件失败")
             }else{ 
               response.writeHead("content-type","text/html;charset=utf-8");
               response.write(data.toString());
               response.end();
             }
          })
       }).listen(9090,"129.45.13.13");// 填上端口号和自己的IP地址就行了

**5、readFile()**

> `readFile()`，读取文件。参数分别是 文件的路径；文件读取格式（文本文件和二进制文件）这个参数不写时，默认读取为二进制文件；第三个参数就是回调函数了

**6、自动打开浏览器**

> 如何设置，在运行`node server.js`命令后会自动打来浏览器并访问首页呢?

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/9ff3e6d6102548978fd33866ba63b8a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/18967069463f4452a1301695ac1905e7.png