陈随易的Node.js全栈实验指南

MIME，全称“多用途互联网邮件扩展类型”。这名称相当学术，用人话来说就是：我们浏览一个网页的时候，之所以能看到html文件展示成网页，图片可以正常显示，css样式能正常影响网页效果，js脚本可以正常运行，视频可以正常播放，字体可以自定义，都跟MIME有着密不可分的关系。当我们引入CSS的时候，会写一个type=“text/css”<link rel="stylesheet" type="text/css" href="./index.css" />当我们引入JS的时候，会写一个type="text/javascript"<script type="text/javascript" src="./index.js"></script>这就是MIME类型。对于浏览器来说，它从服务器拿到的资源，不管是CSS还是JS还是HTML，都是一串字符串。要让CSS、JS、HTML各司其职，做好它该做的事情，就要用MIME来进行判断。当我们从服务器发起一个HTTP请求，那么HTTP返回的Content-Type属性，就对应了我们说到的这个MIME类型。以上动图，每个请求文件都有其对应的Content-Type属性和值，不同的文件值不一样。我们能够看到一个个正常的网页，就是通过Content-Type来决定请求的文件如何渲染，如何执行，如何显示的。但是，在上一章【浏览器显示一个网页】中，我们并没有看到返回Contnet-Type属性，网页也能正常显示，这是为什么呢？因为，经过这么多年的发展，现代浏览器已经具备较好的容错能力，即使在某些情况下MIME类型缺失或错误，它们也能够根据上下文推断资源类型并正确解析。如果我们明确设置资源的Content-Type值，比如上方截图中，将CSS的返回MIME类型Content-Type的值设置为text/html，则CSS就会用HTML类型来解析，从而导致字体并没有变成红色。这就是MIME的作用，我们要用Node.js开发一个Web框架，MIME是必须要了解的一个内容。不同的资源类型，要设置好正确的MIME类型。那么接下来呢，我们再来讲一讲HTTP，全称：超文本传输协议。如上图，浏览器向服务器发起一个HTTP请求，服务端则给浏览器返回对应的内容。HTTP请求分为4部分，分别是请求行、请求头、空行、请求体。HTTP响应也凤尾4部分，分别是响应行、响应头、空行、响应体。其实HTTP请求和响应是一样的，只不过名词不一样而已。如上图所示，我们通过浏览器的调试面板，可以看到请求和响应的具体内容。其中（1）处是请求行，（2）处是请求头，（3）处是响应头。那么标头紧挨着的“负载”，就是请求体。负载右边“预览”就是响应体。预览右侧的“响应”也是响应体，这是返回数据的原始格式，预览只是可以更方便地查看和操作响应体。了解和认识MIME和HTTP请求，是Web全栈开发的前提和基础。下一节内容，我们继续完善Web框架，最终用我们自己写的Web框架，做一个前后分离的，个人博客项目。

上一章，我们了解到，如何通过第二章的极简Web的例子来演示如何查看官方文档。为什么要把查阅官方文档放在前面的章节说明呢？因为查看文档是一个很重要的能力，就跟查字典一样。回想一下，我们读小学，初中的时候，老师是不是专门教过如何查阅字典呢？不知道现在还是不是这样，笔者以前读小学，初中，新华字典是每个人书桌必备的。所以，如果你在学习Node.js的过程中，或者学习其他技术，都可以用此方法来对语言，技术等进行学习和了解。那么本章呢，我们继续在代码方面做一些推进，当浏览器发起请求的时候，返回一个网页并正确渲染网页中涉及到的CSS、JS脚本等资源。简单直接一点，直接把HTML字符串返回，哈哈。不要忘记启动Web服务哦，然后到浏览器访问，可以看到正确地显示了HTML效果。继续，加点料，把CSS写进去。很简单的效果，让body中的文字变成红色。不出所料，尽在掌控，是不是很简单？来，加点难度。把头部的样式单独放到一个文件中，用link标签引用。怎么回事？文字怎么没变色？还有，index.css文件怎么返回的是html内容呢？不仅如此，浏览器一共发送了3个请求，返回的内容也都是一模一样的，有蹊跷。我们再回过头去看看代码，可以发现，我们每次请求，都返回了同样的内容。那么我们要怎么做，才能让不同的请求返回不同的内容？很简单，if判断就完事了。但是，怎么判断？判断什么参数呢？也很简单，打印就完事了，打印谁呢？打印req参数。知道笔者的这个课程为什么叫做“实验指南”了吗？这个就是笔者的学习方式，哪里不懂，打印出来看，不要去猜，要用眼睛去观察，要不断地做实验，用数据说话。打印的参数很多，我们抽丝剥茧，找到这个关键的地方，恰好是那3个请求内容。现在知道怎么判断，判断谁了吗？没错，就是url。我们约定以下规则：1，如果url=/，则返回HTML页面。2，如果url=/index.css，则返回CSS样式。3，如果url=/favicon.ico，则返回网页标题栏的收藏图标。很简单的判断，不同的路径返回不同的内容。另外，收藏图标用到了文件读取方法，很简单，看下官方文档，搜索下资料就懂了，不多赘述。可以看到，收藏图标有了，CSS样式也生效了，3个请求返回也不一样了。好像一切都完美了？其实不然，由于浏览器的包容性，一些玄机还暗藏其中，且听下回分解。

