萊恩Ryan's 生活筆記簿: [JS] Node.JS 的起手式 / D3.JS 的測試

這個其實是上上星期的嘗試，一是Node.JS, 另一個是D3.JS。

Node.JS

這次在圖書館的HyRead電子書庫見到Javascript的書，打算重溫一下之際，找到兩本專講Node.js的。之前就因為辦公室的環境很多程式語言都不能隨便安裝，Javascript 這種有瀏覽器就可以支援的語言一起引起興趣。聽過有了Node.js 以後的Javascript 也可以做伺服器端的語言，一些用JS做爬蟲也是指向Node.js。可惜之前未能弄懂如何入手這個。今次就裝起來可以一試了。

準備

這次是用nvm (Node Version Manager) 安裝的，參考Github中的Install script一節: https://github.com/creationix/nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

touch ~/.bash_profile

輸入 nvm ，如果有以下反應，安裝就完成了

Node Version Manager 是node的版本管理工具。還有另一個叫Node Package Manager (npm)的工具也是往後的學習中有用的。之後可以查看一下想要安裝的Node版本。

安裝最新版的node:

nvm install node

查看已安裝的版本:

nvm ls

使用已安裝(default/specific)的node版本

nvm use node
nvm run node --version

使用

一：用http模組，顯示簡單的"Hello World"
exHTTP.js

http = require('http'); //引入http模組

//搭建HTTP伺服器，動作由傳入的匿名函數中的response處理，最後啟動並由埠:8080 監聽
http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.write('Hello World\n');
  response.end();
}).listen(8080, '127.0.0.1'); 

//後台訊息
console.log('Server running at http://127.0.0.1:8080/');

二：加上處理檔案的fs模組，顯示客戶端request的檔案內容
exFile.js

var http = require('http');
var url = require('url'); //使用 url.parse() 瞭解URL的結構，並取得pathname
var fs = require('fs'); 
var path = require('path'); //使用 path.join() 處理文件路徑在不同作業系統下的連接

var server = http.createServer(function (req, res) {
    var filename = url.parse(req.url).pathname;
    var filepath = path.join(__dirname, filename);  //__dirname:傳回被執行的js所在文件夾的絕對路徑
    fs.exists(filepath, function(exists) {
        if (!exists) {
            res.writeHead(404, {'Content-Type': 'text/plain'});
            res.end('Not Found\n');
            return;
        }
        fs.readFile(filepath, function(err, content) {
            res.writeHead(200, {'Content-Type': 'text/plain'});  //如要解析html的標籤:'text/html'
            res.end(content);
        });
    });
server.listen(8080, '127.0.0.1');

console.log('Server running at http://127.0.0.1:8080/');

三：加上處理http表單的query模組，按客戶端POST過來的request，傳回相應的response.
exWebForm.js

var http = require('http');
var url = require('url');
var path = require('path');
var fs = require('fs');
var qs = require('querystring');

var server = http.createServer(function (req, res) {
    var url_parts = url.parse(req.url);
    console.log(url_parts.pathname);
    
    switch (url_parts.pathname) {
        case '/' :
            fileName = path.join(__dirname, "home.html"); 
            break;
        case '/about':
            fileName = path.join(__dirname, "about.html");
            break;
        case '/form':
            fileName = path.join(__dirname, "form.html");
            break;    
        case '/url':
            fileName = "";
            if (req.method == "POST") {
                var body = "";
                req.on("data", function(chunk) {
                    body += chunk;
                });
                req.on("end", function() {
                    res.writeHead(200, {'Content-Type': 'text/html'});
                    res.write("<!DOCTYPE html>");
                    res.write("<html>");
                    res.write("<head>");
                    res.write("<meta charset='utf-8'/>");
                    res.write("<title>url.html</title>");
                    res.write("</head>");
                    res.write("<body>");
                    res.write("<p>Content-Type: " + req.headers["content-type"]
                    + "</p><p>表單資料： </p><pre>" + body + "</pre><br/>");
                    res.write("<p>你的名字： <b>" + qs.parse(body).name + 
                        "</b></p>");
                    res.write("</body>");
                    res.write("</html>");
                    res.end();
                });
            }
            else
                fileName = path.join(__dirname, "page404.html");
            break;
        default:
            fileName = path.join(__dirname, "page404.html");
            break;
    }
    
    if (fileName != "") {
        fs.readFile(fileName, function(err, content) {
            if (!err) {
                res.writeHead(200, {'Content-Type': 'text/html'});
                res.end(content);
            }
            else console.log(err);
        });
    }
});
server.listen(8080, '127.0.0.1');

console.log('Server running at http://127.0.0.1:8080/');

form.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form.html</title>
</head>

<body>
<form method="POST" action="/url">
<h1>HTML 表單</h1>
<p>請輸入名字</p>
<input type="text" name="name" />
<p><button>送出</button></p>
</form>
</body>

</html>

home.html, about.html, page404.html: 可以隨便準備。

下一步的參考：
http://www.nodebeginner.org/index-zh-tw.html
https://zh-tw.coursera.org/learn/server-side-development

D3.JS

Here is a test of using D3.JS:

Demo 1:

Demo 2:
Reference:

http://blog.infographics.tw/2015/05/d3js-tutorial-force-layout/
http://sj82516-blog.logdown.com/posts/1137101/d3-experience-production-bar-chart-and-in-depth-understanding-of-selection

萊恩Ryan's 生活筆記簿

Category

2017年4月18日星期二

[JS] Node.JS 的起手式 / D3.JS 的測試

Node.JS

準備

使用

D3.JS

沒有留言:

張貼留言

Category

2017年4月18日 星期二

[JS] Node.JS 的起手式 / D3.JS 的測試

Node.JS

準備

使用

D3.JS

沒有留言:

張貼留言

2017年4月18日星期二