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端口可自行修改.

                               
登录/注册后可看大图

                               
登录/注册后可看大图

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

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

                               
登录/注册后可看大图

这是第二个文件的代码

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

qiuyouzhi

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