上回我们说到，创建了一个极简的Web服务，监听了端口，设置了正确的编码，成功地在浏览器看到了返回的内容“你好，世界！”。那么本章节呢，我们通过一个简单的例子来分析，如何有效地查看官方文档。首先，要知道官方文档在哪里，Node.js的官网地址是 https://nodejs.org 。点击箭头指向的地方，就是官方文档。（1）处就是我们代码中创建一个Web服务用到的HTTP模块。（2）处就是用到的创建Web服务的createServer方法。点击（2）处后，就能看到上图关于createServer方法的详细说明了。为方便对比，我们把上节课的代码放到这。可以发现，（3）处和（4）处，都是中括号，表示什么意思呢？就是说，这里的参数可有可无，可写可不写，我们来试试。看到没有，也有一个闪烁的光标，说明服务启动了，官方文档，诚不欺我。笔者经常看正版的官方文档，因为什么呢？里面的信息及时、准确、详细。对于掌握一个技术的细节，非常有用。那么既然成功启动了Web服务，还说什么呢，访问一下呗。哎，不出意外地，看上图标记处，浏览器一直在加载中，等了很久都没有内容。所以呢，光是创建一个Web服务，不提供任何参数，也是没有用武之地的。那么我们再往回看，（1）处的 options 和（2）处的 requestListener 分别表示什么呢？你可以这么理解，如果把Web服务比做一个“机器人”，那么 options 就用来描述它的身高，体重，颜色，最多能待机多久，最大能携带多少的重物，多久没回答你的问题算超时等等。而 requestListener，则表示机器人接受到来自触觉，视觉，听觉的数据后，该如何处理进行反馈。所以你看，极简Web的例子中是不是当收到请求后，设置为不会产生乱码的编码，然后返回“你好，世界！”呢。这就是请求和响应，也可以叫做一问一答。Web服务就是建立在一问一答的基础上的。浏览器不断地向Web服务发送问题：1，我要一个html页面。2，页面中有js脚本，我也要。3，还有个CSS样式，我还要。4，还有好几个图片，快给我。服务器不断地向浏览器返回响应：1，html页面给你了。2，js也给你了。3，css收到了吧。4，给给给，图片。天下武功，唯快不破。浏览器和Web服务器之间一问一答的时间，只有几十毫秒。而且它们之间，一次性可以进行多个问答，所以才让我们看到了网页刷刷地一下就出来了，这就是我们每天上网冲浪的基础。但是也有页面卡顿，白屏的时候，什么问题呢？网络慢，图片大，Web服务器没返回，无外乎此。那么继续回到文档的艺术，这个方法还没说完呢。options 属性中，有这么一个参数，最大Http头消息大小，默认值是16384字节，也就是16KB。让我们来干点坏事，把这个值设置为1。记得，重新启动服务，然后到浏览器访问。咦，不返回“你好，世界！”了，而且在（5）处，有个431的Http错误码，这是什么意思呢？我们来看看官方解释：http状态码哎，对上了，请求内容首部太大啦。什么是请求首部呢？我们简单说一下，更多细节呢，请到笔者的问答群交流，不然这本小册，得变成大册。浏览器中，跟着上图的圆圈点击，其中（6）处就是头部，就是一问一答中的“问“，（7）处就是Web服务器的响应，就是一问一答中的“答”。那个大的方框框住的，就是 maxHeaderSize 属性的管控范围了。这么多字摆在这，明显大于1个字节，服务器当然不会返回内容啦。不信这个邪？我们改成10万看看。这不就来了吗~记得重启Web服务啊，靓仔！所以你能看到，每个属性，都有大大的作用，存在即有理，有时候你没有用到，不代表它没有作用。同时呢，你发现一个问题没有：为什么没有提供 options，只有一个监听函数的时候，也能正常运行呢？按照官方文档规范，第一个参数不应该是对象，第二个才是监听函数吗？所以，就算没有 options，第一个参数是不是设置为空对象才合理呢？同学，我知道你问题很多，这个问题问得好。我知道你很急，但是请你别急。实现很简单，判断 createServer 的第一个参数，如果是函数，那就把 options 设置一个默认值就行了。但是的但是，正如笔者第一章所说，我不是这个领域的专家，我只是一个编程界的老师傅。我不懂原理，不懂底层，真实的createServer实现我不清楚，但是要我判断一个坟墓里是不是死人，我还是能猜得八九不离十的。有时候真相有那么重要吗？你开车一定要研究清楚发动机原理吗？没必要的对不对，量力而为嘛。笔者早早地就想清楚了这个问题，对自己也非常了解，不是搞钻研的料，已经多年没有深入地研究技术了。但是，在如何把自己熟悉的技术和知识，说清楚，讲明白这个问题上，我算得上是半个专家了。什么是编程思维？能理解一二了吗？这就是笔者自学多年的经验，心得。说得也不少了，我们最后通过看官方文档的艺术，来做一个实践：当Web服务启动后，打印一串字符，“服务已启动，监听端口为：8000”。简单，完事。问题倒不大，但是呢，不太正规。我们继续看官方文档，createServer 执行后，返回了一个什么呢？是一个Server实例。点击此处，我们去一探究竟，原来是一个Server类。我们的代码怎么写的？const server = createServer()。是不是把Server类实例化后赋值给了server，那么这个server就具备了所有Server这个类的属性和方法。文档往回拉，拉到开头处，找到Server类，在这里我们可以一览全貌，所有的属性和方法，尽收眼底，这就是我们能用上 server.listen(8000) 的原因，其实你用 const app = createServer()，然后 app.listen(80000) 也是一样的。点击 server.listen() 后，来到上图，只有短短的一行字，以上就是：listen方法跟net模块的Server方法的 listen 用法一样。看到没有，不光前端有什么组件复用，函数复用啊，人家文档也有，不然费那老劲写重复的内容，那不得烦死人啊。继续，点击圈住部分。发现了新天地，用《桃花源记》来说，那就是：复行数十步，豁然开朗。没想到一个小小的listen函数，这么多戏。咳咳，这么多写法。图中呢，有第一个写法的示例，监听了 error 事件，那么除了error 事件，还有哪些呢？有没有一个事件可以用来监听Web服务器已经启动了呢？我们继续往回拉，找到 listen 处。error 事件看到了，紧邻其后，有一个 listening 事件，点击它。监听端口成功后触发 listening 事件，那么我们照 error 猫画 listening 虎。至此，艺术已成。之后的课程中，不再分享如何看官方文档了，大家举一反三即可。笔者自学的过程中，查阅官方文档的次数是最多的，正如前面所说，它及时，准确，详细。当你掌握了看官方文档的艺术，很多问题都会迎刃而解。而且，例子只要讲一个。低级的教学，是填鸭式，重复地讲，没有思维方式。高级的教学，是启发式，揉碎一个，其他的自己悟。

