live server 不好用?教你怎样用node搭建一个

苏沫儿

既然是用node搭建自然要装node咯,安装方法自行百度.下面会帖代码,里会有注释不懂得回帖问就好了.
当然我要讲一下打包文件里呢有两个server文件 任意一个都可以用,server代码多,可控性强,server1代码少可控性弱.
你拿到的文件应该是这样的目录:

                               
登录/注册后可看大图

使用方法首先 win+r 运行cmd进入到webserver目录下输入npm i .安装用到的第三方模块

                               
登录/注册后可看大图

2.删除static目录下所有文件夹及文件,替换成你的文件当然默认里面有测试文件可以先不删.
3.cmd 输入 node server.js或npm start来启动服务

                               
登录/注册后可看大图

4.打开浏览器访问127.0.0.1:2333/index.html默认设置的是2333端口可自行修改.

                               
登录/注册后可看大图

                               
登录/注册后可看大图

下面是代码这是第一个文件也是推荐使用的

1. /*
   
2. * @Author: Mer 沫儿
   
3. * @Date: 2020-02-22 22:10:43
   
4. * @LastEditTime: 2020-02-22 22:40:31
   
5. * @LastEditors: Mer 沫儿
   
6. * @Description: 用node实现live server插件功能.本文件有采用ES6语法不懂请自行百度.此文件为原生版本
   
7. * @FilePath: \webServer\server.js
   
8. * @致力于编程开发努力学习天天向上
   
9. */
   
10. /*
    
11. *服务器端要做的常规任务
    
12. *  1.首先想干事情需要一个服务(创建服务: IIS/NGINX/APPACHE/NODE基于[HTTP/HTTPS]内置模块)
    
13. *  2.接收客户端的请求信息(有请求静态资源文件的,也有请求数据的)
    
14. *  3.查找到对应的资源文件或者对应的数据信息
    
15. *  4.把找到的内容返回给客户端
    
16. */
    
17. let http = require('http'),
    
18.     url = require('url'),
    
19.     path = require('path'),
    
20.     mime = require('mime');
    
21. let port = 2333;
    
22. let {
    
23.     readFile
    
24. } = require('./utils/promiseFS');
    
25. //=>SERVER.CREATR-SERVER创建服务
    
26. let server = http.createServer((req, res) => {
    
27.     //=>当客户端向当前服务器发送请求的时候触发此回调函数(请求N次触发N次回调函数)
    
28.     //req:request req对象中存储了客户端的请求信息
    
29.     //res:response res对象中提供了对应的属性和方法,可以让服务器返回给客户端信息
    
30.     //res.end()返回给客户端信息
    
31.     let {
    
32.         //=>请求参数路径名称
    
33.         pathname,
    
34.         //=>问号传参信息(键值对)
    
35.         query
    
36.     } = url.parse(req.url, true);
    
37.     //=>根据请求的路径和名称,让其去static目录下查找对应的资源文件内容
    
38.     pathname = path.resolve('./static') + pathname;
    
39.     let suffixREG = /\.([0-9a-zA-Z]+)$/,
    
40.         encodeREG = /^(PNG|GIF|JPG|WEBP|BMP|ICO|SVG|MP3|MP4|WAV|OGG|M3U8)$/i,
    
41.         encoding = '',
    
42.         suffix = suffixREG.test(pathname) ? suffixREG.exec(pathname)[1] : null;
    
43.     if (suffix !== null) {
    
44.         !encodeREG.test(suffix) ? encoding = 'charset=utf8' : null;
    
45.         suffix = mime.getType(suffix);
    
46.         readFile(pathname).then(result => {
    
47.             //=>返回的数据格式一般都是字符串或者buffer
    
48.             //write服务器返回信息(可执行多次[一般都直接写在end里面])
    
49.             //end告诉客户端返回的信息已经结束了(必须写)
    
50.             //res.end相当于基于响应主体返回信息,还需要掌握基于响应头的返回信息
    
51.             res.writeHead(200, {
    
52.                 //=>告诉客户端返回的数据格式和编码方式,返回的格式类型是MIME类型.
    
53.                 'Content-Type': `${suffix};${encoding}`
    
54.             })
    
55.             console.log(pathname);
    
56.             res.end(result);
    
57.         }).catch(err => {
    
58.             res.writeHead(404, {
    
59.                 //=>告诉客户端返回的数据格式和编码方式,返回的格式类型是MIME类型.
    
60.                 'Content-Type': `application/json;charset=utf8;`
    
61.             })
    
62.             res.end(JSON.stringify(err));
    
63.         });
    
64.         return;
    
65.     }
    
66. });
    
67. //=>server.listen监听端口号
    
68. server.listen(port, () => {
    
69.     //=>当服务创建成功,并且开启监听端口号,触发此回调函数执行
    
70.     console.log(`服务启动成功,基于${port}端口启动~ Ctrl+C 关闭运行`);
    
71. });
    

复制代码

                               
登录/注册后可看大图

这是第二个文件的代码

1. /*
   
2. * @Author: Mer 沫儿
   
3. * @Date: 2020-02-22 23:07:42
   
4. * @LastEditTime: 2020-02-22 23:39:29
   
5. * @LastEditors: Mer 沫儿
   
6. * @Description: 用node实现live server插件功能,此文件为已经封装好的简化版.
   
7. * @FilePath: \webServer\server1.js
   
8. * @致力于编程开发努力学习天天向上
   
9. */
   
10. let express = require('express'),
    
11.     app = express();
    
12. let port = 2333
    
13. app.listen(port, () =>{
    
14.     console.log(`服务器已启动,基于${port}端口启动,Ctrl+C 关闭运行`);
    
15. });
    
16. app.use(express.static('./static'));
    
17. app.use((req, res, next) => {
    
18.     res.status(404);
    
19.     res.send('not found!');
    
20. });

复制代码

qiuyouzhi

楼主字体太小了点
看的眼睛疼