使用Node.js 搭建一个静态网站

---

回顾上节的知识点

• Linux 常用命令
• vim编辑器中的常用操作
• node.js 中服务器被请求后返回的 request 的 http协议详情

首先写一个简单的服务器的雏形

const http = require('http');    // 要使用HTTP服务器或客户端功能，引入http模块
const ip   = '192.168.1.9';      // 设置ip地址
const port = 3000;               // 请求端口

// 创建服务器，每次请求都出触发一个匿名函数返回：request 请求和  response 响应；request是http.IncomingMessage的一个实例.response是http.ServerResponse的一个实例

http.createServer((req,res) => {
      res.writeHead(200,{'Content-Type':'text/html'});   // 向请求回复响应头
      res.write("1111111111111");              // 发送一块请求体         
      res.end()                                             // 结束请求
 }).listen(port,ip,() => {                             // 开始在指定的主机名和端口接收连接。
         console.log("Server start");               // 控制台输出信息
 });

效果图

进行初步 封装成函数，一处修改多处改变，提高代码的重用性

简化

引入URL 模块

获取当前访问URL路径部分

URL URL

提取到访问url地址，可以进行一些相关操作，返回给用户！

引入 文件操作模块 fs

读取一个文件内容，例子:

    fs.readFile('/etc/passwd', function (err, data) { 
        if (err) throw err; 
        console.log(data);
    });

回调函数传递了两个参数(err, data),data就是文件的内容。
如果未指定编码方式，原生buffer就会被返回。

读取信息

把 文件读取的信息，返回给前台

使用 fs.readFileSync(filename, [options]); 返回文件名为 filename 的文件内容。
如果 encoding 选项被指定， 那么这个函数返回一个字符串。如果未指定，则返回一个原生buffer。

返回信息

这里文件修改后，前台访问的信息还是之前没被修改过的，因为 没有执行 node server.js 去启动，之前的也没有暂停！更新后重启！

根据上述的小例子，我们是不是可以根据前台访问的url，返回给客户端什么页面呢！对吧！

开始改造！

  const http = require('http');    // 要使用HTTP服务器或客户端功能，引入http模块
  const url  = require('url');     // 引入URL模块，该模块包含用以 URL 解析的实用函数
  const fs   = require('fs');      // 引入文件操作模块 fs

  const ip   = '192.168.1.9';      // 设置ip地址
  const port = 3000;               // 请求端口，端口大于1000
  var server = new http.Server();  // 创建一个server 服务器
  server.listen(port,ip);
  server.on('request',function(req,res){
  // 解析请求过来的URL
  var pathname = url.parse(req.url).pathname;   // 获取URL的路径部分
  // 监听请求的网站，以当前脚本目录为根目录的url地址
  console.log(req.url);
  //  更据请求地址url，让服务器在发送响应前先等待
  switch (pathname) {     // 判断请求路径信息
      case '' || '/':       // 处理网站根目录，指定加载对应的文件
  fs.readFile("./index.html",function(err,content) {
    if(err){
      res.writeHead(404,{'Content-Type':'text/html;charset="UTF-8"'});
      res.write(err.message);
      res.end();
    }else{
      res.writeHead(200,{'Content-Type':'text/html;charset="UTF-8"'});
      res.write(content);
      res.end();
    }
  });
  break;
case '/showlist':
  fs.readFile("./showlist.html",function(err,content) {
    if(err){
      res.writeHead(404,{'Content-Type':'text/html;charset="UTF-8"'});
      res.write(err.message);
      res.end();
    }else{
      res.writeHead(200,{'Content-Type':'text/html;charset="UTF-8"'});
      res.write(content);
      res.end();
    }
  });
  break;
case '/details':
  fs.readFile("./details.html",function(err,content) {
    if(err){
      res.writeHead(404,{'Content-Type':'text/html;charset="UTF-8"'});
      res.write(err.message);
      res.end();
    }else{
      res.writeHead(200,{'Content-Type':'text/html;charset="UTF-8"'});
      res.write(content);
      res.end();
    }
  });
  break;
default:
  
;

   }

});

4.png 5.png 6.png

这样的一个静态资源网站就完成了！赶快来把页面弄上吧！

学习总结

从头到尾的搭建过程，了解到了node.js的魅力，大量的api，为我们提供了更多的便利，不过学起来也让我要去了解更多的api！
模块聚集地 ：www.npmjs.org