首先，在VSCode编辑器中打开一个没有任何文件的空目录，然后创建一个package.json文件。本课程代码以截图为主，请大家手动敲一遍，以巩固和加深记忆。这是Node.js项目的基本文件，你可以把我们写一个Node.js项目比作请客吃饭，那么package.json就是物品清单的意思。在这里，我们给项目起名为MeApi。版本号是1.0.0。文件描述就是我的接口框架。语法采用的是module模式。入口文件为index.js。只有个一个dev脚本，作用就是通过Node.js执行index.js文件。本课程以Web全栈开发的思路为主干，如果以上内容你有不清楚的部分（比如type除了module还有什么？入口属性main的作用是什么？脚本如何执行？等等），请在问答群艾特我进行问答。package.json文件创建好之后，我们继续创建index.js文件。非常极简的一个例子，几行代码就把一个Web服务创建好了，这就是我们Web服务的基座，后面的一切都是围绕着它来完善、装饰、点缀。首先呢，需要从Node.js内置的http模块中导出createServer方法，然后用这方法，来创建一个Web服务实例并赋值给server常量。最后再选择一个你喜欢的端口数字，监听来自这个端口收到的消息。当请求到达的时候，就发送你好，世界！给请求端。再次声明，且后续章节不再复述。如果你对什么是端口？端口一共有多少个？等这类跟本课程主干方向有些偏离的发散性问题比较好奇的话，请在问答群里艾特我。这是所有本课程高级档的基本权益，同时也避免本课程文字过于分散影响阅读和学习。那么我们在命令行，执行npm run dev命令，就可以启动web服务了。可以看到dev命令的值node index.js正是我们命令行执行的指令，其实直接在命令行输入node index.js也是一样的。执行完毕后，会看到在命令行有一个闪动的光标（如1处所示），这表示Web服务启动了，并且正在监听端口消息中。然后打开浏览器，输入http://127.0.0.1:8000并回车，就能看到返回的内容了。等等，怎么返回的是看不懂的文字，我们的你好，世界！呢？！如果你学习过html的话，一定知道这是再正常不过的编码问题，那么在Node.js中如何解决这个问题呢？只需要在返回数据之前，设置好返回数据的头部参数Content-Type的编码charset为utf-8就行了。至此，一个极简的Web服务框架体验就完成了。还记得我前面说的这就是我们Web服务的基座，后面的一切都是围绕着它来完善、装饰、点缀。吗？没错，如果我们要返回html页面，返回图片，返回css，返回js，只需要设置好返回文件的类型就可以了。这里的{'Content-Type':'text/plain;charset=utf-8'}中的text/plain，就表示返回一个普通的文本内容。千万不要光看不写哦，请动手试试吧，如果还有疑问，请到问答群艾特我，下个章节，我们不见不散~

