一步步教你使用node搭建一个小页面

目录

• 介绍
• 完成展示
• 首页
• 详情页面
• 前置知识
• fs
• readFileSync
• writeFileSync
• readFile、writeFile
• http
• url
• 实现过程
• 总结

介绍

这个小demo是Node.js, Express, MongoDB & More: The Complete Bootcamp系列课程的第一个demo，本篇文章主要介绍实现过程以及可能带来的思考。

完成展示

首页

详情页面

前置知识

首先我们需要了解一些知识，以便完成这个demo

fs

首先是node对文件的操作，也就是fs模块。本文只介绍一些简单的操作，大部分是例子中需要用到的方法。想要了解更多可以去API文档去查找。

首先引入fs模块：const fs = require("fs");

readFileSync

const textIn = fs.readFileSync("./txt/append.txt", "utf-8");

上面代码展示的是readFileSync的使用，两个参数中，第一个参数是要读取文件的位置，第二个参数是编码格式encoding。如果指定encoding返回一个字符串，否则返回一个Buffer。

writeFileSync

fs.writeFileSync("./txt/output.txt", textOut);

writeFileSync毫无疑问是写文件，第一个参数为写文件的地址，第二个参数是写入的内容。

readFile、writeFile

上面的两个API都是同步的读写操作。但是nodeJs作为一个单线程的语言，在很多时候，使用同步的操作会造成不必要的拥堵。例如等待用户输入这类I/O操作，就会浪费很多时间。所以 js中有异步的方式解决这类问题，nodejs也一样。通过回调的方式来解决。

fs.readFile("./txt/append.txt", "utf-8", (err, data) => {
  fs.writeFile("./txt/final.txt", `${data}`, (err) => {
    console.log("ok");
  });
});

http

createServer

http.createServer(requestListener);

http.createServer() 方法创建一个HTTP Server 对象，参数requestListener为每次服务器收到请求时要执行的函数。

server.listen(8001, "127.0.0.1", () => {
  console.log("Listening to requests on port 8001");
});

上面表代码表示监听8001端口。

url

url.parse

这个模块可以很好的处理URL信息。比如当我们请求http://127.0.0.1:8001/product?id=0的时候通过url.parse可以获取到很多信息。如下图：

实现过程

对于已经给出的完成页面，我们可以看到在切换页面时URL的变化，所以我们需要得到用户请求时的 URL地址，并根据地址展示不同的页面。所以我们通过path模块得到pathname，进行处理。

对于不同的请求，我们返回不同的界面。首先对于Overview page界面，由于它的类型是 html界面，所以我们通过writeHead将它的Content-type设置为text/html。

res.writeHead(200, {
      "Content-type": "text/html",
});

其他的几个返回html的页面也是同样的处理。由于前端界面已经给出，我们只需要读取JSON里面的数据，并将模板字符串替换即可。最后我们通过res.end(output)返回替换后的页面。

总结

通过这一个小页面的练习，可以学习到node对文件的操作以及HTTP模块的操作。并对后端有了初步的认识。

到此这篇关于使用node搭建一个小页面的文章就介绍到这了,更多相关node搭建小页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！