node.js搭建一个简易的服务器

已于 2023-03-13 20:09:30 修改
阅读量3.7k 收藏 14
点赞数 4
文章标签： 服务器 学习 node.js
于 2022-12-01 00:23:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58190023/article/details/128109235
版权

一、什么是请求

 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、分析

const http = require("http");

// 1. 创建一个服务器
const server = http.createServer(function (req, res) {
    console.log(req.url);
    
});

// 2. 给服务监听一个端口号
server.listen(8080, () => {
    console.log('恭喜你，服务器启动成功');
    console.log('目前正在监听8080端口! ');
    console.log('基准地址：http://localhost:8080');
});

const http = require("http");
const url = require("url");

// 1. 创建一个服务器
const server = http.createServer(function (req, res) {
    console.log(url.parse(req.url,true));
    
});

// 2. 给服务监听一个端口号
server.listen(8080, () => {
    console.log('恭喜你，服务器启动成功');
    console.log('目前正在监听8080端口! ');
    console.log('基准地址：http://localhost:8080');
});

 2、代码实现

const http = require("http");
const url = require("url");
const fs = require("fs");

// 1. 创建一个服务器
const server = http.createServer(function (req, res) {
    const { pathname, query } = url.parse(req.url, true);
    console.log(pathname, query);

    if (pathname === "/a") {
        // 1. 读取 ./client/views/index.html 文件
        fs.readFile("./client/views/index.html", "utf-8", function (err, data) {
            if (err) return console.log(err);

            // console.log(data)   
            // 通过 res.end()  返回给浏览器
            res.end(data);
        });
    }

    if (pathname === "/b") {
        fs.readFile("./client/views/list.html", "utf-8", function (err, data) {
            if (err) return console.log(err);

            // console.log(data)
            res.end(data);
        });
    }
    1
});

// 2. 给服务监听一个端口号
server.listen(8080, () => {
    console.log('恭喜你，服务器启动成功');
    console.log('目前正在监听8080端口! ');
    console.log('基准地址：http://localhost:8080');
});

 （二）配置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代码

服务器代码实现 

const http = require("http");
const url = require("url");
const fs = require("fs");
const path = require("path");

const server = http.createServer(function (req, res) {
    const { pathname, query } = url.parse(req.url, true);
    // html的格式
    if (/^\/views/.test(pathname)) {
        // 拿到文件名
        const { base } = path.parse(pathname);

        // 读取对应文件返回给请求者
        fs.readFile(`./client/views/${base}`, "utf-8", function (err, data) {
            if (err) return console.log(err);
            res.end(data);
        });
    }
    // css的样式
    if (/^\/style/.test(pathname)) {
        // 拿到文件名
        const { base } = path.parse(pathname);
        // 读取对应文件返回给请求者
        fs.readFile(`./client/css/${base}`, "utf-8", function (err, data) {
            if (err) return console.log(err);
            res.end(data);
        });
    }
});

// 2. 给服务监听一个端口号
server.listen(8080, () => {
    console.log('恭喜你，服务器启动成功');
    console.log('目前正在监听8080端口! ');
    console.log('基准地址：http://localhost:8080');
});

 （三）配置静态资源

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代码

 服务器代码实现 

const http = require("http");
const url = require("url");
const fs = require("fs");
const path = require("path");

const server = http.createServer(function (req, res) {
    const { pathname, query } = url.parse(req.url, true);
    console.log(path.parse(pathname));
    if (/^\/static/.test(pathname)) {
        /*
            path.parse(pathname);
            {
                root: '/',
                dir: '/static',
                base: 'list.html',
                ext: '.html',
                name: 'list'
            }
        */
        // 拿到文件的后缀名与文件名
        const { base, ext } = path.parse(pathname);

        // 根据后缀名拼接上对应的路径
        let baseUrl = "./client";
        if (ext === ".html") {
            baseUrl += "/views";
        } else if (ext === ".css") {
            baseUrl += "/css";
        }

        // 根据处理过的路径读取对应文件返回给请求者
        fs.readFile(`${baseUrl}/${base}`, "utf-8", function (err, data) {
            if (err) {
                fs.readFile("./404.html", "utf-8", (err, data) => {
                    if (err) return;

                    res.end(data);
                });
                return;
            }
            res.end(data);
        });
    }
});

