【JavaScript进阶学习】nodeJS内置模块-http(实现有静态资源响应和能处理前端发送的get和post数据的简易web服务器)

1. 创建服务对象:http.createServer((req,res)=>{...})

//引入服务器模块
const http = require("http");
//引入工具模块
const url = require("url");
const fs = require("fs");
//创建服务对象
// 参数1：req表示请求对象：前端到后端的信息，request
// 参数2：res表示响应对象：后端到前端的信息，response
http.createServer((req, res) => {
     //忽略页面标题图标请求
    if (req.url !== "/favicon.ico") {
    //判断非静态资源路由（功能路由），是否含有：/api
        if (req.url.includes("/api")) {
            apiHandle(req, res);   //如果有执行
        } else {
            fileHandle(req, res);  //否则执行
        }
    }
}).listen(3000, () => {  //挂载到3000端口
    console.log("服务器开启成功，地址为：http://localhost:3000");
})

2. 挂载端口:对象.listen（端口号,）
3. 获取请求对象
   • 获取前端请求的地址：

function fileHandle(req, res){
   // 静态资源路由
   const p = url.parse(req.url).pathname;  //解析地址
   fs.readFile("./www"+p, (err, data)=>{     //读取文件
       if(err){
           res.write("404");
       }else{
           res.write(data);
       }
       res.end();    //结束
   })
    }

• 获取前端发送数据的方式：
  • 判断数据发送方式为个体或post…

function apiHandle(req, res) {
   // 接收并解析前端发送过来的数据
   if (req.method === "GET") {  //注意发送方式必须为大写
       // 如果是get数据，数据在url后拼接，解析url即可
       const data = url.parse(req.url, true).query;
       //  然后，再根据数据的不同，进行二级路由处理
       routerHandle(req, res, data);
   } else if (req.method === "POST") {
       // 3. 没有在url拼接，不能通过解析url拿到数据，通过事件获取数据
       // 4. 当前端使用post方式发送数据时，会触发req的data事件
       // 但是data事件每次只能拿到一个数据碎片，有可能多次执行才能拿到所有数据碎片
       // 为了拿到完整数据，需要在每次data事件被触发时将获取到的数据碎片拼接起来
       let str = "";
       //绑定事件
       req.on("data", (chunk) => {
           str += chunk;   //拼接数据碎片
       });
       // 在最后一次data事件执行完毕后，必然会触发一次end事件
       // 在end事件中即可绝对拿到拼接完整的数据
       req.on("end", () => {
           const data = dataParse(str);
           // 然后，再根据数据的不同，进行二级路由处理
           routerHandle(req, res, data);
       })
      }
     }

• 绑定事件
  • 数据： req.on("data"，()=>{})
  • 数据接收： req.on("end"，()=>{})

4. 获取相应对象
   • 向前端响应数据：
   • 向前端响应结束：

  function dataParse(str) {
  const obj = {};
  // abc=678&qwe=456
  str.split("&").forEach(val => {
      obj[val.split("=")[0]] = val.split("=")[1];
  })
  return obj;
  }

5. 能响应静态资源的简易web服务器

     function routerHandle(req, res, data) {
    // 1. 判断路由标志
    switch (data.type) {
        case "login":
            // 2. 执行登录的功能
            login(req, res, data)
            break;
        case "register":
            console.log("注册");
            break;
        default:
            console.log("功能不存在");
    }
    res.end();
  }
 // 登录功能定义
function login(req, res, data) {
    console.log("登录");
    res.end();
 }