2)从一个简单的例子开始

Node.js开发 Web服务 编码问题 全栈开发 问答群
本文介绍了如何从零开始创建一个简单的Node.js Web服务。首先,在VSCode中创建一个空目录,并生成`package.json`文件,定义项目的基本信息,如项目名称、版本号、入口文件等。接着,创建`index.js`文件,使用Node.js内置的`http`模块创建Web服务实例,并监听指定端口。通过命令行执行`npm run dev`启动服务,浏览器访问指定端口即可看到返回的“你好,世界!”信息。文章还提到如何通过设置`Content-Type`头部参数解决编码问题,并强调后续开发将围绕此基础框架进行扩展。最后,鼓励读者动手实践,并提供了问答群以便解决疑问。
文章内容
思维导图
常见问题
社交分享

首先,在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,就表示返回一个普通的文本内容。

千万不要光看不写哦,请动手试试吧,如果还有疑问,请到问答群艾特我,下个章节,我们不见不散~

思维导图生成中,请稍候...

问题 1: 如何创建一个Node.js项目的基本文件?
回答: 在VSCode编辑器中打开一个空目录,然后创建一个名为package.json的文件。这是Node.js项目的基本文件,类似于物品清单。

问题 2: package.json文件中的type属性有什么作用?
回答: type属性用于指定项目的模块系统。在本例中,设置为module,表示使用ES模块语法。

问题 3: 如何启动一个简单的Web服务?
回答: 首先从Node.js内置的http模块中导出createServer方法,创建一个Web服务实例,并选择一个端口进行监听。最后在命令行执行npm run devnode index.js来启动服务。

问题 4: 为什么在浏览器中返回的内容显示为乱码?
回答: 这是因为未设置返回数据的编码格式。需要在返回数据之前,设置Content-Type头部参数的charsetutf-8

问题 5: 如何返回不同类型的文件(如HTML、图片、CSS等)?
回答: 只需在返回数据时设置好Content-Type头部参数,指定返回文件的类型。例如,返回HTML时设置为text/html,返回图片时设置为image/png等。

问题 6: package.json文件中的dev脚本有什么作用?
回答: dev脚本用于通过Node.js执行index.js文件,从而启动Web服务。

问题 7: 如何确认Web服务已成功启动?
回答: 执行npm run dev后,命令行会出现一个闪动的光标,表示Web服务已启动并正在监听端口消息。

问题 8: 如何在浏览器中访问启动的Web服务?
回答: 在浏览器地址栏中输入http://127.0.0.1:8000并回车,即可访问启动的Web服务。

问题 9: 本课程的主要学习方向是什么?
回答: 本课程以Web全栈开发的思路为主干,重点讲解如何构建和完善一个Web服务框架。

问题 10: 如果遇到问题或疑问,如何寻求帮助?
回答: 可以在课程的问答群中艾特作者进行提问,作者会及时解答相关问题。