• 【学习笔记03】node.js搭建一个简易的服务器

    一、什么是请求

     1. JS内部的ajax就算一个请求，由ajax发送请求, 返回的数据给到了ajax

    2. 在浏览器地址栏内输入地址敲回车，由浏览器发送, 返回的数据给到浏览器

    3. img、link和script这些标签也可以发送请求，由标签发送, 返回的数据给到了标签

    二、请求地址

    http://localhost:8080/a/b/c/index.html

    • 如果请求的地址是 ./out.js，实际请求的地址：http://localhost:8080/a/b/c/out.js
    • 如果请求的地址是 ./a/out.js，实际请求的地址：http://localhost:8080/a/b/c/a/out.js
    • 如果请求的地址是 ../a/out.js，实际请求的地址：http://localhost:8080/a/b/a/out.js
    • 如果请求的地址是 /a.js，实际请求的地址：http://localhost:8080/a.js
    • 如果请求的地址 /a/b.js，实际请求的地址：http://localhost:8080/a/b.js

    三、搭建一个简易的服务器

     （一）基础页面搭建

    1、分析

    1. const http = require("http");
    2.  
    3. // 1. 创建一个服务器
    4. const server = http.createServer(function (req, res) {
    5.     console.log(req.url);
    6.     
    7. });
    8.  
    9. // 2. 给服务监听一个端口号
    10. server.listen(8080, () => {
    11.     console.log('恭喜你，服务器启动成功');
    12.     console.log('目前正在监听8080端口! ');
    13.     console.log('基准地址：http://localhost:8080');
    14. });

    1. const http = require("http");
    2. const url = require("url");
    3.  
    4. // 1. 创建一个服务器
    5. const server = http.createServer(function (req, res) {
    6.     console.log(url.parse(req.url,true));
    7.     
    8. });
    9.  
    10. // 2. 给服务监听一个端口号
    11. server.listen(8080, () => {
    12.     console.log('恭喜你，服务器启动成功');
    13.     console.log('目前正在监听8080端口! ');
    14.     console.log('基准地址：http://localhost:8080');
    15. });

     2、代码实现

    1. const http = require("http");
    2. const url = require("url");
    3. const fs = require("fs");
    4.  
    5. // 1. 创建一个服务器
    6. const server = http.createServer(function (req, res) {
    7.     const { pathname, query } = url.parse(req.url, true);
    8.     console.log(pathname, query);
    9.  
    10.     if (pathname === "/a") {
    11.         // 1. 读取 ./client/views/index.html 文件
    12.         fs.readFile("./client/views/index.html", "utf-8", function (err, data) {
    13.             if (err) return console.log(err);
    14.  
    15.             // console.log(data)   
    16.             // 通过 res.end()  返回给浏览器
    17.             res.end(data);
    18.         });
    19.     }
    20.  
    21.     if (pathname === "/b") {
    22.         fs.readFile("./client/views/list.html", "utf-8", function (err, data) {
    23.             if (err) return console.log(err);
    24.  
    25.             // console.log(data)
    26.             res.end(data);
    27.         });
    28.     }
    29.     1
    30. });
    31.  
    32. // 2. 给服务监听一个端口号
    33. server.listen(8080, () => {
    34.     console.log('恭喜你，服务器启动成功');
    35.     console.log('目前正在监听8080端口! ');
    36.     console.log('基准地址：http://localhost:8080');
    37. });

     （二）配置css

    1、约定一

    • 如果需要访问html文件, 将路径开头写上 /views  后续拼接上对应的文件名
    • 假如要访问 index.html，路径: /views/index.html
    • 假如要访问 list.html，路径: /views/list.html

    2、预定二

    • 如果要访问css文件需要使用 /style 开头 后续拼接上对应的文件名
    • 假如要访问 index.css，路径: /style/index.css
    • 假如要访问  list.css，路径: /style/list.css

    3、代码实现

    index和list的html代码

     index和list的css代码

    服务器代码实现 

    1. const http = require("http");
    2. const url = require("url");
    3. const fs = require("fs");
    4. const path = require("path");
    5.  
    6. const server = http.createServer(function (req, res) {
    7.     const { pathname, query } = url.parse(req.url, true);
    8.     // html的格式
    9.     if (/^\/views/.test(pathname)) {
    10.         // 拿到文件名
    11.         const { base } = path.parse(pathname);
    12.  
    13.         // 读取对应文件返回给请求者
    14.         fs.readFile(`./client/views/${base}`, "utf-8", function (err, data) {
    15.             if (err) return console.log(err);
    16.             res.end(data);
    17.         });
    18.     }
    19.     // css的样式
    20.     if (/^\/style/.test(pathname)) {
    21.         // 拿到文件名
    22.         const { base } = path.parse(pathname);
    23.         // 读取对应文件返回给请求者
    24.         fs.readFile(`./client/css/${base}`, "utf-8", function (err, data) {
    25.             if (err) return console.log(err);
    26.             res.end(data);
    27.         });
    28.     }
    29. });
    30.  
    31. // 2. 给服务监听一个端口号
    32. server.listen(8080, () => {
    33.     console.log('恭喜你，服务器启动成功');
    34.     console.log('目前正在监听8080端口! ');
    35.     console.log('基准地址：http://localhost:8080');
    36. });

     （三）配置静态资源

    1、约定：如果请求html; css; img; video;

    新约定1

    • 以 /static 开头，后续跟着写上对应的目录与文件名
    • 如果访问的是 index.html；路径: /static/views/index.html
    • 如果访问的是 list.html；路径: /static/views/list.html
    • 如果访问的是 index.css；路径: /static/css/index.css

    新约定2

    • 以 /static 开头，后续写文件名
    • 如果我需要访问 index.html；路径: /static/index.html
    • 如果我需要访问 index.css；路径: /static/index.css
    • 注意:两种约定都可以使用，这里使用的是第二种

     index和list的html代码

     服务器代码实现 

    1. const http = require("http");
    2. const url = require("url");
    3. const fs = require("fs");
    4. const path = require("path");
    5.  
    6. const server = http.createServer(function (req, res) {
    7.     const { pathname, query } = url.parse(req.url, true);
    8.     console.log(path.parse(pathname));
    9.     if (/^\/static/.test(pathname)) {
    10.         /*
    11.             path.parse(pathname);
    12.             {
    13.                 root: '/',
    14.                 dir: '/static',
    15.                 base: 'list.html',
    16.                 ext: '.html',
    17.                 name: 'list'
    18.             }
    19.         */
    20.         // 拿到文件的后缀名与文件名
    21.         const { base, ext } = path.parse(pathname);
    22.  
    23.         // 根据后缀名拼接上对应的路径
    24.         let baseUrl = "./client";
    25.         if (ext === ".html") {
    26.             baseUrl += "/views";
    27.         } else if (ext === ".css") {
    28.             baseUrl += "/css";
    29.         }
    30.  
    31.         // 根据处理过的路径读取对应文件返回给请求者
    32.         fs.readFile(`${baseUrl}/${base}`, "utf-8", function (err, data) {
    33.             if (err) {
    34.                 fs.readFile("./404.html", "utf-8", (err, data) => {
    35.                     if (err) return;
    36.  
    37.                     res.end(data);
    38.                 });
    39.                 return;
    40.             }
    41.             res.end(data);
    42.         });
    43.     }
    44. });
    45.  
    46. server.listen(8080, () => {
    47.     console.log('恭喜你，服务器启动成功');
    48.     console.log('目前正在监听8080端口! ');
    49.     console.log('基准地址：http://localhost:8080');
    50. });

    （四）配置接口(get)

    • 约定, 所有数据或接口相关的, 全都以 /api 开头

      index和list的html代码

    index的js代码 

    1. const xhr = new XMLHttpRequest()
    2. xhr.open('POST', '/api/users/login')
    3.  
    4. xhr.onload = function () {
    5.     console.log(JSON.parse(xhr.responseText))
    6. }
    7. xhr.send('username=QF001&password=123456')

    服务器代码 

    1. const http = require("http");
    2. const url = require("url");
    3. const fs = require("fs");
    4. const path = require("path");
    5.  
    6. const server = http.createServer(function (req, res) {
    7.     const { pathname, query } = url.parse(req.url, true);
    8.  
    9.     
    10.     if (/^\/static/.test(pathname)) {
    11.         // 拿到文件的后缀名与文件名
    12.         const { base, ext } = path.parse(pathname);
    13.  
    14.         // 根据后缀名拼接上对应的路径
    15.         let baseUrl = "./client";
    16.         if (ext === ".html") {
    17.             baseUrl += "/views";
    18.         } else if (ext === ".css") {
    19.             baseUrl += "/css";
    20.         } else if (ext === ".js") {
    21.             baseUrl += "/js";
    22.         }
    23.  
    24.         // 根据处理过的路径读取对应文件返回给请求者
    25.         fs.readFile(`${baseUrl}/${base}`, "utf-8", function (err, data) {
    26.             if (err) {
    27.                 if (ext === ".html") {
    28.                     fs.readFile("./404.html", "utf-8", (err, data) => {
    29.                         if (err) return;
    30.  
    31.                         res.end(data);
    32.                     });
    33.                 } else {
    34.                     res.end("");
    35.                 }
    36.                 return;
    37.             }
    38.             res.end(data);
    39.         });
    40.     }
    41.  
    42.     if (/^\/api/.test(pathname)) {
    43.         if (pathname === "/api/users/info" && req.method === 'GET') {
    44.  
    45.             // 接收到请求, 去数据库 拿到对应的 数据 返回给 请求者
    46.             const info = {
    47.                 code: 1,
    48.                 message: '请求/users/info接口成功',
    49.                 info: {
    50.                     id: 1,
    51.                     name: 'QF666',
    52.                     age: 18
    53.                 }
    54.             }
    55.  
    56.             // 返回给前端
    57.             res.end(JSON.stringify(info))
    58.         }
    59.     }
    60. });
    61.  
    62. server.listen(8080, () => {
    63.     console.log('恭喜你，服务器启动成功');
    64.     console.log('目前正在监听8080端口! ');
    65.     console.log('基准地址：http://localhost:8080');
    66. });

    （五）配置接口(post)

    1、post请求

    接收请求体的数据, 有两个事件

    1. req.on('data', () => {}) ；每当开始解析请求体, 就会执行, 回调函数接受一个参数

             这个参数的值就是ajax send发送时携带的参数 (注意: 该函数会多次执行, 次数不确定)

    2. req.on('end', () => {})     这个函数执行的时候, 表明请求体 全部解析完成

    list的js代码 

    1. const xhr = new XMLHttpRequest()
    2. xhr.open('POST', '/api/users/login')
    3.  
    4. xhr.onload = function () {
    5.     console.log(JSON.parse(xhr.responseText))
    6. }
    7. xhr.send('username=QF001&password=123456')

     post的主要代码

    post的完整代码 

    1. const http = require("http");
    2. const url = require("url");
    3. const fs = require("fs");
    4. const path = require("path");
    5.  
    6. const server = http.createServer(function (req, res) {
    7.     const { pathname, query } = url.parse(req.url, true);
    8.     if (/^\/static/.test(pathname)) {
    9.         // 拿到文件的后缀名与文件名
    10.         const { base, ext } = path.parse(pathname);
    11.  
    12.         // 根据后缀名拼接上对应的路径
    13.         let baseUrl = "./client";
    14.         if (ext === ".html") {
    15.             baseUrl += "/views";
    16.         } else if (ext === ".css") {
    17.             baseUrl += "/css";
    18.         } else if (ext === ".js") {
    19.             baseUrl += "/js";
    20.         }
    21.  
    22.         // 根据处理过的路径读取对应文件返回给请求者
    23.         fs.readFile(`${baseUrl}/${base}`, "utf-8", function (err, data) {
    24.             if (err) {
    25.                 if (ext === ".html") {
    26.                     fs.readFile("./404.html", "utf-8", (err, data) => {
    27.                         if (err) return;
    28.  
    29.                         res.end(data);
    30.                     });
    31.                 } else {
    32.                     res.end("");
    33.                 }
    34.                 return;
    35.             }
    36.             res.end(data);
    37.         });
    38.     }
    39.  
    40.     /**
    41.      *  约定, 所有接口相关的, 全都以 /api 开头
    42.      */
    43.     if (/^\/api/.test(pathname)) {
    44.         if (pathname === "/api/users/info" && req.method === "GET") {
    45.             // 接收到请求, 去数据库拿到对应的数据返回给请求者
    46.             const info = {
    47.                 code: 1,
    48.                 message: "请求/users/info接口成功",
    49.                 info: {
    50.                     id: 1,
    51.                     name: "QF666",
    52.                     age: 18,
    53.                 },
    54.                 youparams: query,
    55.             };
    56.  
    57.             // 返回给前端
    58.             res.end(JSON.stringify(info));
    59.         }
    60.  
    61.         if (pathname === "/api/users/login" && req.method === "POST") {
    62.  
    63.             let str = ''
    64.             req.on("data", (paramsStr) => {
    65.                 // 因为请求体内容比较多, 在解析的时候, 可能是分段解析,
    66.                 str += paramsStr
    67.             });
    68.  
    69.             req.on('end', () => {
    70.                 console.log(str)    // username=QF001&password=123456
    71.                 const info = {
    72.                     code: 1,
    73.                     message: "请求 /users/login 接口 成功",
    74.                     youparams: str,
    75.                 };
    76.     
    77.                 res.end(JSON.stringify(info));
    78.             })
    79.  
    80.         }
    81.     }
    82. });
    83.  
    84. server.listen(8080, () => {
    85.     console.log('恭喜你，服务器启动成功');
    86.     console.log('目前正在监听8080端口! ');
    87.     console.log('基准地址：http://localhost:8080');
    88. });

     2、参数处理

    • post请求传参是世界约定，要么传递查询字符串, 要么传递 json 字符串
    • post请求传参解析是世界约定，在请求头内部配置 content-type，
    • 如果值为application/x-www-form-urlencoded 代表传递是查询字符串，
    • 如果值为 application/json 代表传递的 json字符串

    list中的js代码

    1. const xhr = new XMLHttpRequest();
    2. xhr.open("POST", "/api/users/login");
    3.  
    4. xhr.onload = function () {
    5.     console.log(JSON.parse(xhr.responseText));
    6. };
    7.  
    8. xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
    9. xhr.send("username=QF001&password=123456");
    10.  
    11. // xhr.setRequestHeader("content-type", "application/json");
    12. // xhr.send('{ "username": "QF001", "password": "123456" }');

    分析

    四、服务搭建的完整代码

    （一）JS代码

     （二）HTML和CSS代码

     

     （三）服务器代码

    1. const http = require("http");
    2. const url = require("url");
    3. const fs = require("fs");
    4. const path = require("path");
    5.  
    6. const server = http.createServer(function (req, res) {
    7.     const { pathname, query } = url.parse(req.url, true);
    8.     if (/^\/static/.test(pathname)) {
    9.         // 拿到文件的后缀名与文件名
    10.         const { base, ext } = path.parse(pathname);
    11.  
    12.         // 根据后缀名拼接上对应的路径
    13.         let baseUrl = "./client";
    14.         if (ext === ".html") {
    15.             baseUrl += "/views";
    16.         } else if (ext === ".css") {
    17.             baseUrl += "/css";
    18.         } else if (ext === ".js") {
    19.             baseUrl += "/js";
    20.         }
    21.  
    22.         // 根据处理过的路径读取对应文件返回给请求者
    23.         fs.readFile(`${baseUrl}/${base}`, "utf-8", function (err, data) {
    24.             if (err) {
    25.                 if (ext === ".html") {
    26.                     fs.readFile("./404.html", "utf-8", (err, data) => {
    27.                         if (err) return;
    28.  
    29.                         res.end(data);
    30.                     });
    31.                 } else {
    32.                     res.end("");
    33.                 }
    34.                 return;
    35.             }
    36.             res.end(data);
    37.         });
    38.     }
    39.  
    40.     /**
    41.      *  约定, 所有 接口相关的, 全都 以 /api 开头
    42.      */
    43.     if (/^\/api/.test(pathname)) {
    44.         if (pathname === "/api/users/info" && req.method === "GET") {
    45.             // 接收到请求, 去数据库 拿到对应的 数据 返回给 请求者
    46.             const info = {
    47.                 code: 1,
    48.                 message: "请求 /users/info 接口 成功",
    49.                 info: {
    50.                     id: 1,
    51.                     name: "QF666",
    52.                     age: 18,
    53.                 },
    54.                 youparams: query,
    55.             };
    56.  
    57.             // 返回给前端
    58.             res.end(JSON.stringify(info));
    59.         }
    60.  
    61.         if (pathname === "/api/users/login" && req.method === "POST") {
    62.             /**
    63.              *  post 请求 传参 世界约定
    64.              *      要么传递 查询字符串, 要么传递 json 字符串
    65.              *
    66.              *  post 请求 传参解析 是 世界约定
    67.              *      在请求头内部 配置 content-type
    68.              *          如果 值 为 application/x-www-form-urlencoded 代表传递是 查询字符串
    69.              *          如果 值 为 application/json 代表传递的 json
    70.              */
    71.             let str = "";
    72.             req.on("data", (paramsStr) => {
    73.                 str += paramsStr;
    74.             });
    75.  
    76.             req.on("end", () => {
    77.                 /*
    78.                 console.log(req.headers['content-type'])
    79.                 {
    80.                     ...
    81.                     'content-type': 'application/x-www-form-urlencoded',
    82.                     ...
    83.                     }
    84.                 */
    85.                 if (req.headers["content-type"] === "application/json") {
    86.                     str = JSON.parse(str);
    87.                 }
    88.  
    89.                 if (
    90.                     req.headers["content-type"] ===
    91.                     "application/x-www-form-urlencoded"
    92.                 ) {
    93.                     /**
    94.                      console.log(str); // username=QF001&password=123456
    95.                      let { query } = url.parse("?" + str, true);
    96.                      console.log(query)
    98.                         query === {
    99.                             username: QF001,
    100.                             password: 123456
    101.                         }
    102.                     */
    103.  
    104.                     str = url.parse("?" + str, true).query;
    105.                 }
    106.                 const info = {
    107.                     code: 1,
    108.                     message: "请求 /users/login 接口 成功",
    109.                     youparams: str,
    110.                 };
    111.  
    112.                 res.end(JSON.stringify(info));
    113.             });
    114.         }
    115.     }
    116. });
    117.  
    118. server.listen(8080, () => {
    119.     console.log('恭喜你，服务器启动成功');
    120.     console.log('目前正在监听8080端口! ');
    121.     console.log('基准地址：http://localhost:8080');
    122. });
  • 相关阅读:
    【OpenAI】新功能发布
    MobaXterm常用使用功能设置
    Python 和 MatLab 模拟粒子动力系统
    SESSION详解
    linux如何抓包数据
    [附源码]java毕业设计智慧教学平台
    【1】请问什么是 AQS？
    SpringFramework 之EnableAsync
    Java并发编程学习笔记4——共享模型之内存
    二本4年软件测试经验，三面阿里（定薪35K），分享我的心得
  • 原文地址：https://blog.csdn.net/m0_58190023/article/details/128109235