主要介绍搭建静态web服务得一个过程
目录
- 什么是Node.js
- 安装node
- node.js得http模块 url模块 以及supervisor自动启动服务插件
- node模块：核心模块，文件模块
- 第三方模块、插件得应用
- fs文件模块
- 封装一个静态WEB服务器
- 路由
- ejs后端模板渲染引擎
10.get post方法
1.什么是Node.js
node.js是javascript语言得服务器运行环境，提供了大量得工具库，使得javascript可以调用操作系统级别得api，
node.js内部采用谷歌得v8引擎来作为javascript得语言解释器。
node.js基础事件驱动和异步I/O得服务端运行环境
免费得学习资源
https://www.itying.com/goods-240.html
找了个最新比较全得
https://www.bilibili.com/video/av38925557/?p=1
2.安装node
官网找下 ，安装，执行node -v 出来版本号就可以了，这比较简单就不说了。
vscode node语法提示插件node-snippets
node启动文件 node app.js
3.node.js得http模块 url模块 以及supervisor自动启动服务插件
http ：http请求
url：解析url
// 引入http模块请求 内置模块
const { log } = require("console");
const http = require("http");
const url = require("url");
/*
创建一个web服务
request获取请求信息
response 响应信息
*/
http.createServer(function (request, response) {
response.writeHead(200, { "Content-Type": "text/html;charser='utf-8'" });
// 给我们页面输出一句话，并且结束响应 write 不能中文需要输入html 中头部片段，可是输入html 片段
response.write("<head><meta charset='utf-8'></head>");
response.write("中文乱码aaaa<br>");
/*
设置响应头 request.url获取参数 http://127.0.0.1:8088/?aa=10&name=yangjie
解析字符串
parse true 处理 里面得字符串
*/
if (request.url != "/favicon.ico") {
let pa = url.parse(request.url, true);
console.log(pa);
}
response.end("param1111");
}).listen(8088); //监听得端口
supervisor自动启动插件
npm i supervisor -g 全局安装
supervisor XXX.js
4.node模块：核心模块，文件模块
核心模块，文件模块 又称系统模块和自定义模块
如何自定义一个模块，其实很简单，就是建一个js ，引入并且使用其方法，exports module_exports，这里跟vue 差不多，不多讲了。通过require来引入。
这里注意讲下如果是引入得文件在node_modules文件夹下require（“axios”） 会自动去node_modules里面找axios文件夹中得index.js，(如果引入其他名字得文件，需要npm init --yes 自动生成package.json来配置入口文件)–yes强制生成
5.第三方模块、插件得应用
第三方包目录得规范 npm 下载 找包https://www.npmjs.com
package.json:描述文件
bin：存放可执行得二进制文件
lib:存放javascript代码目录
doc：存放文档得目录
根目录生成package.json npm init
Npm 下载包，这个跟vue里完全一样不讲了。
6.fs文件模块
fs是node得内置模块，对文件得一些处理，都是异步得方法 ./ 都是以当前启动的那个文件目录为准
/*
文件模块
fs.stat 检测是文件还是目录
fs.mkdir 创建目录
fs.writeFile 创建写入文件
fs.appendFile 追加文件
fs.readFile 读取文件
fs.readdir 读取目录
fs.rename 重命名
fs.rmdir 删除目录
fs.unlink 删除文件
fs.createReadStream 从文件流读取
fs.createWriteStream 写入文件
管道流
*/
const fs = require("fs");
fs.stat("../node_modules", (err, data) => {
if (err) {
console.log(err);
return;
}
// data.isFile() 判断是否是文件
console.log(data.isFile(), "是文件");
});
// 创建目录 目录存在会报错直接返回
fs.mkdir("./css", (err) => {
if (err) {
console.log(err);
return;
}
console.log("创建目录");
});
// 写入文件 文件存在会替换 不存在就创建
fs.writeFile("./css/index.css", "这是一个css", (err) => {
if (err) {
console.log(err);
return;
}
console.log("写入文件");
});
// 写入文件 文件存在会追加 不存在就创建
fs.appendFile("./css/zhujia.css", "追加点东西", (err) => {
if (err) {
console.log(err);
return;
}
console.log("写入文件");
});
// 读取文件
fs.readFile("./css/zhujia.css", (err, data) => {
if (err) {
console.log(err);
return;
}
// data 十六进制文件 buffer
console.log(data.toString());
console.log("读取文件");
});
// 读取目录
fs.readdir("./css", (err, data) => {
if (err) {
console.log(err);
return;
}
// 当前目录下所有得文件和目录
console.log(data);
console.log("读取目录");
});
// 重命名 功能 1.重命名 2.移动文件
fs.rename("./css/aaa.css", "./newCss/index.css", (err) => {
if (err) {
console.log(err);
return;
}
// 当前目录下所有得文件和目录
console.log("重命名");
});
// 删除目录 目录里面不能有东西
fs.rmdir("./css", (err) => {
if (err) {
console.log(err);
return;
}
// 当前目录下所有得文件和目录
console.log("删除目录");
});
// 删除文件
fs.unlink("./css/aaa.css", (err) => {
if (err) {
console.log(err);
return;
}
// 当前目录下所有得文件和目录
console.log("删除文件");
});
// fs.createReadStream 从文件流读取
var readStream = fs.createReadStream("./data/input.text");
let str = "";
let count = 0;
readStream.on("data", (data) => {
str += data;
count++;
});
readStream.on("error", (error) => {
console.log(error);
});
readStream.on("end", (data) => {
console.log(str, count);
});
// fs.createWriteStream 写入文件
let strWrite = "";
for (let i = 0; i < 1000; i++) {
strWrite += "这是要存起来得数据！111111";
}
let writeStream = fs.createWriteStream("./data/out.text");
// writeStream.write(strWrite);
// // 监听写入完成
// writeStream.end();
// writeStream.on("finish", () => {
// console.log("完成");
// });
// 管道流，从一个流读取数据 放到另一个流中
readStream.pipe(writeStream);
7.封装一个静态WEB服务器
1.创建一个Node http server
2.写一个同步的方法，根据不同的文件后缀，替换不同的Content-Type
mime.json 可以网上查下
3.根据url读取对应的文件
res.write(str)
目录结构
static中的静态页面 自己随便整整
http.js 封装一个run方法
var http = require("http");
const { run } = require("./run");
http.createServer(function (reg, res) {
run(reg, res);
}).listen(8081);
console.log("Server running at http://127.0.0.1:8081/");
run()
const url = require("url");
const fs = require("fs");
const path = require("path");
let commond = require("./commond");
let baseUrlFile = "./static";
// 根据文件后缀 获取Content-Type
exports.run = async (reg, res) => {
// 获取参数
if (reg.url == "/favicon.ico") {
return;
}
// 获取文件名后缀 处理text/html
let mime = path.extname(reg.url) || ".html";
// console.log(commond.getFileMime(mime), mime);
res.writeHead(200, {
"Content-Type": commond.getFileMime(mime) + ';charset="utf-8"',
});
// 获取url路径 没有的话 给默认
let thisPath = url.parse(reg.url, true).path;
let newPath = !thisPath || thisPath == "/" ? "/index.html" : thisPath;
// 读取文件
let str = commond.read(newPath, baseUrlFile);
res.write(str);
res.end();
};
commond方法
let fs = require("fs");
// 根据文件后缀 获取Content-Type
exports.getFileMime = (extname) => {
// 同步方法
let data = fs.readFileSync("./utils/mime.json");
let mimeObj = JSON.parse(data.toString());
return mimeObj[extname];
};
// 读取页面
exports.read = (url, baseUrlFile) => {
let data;
try {
data = fs.readFileSync(baseUrlFile + url);
return data;
} catch (error) {
data = "页面不存在 404";
return data;
}
};
这样就可以了
8.路由
什么是路由：就是针对不同的url处理不同的业务逻辑,跟vue-router差不多也是定义一批url 和 页面之间的关系
在上面的commond中read方法改一下
let data;
try {
data = fs.readFileSync(baseUrlFile + url);
return data;
} catch (error) {
data = null;
return data;
}
在上面的run.js中改下
顶部，新建一个router.js
const { router } = require("./router");
27行
if (str) {
res.write(str);
res.end();
} else {
// 走路由
router(res, thisPath);
}
router.js
// 根据文件后缀 获取Content-Type
let { readEjs } = require("./commond");
exports.router = async (res, thisPath) => {
// 走路由
let str =
(await readEjs("./ejsView" + thisPath + ".ejs", {
message: "这是动态的EJS数据",
})) || "找不到EJS";
if (thisPath == "/login") {
res.end(str);
} else {
res.end("404 找不到页面");
}
};
9.ejs后端模板渲染引擎
这里怎么用可以看文档
上面router.js中用来EJS
结构增加
在commond中加入readEjs方法
// 读取ejs页面
exports.readEjs = (url, datas) => {
return new Promise((resolve, reject) => {
ejs.renderFile(url, datas, (err, data) => {
if (err) {
resolve(null);
}
resolve(data);
});
});
};
10.get post方法
get方法就是通过url 拼接数据
let param = url.parse(reg.url, true).query;
post 数据接受 post数据是通过流的方式传递的 需要通过流的方式读取
怎么发出psot请求，可以在上面的ejs文件种写个post请求或者 form表单提交，写的请求地址其实就是我们对应的路由，比如./submitData 那么我们在路由种可以做处理 接受数据来
扫一扫
1902
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
