live server 不好用?教你怎样用node搭建一个
本帖最后由 苏沫儿 于 2020-2-23 01:38 编辑既然是用node搭建自然要装node咯,安装方法自行百度.下面会帖代码,里会有注释不懂得回帖问就好了.
当然我要讲一下打包文件里呢有两个server文件 任意一个都可以用,server代码多,可控性强,server1代码少可控性弱.
你拿到的文件应该是这样的目录:
https://raw.githubusercontent.com/UnityMer/server/master/webServer/static/img/01.png
使用方法首先 win+r 运行cmd进入到webserver目录下输入npm i .安装用到的第三方模块
https://raw.githubusercontent.com/UnityMer/server/master/webServer/static/img/02.png
2.删除static目录下所有文件夹及文件,替换成你的文件当然默认里面有测试文件可以先不删.
3.cmd 输入 node server.js或npm start来启动服务
https://raw.githubusercontent.com/UnityMer/server/master/webServer/static/img/03.png
4.打开浏览器访问127.0.0.1:2333/index.html默认设置的是2333端口可自行修改.
https://raw.githubusercontent.com/UnityMer/server/master/webServer/static/img/04.png
static/image/hrline/1.gif
下面是代码这是第一个文件也是推荐使用的
/*
* @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基于内置模块)
*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 = /\.(+)$/,
encodeREG = /^(PNG|GIF|JPG|WEBP|BMP|ICO|SVG|MP3|MP4|WAV|OGG|M3U8)$/i,
encoding = '',
suffix = suffixREG.test(pathname) ? suffixREG.exec(pathname) : 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 关闭运行`);
});
static/image/hrline/1.gif
这是第二个文件的代码
/*
* @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!');
}); 楼主字体太小了点{:10_266:}
看的眼睛疼
页:
[1]