server.listen(8080, () => {
    console.log('恭喜你，服务器启动成功');
    console.log('目前正在监听8080端口! ');
    console.log('基准地址：http://localhost:8080');
});

（四）配置接口(get)

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

  index和list的html代码

index的js代码 

const xhr = new XMLHttpRequest()
xhr.open('POST', '/api/users/login')

xhr.onload = function () {
    console.log(JSON.parse(xhr.responseText))
}
xhr.send('username=QF001&password=123456')

服务器代码 

const http = require("http");
const url = require("url");
const fs = require("fs");
const path = require("path");

const server = http.createServer(function (req, res) {
    const { pathname, query } = url.parse(req.url, true);

    
    if (/^\/static/.test(pathname)) {
        // 拿到文件的后缀名与文件名
        const { base, ext } = path.parse(pathname);

        // 根据后缀名拼接上对应的路径
        let baseUrl = "./client";
        if (ext === ".html") {
            baseUrl += "/views";
        } else if (ext === ".css") {
            baseUrl += "/css";
        } else if (ext === ".js") {
            baseUrl += "/js";
        }

        // 根据处理过的路径读取对应文件返回给请求者
        fs.readFile(`${baseUrl}/${base}`, "utf-8", function (err, data) {
            if (err) {
                if (ext === ".html") {
                    fs.readFile("./404.html", "utf-8", (err, data) => {
                        if (err) return;

                        res.end(data);
                    });
                } else {
                    res.end("");
                }
                return;
            }
            res.end(data);
        });
    }

    if (/^\/api/.test(pathname)) {
        if (pathname === "/api/users/info" && req.method === 'GET') {

            // 接收到请求, 去数据库 拿到对应的 数据 返回给 请求者
            const info = {
                code: 1,
                message: '请求/users/info接口成功',
                info: {
                    id: 1,
                    name: 'QF666',
                    age: 18
                }
            }

            // 返回给前端
            res.end(JSON.stringify(info))
        }
    }
});

server.listen(8080, () => {
    console.log('恭喜你，服务器启动成功');
    console.log('目前正在监听8080端口! ');
    console.log('基准地址：http://localhost:8080');
});

（五）配置接口(post)

1、post请求

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

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

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

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

list的js代码 

const xhr = new XMLHttpRequest()
xhr.open('POST', '/api/users/login')

xhr.onload = function () {
    console.log(JSON.parse(xhr.responseText))
}
xhr.send('username=QF001&password=123456')

 post的主要代码

post的完整代码 

const http = require("http");
const url = require("url");
const fs = require("fs");
const path = require("path");

