1.node.js 创建服务器的三大步骤（四大步骤）
??????1.引入HTTP协议；
??????2.根据http协议创建服务器：服务器需要遵守http协议规范；
??????3.添加端口监听，用户只有发起针对这个服务器指定的端口请求才进行处理；
?????4.添加对用户请求的监听，监听到用户请求就会调用传入的回调函数进行处理；
????????req:与请求相关的操作都找req；
????????res:与响应相关的操作都找res；
? ?注意：启动服务器指令为：node 当前js文件路径（页面输入服务器地址）?
// 1.引入HTTP协议
const http = require('http')
// 2.根据http协议创建服务器
let server = http.createServer()
// 3.添加端口的监听
server.listen(3001, () => {
console.log('服务器开启了，地址是： http://127.0.0.1:3001')
})
// 4.添加用户请求的监听，如果有用户请求就进行处理
server.on('request', (req, res) => {
// 响应一些内容到客户端：只能响应字符串格式--json格式
// res.end：end可以将内容响应回客户端，是res的内置方法
res.end('hello world')
})
2.响应页面资源文件
? ? ?1. 所有资源在服务器端本质都是文件，所以响应页面资源的本质就是读取文件内容响应；
? ? ?2. 可以使用 readFile来读取文件，并将其内容返回；
????????readFile：有三个参数（文件路径，文件格式，回调函数）
? ? ?3.样式文件可以使用 indexOf来进行判断；
server.on('request', (req, res) => {
console.log(req.url)
if (req.url == '/') {
// 所有资源在服务器端本质都是文件，所以响应页面资源的本质就是读取文件内容响应
fs.readFile('./views/index.html', (err, data) => {
if (err) {
res.end('err')
} else {
res.end(data)
}
})
}
// 处理css资源文件，使用indexOf进行判断
else if (
req.url.indexOf('/css/') != -1 ||
req.url.indexOf('/js/') != -1 ||
req.url.indexOf('/images/') != -1
) {
fs.readFile(__dirname + req.url, (err, data) => {
if (err) {
res.end('err')
} else {
res.end(data)
}
})
}
})
3.node 对请求做出相应相应
? ?1.添加一个接口，能够相应相应的数据，请求的规则由自己定义；
? ?2.判断发起的什么请求，请求有没有相应的参数需要传递；
3.1：这是个get请求-可以带参和无参(返回所有数据)；
? ? ? 1.判断请求和请求路径是否正确；
? ? ? 2.正确后配置防止乱码?res.setHeader("Content-Type", "application/json;charset=utf-8");
? ? ? 3.使用 queryString.parse:将key=value&key1=value1这种格式的参数字符串转换为{key=value,key1:value1}，方便用于判断；
? ? ? 4.对其做出相应数据转换并返回即可；
else if (req.method == "GET" && req.url.indexOf("/getList") != -1) {
fs.readFile("./Testdata/data.json", "utf-8", (err, data) => {
if (err) {
res.end("err");
} else {
res.setHeader("Content-Type", "application/json;charset=utf-8");
// 1.先去获取参数：get方式的参数在_url__中拼接
// console.log('req.url--', req.url)
// let search = req.url.split('?')[1]
// queryString.parse:将key=value&key1=value1这种格式的参数字符串转换为{key=value,key1:value1}
// console.log('req.url--', queryString.parse(search))
let params = queryString.parse(req.url.split("?")[1]);
// 2.如果有参数：根据参数实现数据的过滤--查询
// heroName:由于后台处理的时候，只会获取heroName名称的参数，说明前端发起请求的时候一定要传递这个名称的参数
if (params.heroName) {
// 1.获取--字符串
// 2.转换--js数组
let arr = JSON.parse(data);
// 3.数据操作--增加删除修改和查询
arr = arr.filter(function (value) {
return value.cname.indexOf(params.heroName) != -1;
});
// 4.转换--json字符串
// 5.写入|存储|响应
res.end(JSON.stringify(arr));
}
// 3.如果没有参数
else {
res.end(data);
}
}
});
}
? ??
3.2：post请求-进行数据新增
? ? ? 1.这个需要注意的是post 参数需要使用两个事件；
? ? ? 2. req.on('data',(chunk)=>{}):post方式支持传递大容量的参数，但是服务器为了提升性能，要求大容量的参数分批(块)传递，每次接收到一块数据，就会触发data事件，chunk就是本次触发所接收到的参数，所以我们要定义一个变量拼接每次接收到的参数数据；
? ? ? 3.?req.on('end',()=>{})：当所以有参数都接收完毕，就会触发end事件，在end事件的回调函数中进行下一步处理；
// 添加一个接口，能够实现英雄数据的新增
// post /addHero {cname:'' ,skin_name:''} id由我们后台生成
else if (req.method == "POST" && req.url == "/addHero") {
// 接收post方式传递的参数，最终需要一个对象
let str = "";
req.on("data", (chunk) => {
str += chunk;
});
req.on("end", function () {
// { cname: 'aaa', skin_name: 'bbbb' }
let newHero = JSON.parse(str);
// 先读取原始数据文件
fs.readFile("./Testdata/data.json", "utf-8", (err, data) => {
if (err) {
res.end(JSON.stringify({ code: 1, message: "添加失败" }));
} else {
// 转换为js数组
let arr = JSON.parse(data);
// 生成id
newHero.id = arr.length > 0 ? +arr[arr.length - 1].id + 1 : 1;
// 数据的添加
arr.push(newHero);
// 再进行写入---转换为字符串
fs.writeFile("./Testdata/data.json", JSON.stringify(arr), (err) => {
if (err) {
res.end(JSON.stringify({ code: 1, message: "添加失败" }));
} else {
res.end(JSON.stringify({ code: 0, message: "添加成功" }));
}
});
}
});
});
}
? ? ??
总结：以上就是 node 简单搭建服务器和页面资源响应加上两个请求的介绍
下面是所有代码的集合-可以直接拷贝去看下代码如何运行的，这里还需要创建一个文件用来存放所有数据-用于增删改查-我这里的文件叫做（Testdata/data.json）
const http = require("http");
const fs = require("fs");
const queryString = require("querystring");
const server = http.createServer();
server.listen(3002, () => {
console.log("http://127.0.0.1:3002");
});
server.on("request", (req, res) => {
if (req.url == "/") {
fs.readFile("./views/index.html", (err, data) => {
if (err) {
res.end("err");
} else {
res.end(data);
}
});
}
else if (
req.url.indexOf("/css/") != -1 ||
req.url.indexOf("/js/") != -1 ||
req.url.indexOf("/images/") != -1
) {
// fs.readFile('.' + req.url, (err, data) => {
fs.readFile(__dirname + req.url, (err, data) => {
if (err) {
res.end("err");
} else {
res.end(data);
}
});
}
else if (req.method == "GET" && req.url.indexOf("/getList") != -1) {
fs.readFile("./data/data1.json", "utf-8", (err, data) => {
if (err) {
res.end("err");
} else {
res.setHeader("Content-Type", "application/json;charset=utf-8");
let params = queryString.parse(req.url.split("?")[1]);
if (params.heroName) {
let arr = JSON.parse(data);
arr = arr.filter(function (value) {
return value.cname.indexOf(params.heroName) != -1;
});
res.end(JSON.stringify(arr));
}
else {
res.end(data);
}
}
});
}
else if (req.method == "POST" && req.url == "/addHero") {
let str = "";
req.on("data", (chunk) => {
str += chunk;
});
req.on("end", function () {
let newHero = JSON.parse(str);
fs.readFile("./data/data1.json", "utf-8", (err, data) => {
if (err) {
res.end(JSON.stringify({ code: 1, message: "添加失败" }));
} else {
let arr = JSON.parse(data);
newHero.id = arr.length > 0 ? +arr[arr.length - 1].id + 1 : 1;
arr.push(newHero);
fs.writeFile("./data/data1.json", JSON.stringify(arr), (err) => {
if (err) {
res.end(JSON.stringify({ code: 1, message: "添加失败" }));
} else {
res.end(JSON.stringify({ code: 0, message: "添加成功" }));
}
});
}
});
});
}
});
|