Bootstrap

【Nodejs】留言板案例

1 统一处理服务器资源:

var http = require('http');
var fs = require('fs');

var server = http.createServer();
var wwwDir = 'F:/mdcompile/Typora/mdtotal/nodejs/代码/resource';
// var wwwDir = '../resource';
// 以上两种路径方式都可以完成访问

server.on('request',function(req,res){
   
    var url = req.url;
    var filepath = '/index.html';
    if (url !== '/' ) {
   
        filepath = url;
    } 
    fs.readFile(wwwDir + filepath,function(err,data) {
   
        if (err) {
   
            return res.end('404 Not Found.');
        }
        res.end(data);
    })
})
server.listen(3000,function () {
   
    console.log("server is running ...");
})

1.1 关于fs.readdir() 文件目录读取:

var fs = require('fs');

fs.readdir('F:/mdcompile/Typora/mdtotal/nodejs/代码/resource',
function (err,files) {
   
    if (err) {
   
        return console.log('目录不存在');
    }
    console.log(files);
});

在这里插入图片描述

1.2 模板引擎:

art-template 不仅可以在浏览器使用,也可以在node中使用。

实现目录列表:

// 服务端代码
var http = require('http');
var fs = require('fs');
var template = require('art-template');

var server = http.createServer();
var wwwDir = 'F:/mdcompile/Typora/mdtotal/nodejs/代码/resource';
server.on('request',function(req,res) {
   
    var url = req.url;
    // 将要用到模板引擎的页面,读取
    fs.readFile('./template-apache.html',function (err,data) {
   
        if (err) {
   
            return res.end('404 Not Found');
        };
        // 读取目录
        fs.readdir(wwwDir,function (err,files) {
   
            if (err) {
   
                return res.end('Can not find www dir.');
            };
            // data对应被读取的页面,它本来时二进制数据流,但是鉴于模板引擎识别的是字符串,因此转为字符串
            var htmlStr = template.render(data.toString(),{
   
                files:files
            })
            // 将被模板引擎替换过的网页字符串返回,浏览器能够识别标签,因此结果成了页面
            res.end(htmlStr);
        });
    });
});
server.listen(3000,function () {
   
    console.log('running...');
});
// template-apache.html 代碼
<html dir="ltr" lang="zh" i18n-processed="">
<head>
  <meta charset="utf-8">
  <meta name="google" value="notranslate">
  
  <style>
    h1 {
    
      border-bottom: 1px solid #c0c0c0;
      margin-bottom: 10px;
      padding-bottom: 10px;
      white-space: nowrap;
    }

    table {
    
      border-collapse: collapse;
    }

    th {
    
      cursor: pointer;
    }

    td.detailsColumn {
    
      -webkit-padding-start: 2em;
      text-align: end;
      white-space: nowrap;
    }

    a.icon {
    
      -webkit-padding-start: 1.5em;
      text-decoration: none;
    }

    
;