const server = http.createServer(function (req, res) {
    const { pathname, query } = url.parse(req.url, true);
    if (/^\/static/.test(pathname)) {
        // 拿到文件的后缀名与文件名
        const { base, ext } = path.parse(pathname);

        // 根据后缀名拼接上对应的路径
        let baseUrl = "./client";
        if (ext === ".html") {
            baseUrl += "/views";
        } else if (ext === ".css") {
            baseUrl += "/css";
        } else if (ext === ".js") {
            baseUrl += "/js";
        }

        // 根据处理过的路径读取对应文件返回给请求者
        fs.readFile(`${baseUrl}/${base}`, "utf-8", function (err, data) {
            if (err) {
                if (ext === ".html") {
                    fs.readFile("./404.html", "utf-8", (err, data) => {
                        if (err) return;

                        res.end(data);
                    });
                } else {
                    res.end("");
                }
                return;
            }
            res.end(data);
        });
    }

    /**
     *  约定, 所有接口相关的, 全都以 /api 开头
     */
    if (/^\/api/.test(pathname)) {
        if (pathname === "/api/users/info" && req.method === "GET") {
            // 接收到请求, 去数据库拿到对应的数据返回给请求者
            const info = {
                code: 1,
                message: "请求/users/info接口成功",
                info: {
                    id: 1,
                    name: "QF666",
                    age: 18,
                },
                youparams: query,
            };

            // 返回给前端
            res.end(JSON.stringify(info));
        }

        if (pathname === "/api/users/login" && req.method === "POST") {

            let str = ''
            req.on("data", (paramsStr) => {
                // 因为请求体内容比较多, 在解析的时候, 可能是分段解析,
                str += paramsStr
            });

            req.on('end', () => {
                console.log(str)    // username=QF001&password=123456
                const info = {
                    code: 1,
                    message: "请求 /users/login 接口 成功",
                    youparams: str,
                };
    
                res.end(JSON.stringify(info));
            })

        }
    }
});

server.listen(8080, () => {
    console.log('恭喜你，服务器启动成功');
    console.log('目前正在监听8080端口! ');
    console.log('基准地址：http://localhost:8080');
});

 2、参数处理

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

list中的js代码

const xhr = new XMLHttpRequest();
xhr.open("POST", "/api/users/login");

xhr.onload = function () {
    console.log(JSON.parse(xhr.responseText));
};

xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.send("username=QF001&password=123456");

// xhr.setRequestHeader("content-type", "application/json");
// xhr.send('{ "username": "QF001", "password": "123456" }');

分析

四、服务搭建的完整代码

（一）JS代码

 （二）HTML和CSS代码

 

 （三）服务器代码

const http = require("http");
const url = require("url");
const fs = require("fs");
const path = require("path");

const server = http.createServer(function (req, res) {
    const { pathname, query } = url.parse(req.url, true);
    if (/^\/static/.test(pathname)) {
        // 拿到文件的后缀名与文件名
        const { base, ext } = path.parse(pathname);

        // 根据后缀名拼接上对应的路径
        let baseUrl = "./client";
        if (ext === ".html") {
            baseUrl += "/views";
        } else if (ext === ".css") {
            baseUrl += "/css";
        } else if (ext === ".js") {
            baseUrl += "/js";
        }

        // 根据处理过的路径读取对应文件返回给请求者
        fs.readFile(`${baseUrl}/${base}`, "utf-8", function (err, data) {
            if (err) {
                if (ext === ".html") {
                    fs.readFile("./404.html", "utf-8", (err, data) => {
                        if (err) return;

                        res.end(data);
                    });
                } else {
                    res.end("");
                }
                return;
            }
            res.end(data);
        });
    }

    /**
     *  约定, 所有 接口相关的, 全都 以 /api 开头
     */
    if (/^\/api/.test(pathname)) {
        if (pathname === "/api/users/info" && req.method === "GET") {
            // 接收到请求, 去数据库 拿到对应的 数据 返回给 请求者
            const info = {
                code: 1,
                message: "请求 /users/info 接口 成功",
                info: {
                    id: 1,
                    name: "QF666",
                    age: 18,
                },
                youparams: query,
            };

            // 返回给前端
            res.end(JSON.stringify(info));
        }

        if (pathname === "/api/users/login" && req.method === "POST") {
            /**
             *  post 请求 传参 世界约定
             *      要么传递 查询字符串, 要么传递 json 字符串
             *
             *  post 请求 传参解析 是 世界约定
             *      在请求头内部 配置 content-type
             *          如果 值 为 application/x-www-form-urlencoded 代表传递是 查询字符串
             *          如果 值 为 application/json 代表传递的 json
             */
            let str = "";
            req.on("data", (paramsStr) => {
                str += paramsStr;
            });

            req.on("end", () => {
                /*
                console.log(req.headers['content-type'])
                {
                    ...
                    'content-type': 'application/x-www-form-urlencoded',
                    ...
                    }
                */
                if (req.headers["content-type"] === "application/json") {
                    str = JSON.parse(str);
                }

                if (
                    req.headers["content-type"] ===
                    "application/x-www-form-urlencoded"
                ) {
                    /**
                     console.log(str); // username=QF001&password=123456
                     let { query } = url.parse("?" + str, true);
                     console.log(query)

                        query === {
                            username: QF001,
                            password: 123456
                        }
                    */

                    str = url.parse("?" + str, true).query;
                }
                const info = {
                    code: 1,
                    message: "请求 /users/login 接口 成功",
                    youparams: str,
                };

                res.end(JSON.stringify(info));
            });
        }
    }
});