这是【Node.js Web全栈实验指南】的第一期。报名时间为2024年10月1日之前的任意时间，课程结束时间是2024年12月31日。第一期的课程售价为 165元，这个价格并不高，属于笔者和学员的相互实验和探索，所以提供了最低2个月的学习周期。本课程大概每周发布 1-2 个章节 (根据实际情况变动)，请耐心等待，认真学习，多多探讨。课程有三种交付模式：课程小册 + 问答群 + 视频教程。购买小报童后，可以永久查看 课程小册 并进入课程 问答群。视频教程将在B站发布，由于不能跟小报童互通，所以视频教程是需要单独付费的。目前视频课程还没正式发布和定价，敬请期待。在问答群，可以毫无顾忌地问出跟课程有关的学习问题 (不包括你的业务问题)。由于是第一期，没有往期参考，不管是笔者还是学员们，都是摸着石头过河，需要通过这一期积累课程和服务经验。课程分为 2 大内容：第一部分首先从 0 实现一个简单的 Web 框架，包括但并不限于以下内容：路由系统、日志系统、鉴权系统、文件上传、静态服务器、邮件发送等。第二部分其次基于这个 Web 框架，实现一个完整的个人博客项目，包括但并不限于以下内容：登录注册、留言墙、文章的增删改查，后台管理 (菜单，权限，角色，登录日志等)，数据统计等。开发环境准备：本课程使用的 Node.js 版本不低于 v20，这个版本提供了一些不错的功能特性。由于笔者常用的是 Windows 系统，所以课程也均在 Windows 系统下进行开发和演示。默认使用的编辑器是VSCode，请提前安装好，有自己习惯的编辑器也没问题。除 Node.js 外，本课程还会涉及到 Redis、Mysql 组件，请提前知悉。课程采用 循序迭代 的方式进行，先实现最小可用，再逐步完善优化。课程最终的目标就是，让每个学员可以学会 Web 框架的实现细节和思考方式，通过个人博客的前后端项目，完整掌握 Node.js 全栈开发的能力。