server.listen(8080, () => {
    console.log('恭喜你，服务器启动成功');
    console.log('目前正在监听8080端口! ');
    console.log('基准地址：http://localhost:8080');
});
0yizhiyang
关注
  • 4
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
node.js服务器
梅花寺
06-06 1236
制定客户端与服务器之间的通讯规则。不同的协议的作用也不同。HTTP(HyperText Transfer Protocol) 超文本传输协议。协议双方： 浏览器与web服务器请求由浏览器发起的HTTP 协议中明确规定了和的格式(报文)浏览器 请求 资源 要遵守 http 协议： 请求报文（请求行，请求头，请求体）服务器 返回 资源 要遵守 http 协议： 响应报文（响应行，响应头，响应体） 注意点: 小黑窗不要关，它就是服务器 服务器本身不会有主动行为（小黑窗看起来没有任何变化），它在时刻等待客户端
如何快速简单使用node.js搭建一个web服务器
最新发布
07-07
如何快速简单使用node.js搭建一个web服务器
如何通过nodejs快速搭建一个服务器
北京土豆(qqxinxi) 的专栏
10-20 562
/ 通过ap.listen进行服务器的配置，并启动服务器，接收两个配置参数，一个是对应的端口号，一个是启动成功的回调函数。// 通过ap.listen进行服务器的配置，并启动服务器，接收两个配置参数，一个是对应的端口号，一个是启动成功的回调函数。随便写的假数据，按理说应该是查询数据库进行数据的返回的，本文主要进行一些简单的案例，关于复杂的以及数据库的操作，下次再说。// 通过ap.listen进行服务器的配置，并启动服务器，接收两个配置参数，一个是对应的端口号，一个是启动成功的回调函数。
node基础服务器搭建
我还起舞了的博客
07-03 123
1.arguments: 在函数调用时， 会自动在该函数内部生成一个名为 arguments的隐藏对象。该对象类似于数组， 但又不是数组，而是Object对象。可以使用[]获取函数调用时传递的实参。2.当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用。由于arguments在函数被调用时才有效，因此arguments.callee在函数未调用时是不存在的（即null.callee），且引用它会产生异常。
使用Node.js搭建服务器
AGW.的博客
05-28 961
由于实践中很多地方需要搭建服务器，所以整理了一下如何用node.js搭建一个服务器。
从零搭建Node.js服务器端项目(NestJs)
Etc.End的博客
04-08 2607
NestJs是一个用于构建高效、可扩展的 Node.js 服务器端应用程序的开发框架。它利用 JavaScript 的渐进增强的能力，使用并完全支持 TypeScript （仍然允许开发者使用纯 JavaScript 进行开发），并结合了 OOP （面向对象编程）、FP （函数式编程）和 FRP （函数响应式编程）。Nest 在这些常见的 Node.js 框架 (Express/Fastify) 之上提高了一个抽象级别，但仍然向开发者直接暴露了底层框架的 API。
如何快速用node在本地搭建一个服务器
A_Common_Man的博客
04-29 6425
教你如何使用node的原生技术来搭建一个简单的本地服务器，可以让同一局域网的小伙伴都能访问到哦
nodejs服务器搭建
qq_43812868的博客
11-08 349
搭建nodejs服务器首先要安装nodejs运行时，安装完成之后使用js编写服务器内容。编写完之后发布即可。
node.js搭建的一个简单服务器
03-21
在IT领域，Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许开发人员使用JavaScript进行服务器端编程。本教程将深入探讨如何使用Node.js搭建一个简单的服务器。 首先，我们需要安装Node.js。访问Node....
使用node.js搭建服务器
10-19
Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许我们在服务器端使用JavaScript进行开发，这正是我们用Node.js搭建服务器的基础。 首先，我们需要引入几个核心的Node.js模块： 1. `url` 模块：用于...
Node.js-将nodejs操作SQLServer简单化
08-10
将nodejs操作SQL Server简单化
nodejs服务部署在服务器本地不能访问问题
08-09
nodejs服务器部署在服务器，外网不能访问问题
利用node.js本地搭建HTTP服务器
01-20
我们的目的比较简单，利用node.js在本地搭建HTTP服务器，实现hello word。 系统环境： win7 64bitIP:127.0.0.1Node.js:v6.10.2Npm:3.10.10Git:2.12.2.2-64-bit 基本安装： 1.Node.js安装包及源码下载地址为：...
利用node.js如何搭建一个简易的即时响应服务器
10-19
主要介绍了利用node.js如何搭建一个简易的即时响应服务器的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
nodejs-websocket之简单利用node搭建服务器
sogoodboy2的博客
07-02 1551
connect.on('text', data => { console.log('接收到了用户的数据', data) connect.send(data.toUpperCase() + '!总结：以上代码实现了一个基本的websocket服务端，当有客户端连接时打印连接信息，接收到客户端发送的文本消息时转换为大写并返回给客户端。当连接关闭或出现错误时相应进行处理。这段代码是一个使用Node.js的websocket库(nodejs-websocket)创建的服务器，监听端口3000。
nodejs搭建web服务器就是这么简单！
热门推荐
ZACH_ZHOU的博客
05-27 8万+
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。（nodejs官网上的介绍），正如官网上介绍的那样，nodejs确实很牛！怎么个牛法？看看下面的代码就知道了。
Nodejs快速搭建简单的HTTP服务器，并发布公网远程访问
weixin_67596609的博客
07-13 831
Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation（原为 Node.js Foundation，已与 JS Foundation 合并）持有和维护，亦为 Linux 基金会的项目。Node.js 采用 Google 开发的 V8 运行代码，使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能，可优化应用程序的传输量和规模。这些技术通常用于资料密集的即时应用程序。Node.js 大部分基本模块都用 JavaScri
实现node搭建服务器
weixin_44409802的博客
04-01 91
1.终端内使用npm下载express模块。三、下载cors模块，实现前端跨域请求。二、使用express搭建服务器。2.文件夹内新建app.js文件。四、配置解析表单数据的中间件。1.下载cors模块。
用node.js搭建一个http服务器做好接口链接，
04-01
以下是一个简单的使用Node.js搭建HTTP服务器的例子： ```javascript const http = require('http'); // 创建一个HTTP服务器 const server = http.createServer((req, res) => { // 处理请求 if (req.url === '/') { res.write('Hello World!'); res.end(); } else if (req.url === '/about') { res.write('About Us'); res.end(); } else { res.write('404 Not Found'); res.end(); } }); // 监听端口 server.listen(3000); console.log('Server running at http://localhost:3000/'); ``` 上述代码中，我们使用Node.js的`http`模块创建了一个HTTP服务器，并在回调函数中处理不同的请求。例如，当请求路径为`/`时，服务器会返回一个`Hello World!`的响应，当请求路径为`/about`时，服务器会返回一个`About Us`的响应。如果请求路径不是这两个路径之一，服务器会返回一个`404 Not Found`的响应。 我们可以在终端中运行这个脚本，并在浏览器中输入`http://localhost:3000/`来访问服务器。如果一切正常，你应该能看到`Hello World!`的响应。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值