2018-01-14

Node.js 的 30 天學習日記--第二十二天

Node.js 學習第二十二天

Postman - API 管理工具

管理 API 好用的工具 Postman ，請按照自己的作業系統版本去安裝。
Postman
請務必邊做邊看
Postman 介紹

Postman - 取得 get 資料、基礎操作

請先建立下面 app.js 檔案。

var express = require('express');
var app = express();
var engine = require('ejs-locals');
app.engine('ejs',engine);
app.set('views','./views');
app.set('view engine','ejs');
//靜態檔路徑
app.use(express.static('public'));
app.get('/',function(req,res){
    res.send('你進入到首頁');
    console.log('有人造訪首頁')
});

//監聽 port
var port = process.env.PORT || 3000;
app.listen(port);

在 postman 新增一個專案資料夾 nodetest
新增好啟動 app.js 把 http://127.0.0.1:3000/ 你的網址貼到 postman 的 GET 欄上面然後點擊 send 下面欄位就會取得你 JS 檔案送出的資料，在把這資料 Save 到 nodetest 資料夾，名稱可以更改。
第一行是啟動 app.js 檔案進入首頁後出現的 console ，第二行是 postman GET 後得到的 console 。

之後就可以使用 postman 去測試資料了。

body-parser - 取得表單資料

請先安裝 body-parser 它是可以把前端表單資料傳送到後端資料庫去，會把資料都放在 req.body 上面。

1	npm install body-parser --save

接下來要測試如何取得表單資料。

先新增下面的 app.js 檔案資料

var express = require('express');
var app = express();
var engine = require('ejs-locals');
//取得 body-parser 套件
var bodyParser = require('body-parser')
app.engine('ejs',engine);
app.set('views','./views');
app.set('view engine','ejs');
app.use(express.static('public'));
// body 解析
//內容支援JSON格式
app.use(bodyParser.json());
//解析表單內容({物件設定})
app.use(bodyParser.urlencoded({extended:false}));
app.get('/',function(req,res){
    res.send('你進入到首頁');
    console.log('有人造訪首頁')
});
//新增搜尋頁 讀取search.ejs
app.get('/search',function(req,res){
    res.render('search');
});

//監聽 port
var port = process.env.PORT || 3000;
app.listen(port);

新增一個 search.ejs 檔案

<!-- 移動到/searchList 用post方式  -->
<form action="/searchList" method="post">
    <input type="text" name="searchText" value="">
    <input type="text" name="searchName" value="">
    <input type="submit" value="送出">
</form>

完成後啟動 app.js 進入 127.0.0.1:3000/search 看是否有載入 search.ejs 。

HTML 有設定資料移動到 searchList 路由上，所以要在 app.js 檔案新增一個路由上去後並啟動到 127.0.0.1:3000/search 。

//app,post是當使用者傳送資料到後端伺服器可以接收到資料
app.post('/searchList',function(req,res){
    console.log(req.body)
});

srarch

若沒有寫轉址的話不會結束動作，請按照下面寫轉址程式碼。
未轉址

app.post('/searchList',function(req,res){
    console.log(req.body);
    //轉址 到search路由上
    res.redirect('search');
    //若是使用render，是把search.ejs檔案渲染到/searchList路由上面
    //res.render('search');
});

/searchList路由頁面

使用 postman 傳送表單資訊

可以使用 postman 模擬傳送表單資訊。

把 GET 改成 POST 並貼上 http://127.0.0.1:3000//searchList
網址欄下方選到 Body 欄位並選擇 x-www-form-urlencoded 傳輸格式(表單傳後端用格式)
可以在 Key 跟 Value 輸入你想要測試的值

結語

學到前端要如何要用怎樣格式去傳資料到後端，有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。

2018-01-13

Node.js 的 30 天學習日記--第二十一天

Node.js 學習第二十一天

EJS - 參數導入

要如何把用 node.js 傳送資料到 EJS 檔案呢，要在你要傳送的檔案名稱後面在下物件參數。
這邊是把第二十天的一些設定給省略，不要照這邊的寫入。
這是 index.ejs 檔案 設定

 <body>
    <%= title %>
    <h1><%= title2 %></h1>
</body>

這是 app.js 檔案 設定

 //自行輸入其它設定(參考第20天)
 app.get('/',function(req,res){
    res.render('index',{
        'title':'顯示結果',
        'title2':'第二筆資料'
        });
});

EJS - 載入內容種類

在 HMTL 接收資料裡面有不同的接收格式

[=] 是把資料都渲染成字串
[-] 有 HTML　格式資料會自動轉化
不加任何符號 EJS 裡面可以寫判斷 IF

<% -%> 後面加上[-]是去除不需要的空格

 <body>
     //寫JavaSrcipt 需要在<%%>裡面寫入
     <% if(show){ %>
     <span>資料有呈現</span>
     <% } %>
    <%= title %>
    <h1><%= title2 %></h1>
</body>

 app.get('/',function(req,res){
    res.render('index',{
        'title':'顯示結果',
        'title2':'第二筆資料',
        'show':true
        });
});

EJS - 載入陣列

用陣列呈現資料

 <body>
    <%= title %>
    <h1><%= title2 %></h1>
    //列表呈現資料
    <ul>
    <% for(var i = 0; i < name.length; i++){ %>
    //若沒有加入<%- %> EJS就會認為你只要載入字串
    <li><%- name[i] %></li>
    <%}%>
    </ul>
</body>

 app.get('/',function(req,res){
    res.render('index',{
        'title':'顯示結果',
        'title2':'第二筆資料',
        'name':['tom','join','liucon','angel']
        });
});

EJS - 設定Layout

前面都是 EJS 使用的方法，接下來要製作一個 EJS 樣版。

先新增一個 user.ejs 這樣你就有 index.ejs 跟 user.ejs 兩個 ejs 檔案了，後面會解釋會什麼要這樣寫。
1
<h1>user</h1>

新增一個 layout.ejs 檔案，然後在裡面這樣寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <%- body %>
</body>
</html>

把之前的 index.ejs 檔案更改成這樣，一些的 HTML 設定不用寫，第一段是載入一個 layout 檔案，它的檔案是叫 layout

<% layout('layout') %>
    <%= title %>
    <h1><%= title2 %></h1>
    <ul>
    <% for(var i = 0; i < name.length; i++){ %>
    <li><%- name[i] %></li>
    <%}%>
    </ul>

app.js 這樣寫

var express = require('express');
var app = express();
app.use(express.static('public'));
var engine = require('ejs-locals');
app.engine('ejs',engine);
app.set('views','./views');
app.set('view engine','ejs');
app.get('/',function(req,res){
    res.render('index',{
        'title':'顯示結果',
        'title2':'第二筆資料',
        'name':['tom','join','liucon','angel']
        });
});
//新增這段 載入 user.ejs
app.get('/user',function(req,res){
    res.render('user');
});
var port = process.env.PORT || 3000;
app.listen(port);

結語

樣版這很方便不用一個一個去修改，只要修改有套用樣版的地方就好，有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。

2018-01-12

Node.js 的 30 天學習日記--第二十天

Node.js 學習第二十天

學習進度真的有點慢，大概會超過 30 天的學習吧(?)，反正就繼續學下去，看什麼時候學完 XD 。

EJS - 語言介紹

EJS - Templates 樣版語言，簡單來說就是一個改了其中一個全部同時更改，像你做了 30 頁的 html 網頁其中 header 跟 footer 這兩個版型 30 頁都是同樣的設計，但是發現有地方出錯的話一個一個更改很吃力，所以有需要一個版型，更改它之後它會套用到全部有使用這個版型的網頁上面。
兩種最多人使用寫法，不強制使用哪種看個人與公司習慣，我的學習害是已 EJS 來學，它的寫法比較有 JavaScript 的語法，可以加強基礎。
EJS
Code-pug

EJS - 環境安裝

一樣用 npm 來安裝 EJS 但是我們是安裝已 EJS 為基底延伸出來的套件 EJS-locals 。
npm install ejs-locals --save

新增一個 views 資料夾後，下面都設定好在 views 資料夾新增一個 index.ejs 的檔案用 HTML 格式隨便用一個 H1 標題
文字。
在 app.get 裡面更改成 res.render('index'); 它會要的呈現畫面從 views 資料夾抓 index 名稱檔案，因偽有設定要使用 ESJ 去渲染網頁。

去用 cmd 的 node 執行這支 JS 檔案。

var express = require('express');
var app = express();

app.use(express.static('public'));
//使用 ejs-locals 模組
var engine = require('ejs-locals');
app.engine('ejs',engine);
//要設定ESJ樣版都需要放在views資料夾
app.set('views','./views');
//要使用EJS檔案去渲染
app.set('view engine','ejs');
app.get('/',function(req,res){
    //不用打副檔名
    res.render('index');
});
//監聽 port
var port = process.env.PORT || 3000;
app.listen(port);

結語

有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。

2018-01-11

Node.js 的 30 天學習日記--第十九天

Node.js 學習第十九天

………….略。

middleware (完)

如下程式碼，如果在輸入網址時候沒有進入首頁直接到別的路徑 127.0.0.1:3000/dgewqsdc 像這樣進入後你看 node 執行會給你 會員登入的 console 資料，但我們並沒有設計這個路徑為什麼它會顯示 console 資料呢？原因在於在撈資料時後會一行一行往下看沒有設攔截點就會跑完可以使用的函式。

var express = require('express');
var app = express();
app.get('/',function(req,res){
    res.send('<html><head></head><body><h1>登入</h1></body></html>')
});
app.use(function(req,res,next){
    consloe.log('會員登入')
    //下一步
    next();
});
//監聽 port
var port = process.env.PORT || 3000;
app.listen(port);

正確的方法，也可以用來 debug 。
HTTP狀態碼

var express = require('express');
var app = express();
app.get('/',function(req,res){
    res.send('<html><head></head><body><h1>登入</h1></body></html>')
});
app.use(function(req,res,next){
    consloe.log('會員登入')
    //下一步
    next();
});
app.use(function(req,res,next){
    //請求失敗，請求所希望得到的資源未被在伺服器上發現，但允許用戶的後續請求。
    res.status(404).send('抱歉，此頁面並不存在');
});
app.use(function(req,res,next){
    //通用錯誤訊息，伺服器遇到了一個未曾預料的狀況，導致了它無法完成對請求的處理。
    res.status(500).send('抱歉，程式出現錯誤');
});
//監聽 port
var port = process.env.PORT || 3000;
app.listen(port);

可以把 middleware 獨立出來作使用。

var express = require('express');
var app = express();

var login =function(req,res,next){
    consloe.log('會員登入')
    //下一步
    next();
};
app.use(login)
app.get('/',function(req,res){
    res.send('<html><head></head><body><h1>登入</h1></body></html>')
});
//監聽 port
var port = process.env.PORT || 3000;
app.listen(port);

放在 get 上面也是可以

var login =function(req,res,next){
    consloe.log('會員登入')
    //下一步
    next();
};
//先取得網頁在經過 login 的判斷在到執行函式  由左至右
app.get('/',login,function(req,res){
    res.send('<html><head></head><body><h1>登入</h1></body></html>')
});

也可以在這邊作判斷設定

var login =function(req,res,next){
    var _url = req.url;
    if(_url == '/'){
        nexy()
    }else{
        res.send('資料錯誤無法登入')
    }
};
//先取得網頁在經過 login 的判斷在到執行函式  由左至右
app.get('/',login,function(req,res){
    res.send('<html><head></head><body><h1>登入</h1></body></html>')
});

static - 載入靜態檔案

如果再傳送資料那邊些入靜態檔案是沒辦法的，雖然你指定首頁了但是它不知道你首頁在哪個路徑上，所以就要用到 static 的方法。

var express = require('express');
var app = express();
app.get('/',function(req,res){
    res.send('<html><head></head><body><img src="/images/logo.png"></body></html>')
});
//監聽 port
var port = process.env.PORT || 3000;
app.listen(port);

原本 project 資料夾裡面有 images 資料夾放了 logo.png 檔，增加這段程式碼後就要在 project 資料夾內新增一個 public 資料夾，然後把擁有靜態檔案的資料夾( images )放進去，這樣就可以知道你的檔案在哪了。

var express = require('express');
var app = express();
//讀取 public 資料夾內的所有靜態檔案。需要把這段程式碼放入最上面，這樣後面的資料就可以吃到這段
app.use(express.static('public'))
app.get('/',function(req,res){
    res.send('<html><head></head><body><img src="/images/logo.png"></body></html>')
});
//監聽 port
var port = process.env.PORT || 3000;
app.listen(port);

六角學院擁有

結語

…….，有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。

2018-01-10

Node.js 的 30 天學習日記--第十八天

Node.js 學習第十八天

發覺學習速度有點慢，看來花有點多的時間再玩上面，離三十天都過一半多了但看過學習進度發現有點慢，要加多點時間在學習上面了。

query 取得網址參數

query 是撈取網址參數的資料，那參數是哪些呢？就像 https://www.google.com.tw/search?q=HistoryMaker 拿這 GOOGLE 網址來講，search 這是路由？問號代表後面都是參數， q 代表是你參數的名稱，等於就不用說了後面就是你要搜尋的資料，如果你設定條件是多筆的話就要再參數名前後中間加上 & 符號。
你在你的網址輸入 127.0.0.1:3000/tom?limit=hello 網頁就會顯示 tom向你說hello
如果要設定第二條件就再新增新的參數名並再網址這樣打 127.0.0.1:3000/tom?limit=hello&參數名=條件

var express = require('express');
var app = express();
app.get('/user/:name',function(req,res){
    var myname = req.params.name;
    //設定query參數物件裡面有個limit的參數名
    var limit = req.query.limit;
        res.send('<html><head></head><body><h1>'+myname+'向你說'+limit+'</h1></body></html>')
});

middleware 中介軟體

這是許多後端都會使用的，這可以幫助資料正確性並進行下一步。
Middleware WIKI
Middleware 觀念解說
當然 express 也有包含這功能。
next 是下一步的函數。
網頁會先經過 use 的確認才會進行下一步，下一步就是連到網頁並給它 index 的資訊。

var express = require('express');
var app = express();
app.get('/',function(req,res){
    res.send('<html><head></head><body><h1>登入</h1></body></html>')
});
app.use(function(req,res,next){
    consloe.log('會員登入')
    //下一步
    next();
});
app.get('/user',function(req,res){
    res.send('<html><head></head><body><h1>index</h1></body></html>')
});
//監聽 port
var port = process.env.PORT || 3000;
app.listen(port);

結語

了解這個就發覺後端是怎樣運作的，有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。

2018-01-09

Node.js 的 30 天學習日記--第十七天

Node.js 學習第十六天

略過………..

路由設計

關於路由設計先看別人的網頁如何設計
Udemy
https://www.udemy.com/courses/development/web-development/
Udemy
https://www.udemy.com/courses/development/mobile-apps/
這兩個頁面差別就在於針對 development 後面的路徑名稱了。
下面程式碼就是針對 development 這個路由新增後面頁面。
請使用 cmd 的 node 程式名.js 去作執行在網頁上輸入 127.0.0.1:3000/development/web-development 來去作查看。

var express = require('express');
var app = express();
app.get('/development/web-development',function(req,res){
    res.sen('網頁開發');
});
app.get('/development/mobile-apps',function(req,res){
    res.sen('行動應用');
});
//監聽 port
var port = process.env.PORT || 3000;
app.listen(port);

像上面講的路徑都是固定的路徑，如果你有一個龐大的資料庫隨時在新增與修改和刪除資料，那要顯示這資料不可能即時監控並給出一組路由，所以就需要用到隨機路徑了，想是下面的頁面一樣設計。
youtube 音樂頻道
 https://www.youtube.com/channel/UC-9-kyTW8ZkZNDHQJ6FgpwQ?&ytbChannel=null
youtube 運動頻道
 https://www.youtube.com/channel/UCEgdi0XIXXZ-qJOFPf4JSKw?&ytbChannel=null
差別就在於後面是給一組隨機碼的路徑。

params - 取得指定路徑

params 是一個存取路由名稱的物件格式，再路徑 / 後面輸入冒號再打的要取得的物件名稱資料就可以拿到名稱。
下面是用在網址欄隨便輸入名稱來存到物件並 console 查看是否有取得名稱，也寫成 var myname = req.params ，再接著去 console 看就可以看到一個物件格是內容。
都是需要用 cmd 用 node 執行 JS 檔案。

var express = require('express');
var app = express();
app.get('/user/:name',function(req,res){
    var myname = req.params.name;
    console.log(myname)
    res.sen('網頁開發');
});
//監聽 port
var port = process.env.PORT || 3000;
app.listen(port);

一些網站後面的路徑不一定在資料庫裡面，如果不小心輸入或者網站本身已刪除你去查詢後，網站頁面大概會顯示此頁面並不存在，那我們這邊就需要用 if 的方式去判斷網頁路徑是否存在。

var express = require('express');
var app = express();
app.get('/user/:name',function(req,res){
    var myname = req.params.name;
    if (myname !== 'id'){
        res.send('<html><head></head><body><h1>此頁面並不存在</h1></body></html>')
    }else{
        //myname是取得你輸入名稱
        res.send('<html><head></head><body><h1>'+myname+'</h1></body></html>')
    }
});
//監聽 port
var port = process.env.PORT || 3000;
app.listen(port);

結語

就…..這樣，有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。

2018-01-08

Node.js 的 30 天學習日記--第十六天

Node.js 學習第十六天

打完昨天日記後有去練習之前 firebase 的所有功能整合，所以還沒把後端一些 web 弄清出，看看學完這框架能不能搞懂。

網址規則介紹

在 cmd 上啟動下面程式碼的 js 檔案 node app.js 然後可以到 127.0.0.1:3000 或 127.0.0.1:3000/user 去看有沒有開啟。
/ 後面舊是你的路由（ routing ），在後面就是一些 express 的參數設定。

var express = require('express');
var app = express();
app.get('/',function(req,res){
    res.sen('123');
});
app.get('/user',function(req,res){
    res.sen('456');
});
//監聽 port
var port = process.env.PORT || 3000;
app.listen(port);

結語

今天學的都是關於網址的規定與理論，用途看會比較好懂所以我就去找這些圖片，有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。

2018-01-07

Node.js 的 30 天學習日記--第十五天

Node.js 學習第十五天

這次要進入新的章節，要正式講 Node.js 框架了。

Express 框架介紹與安裝

express 是 Node.js web 輕量型應用框架，它可以整合下列資料庫框架：

firebase
mongo
mysql
還有許多不同的框架。
Express 中文文件
請按照第五天的日記去建立 package.json 並安裝 express 模組。

新增 web 伺服器

載入 express 模組功能並執行功能。

var express = require('express');
var app = express();
//查看有連到模組
console.log(app);

第一是路徑指向首頁，第二跟 Node.js 核心模組一樣 createServer 的原理第三天。裡面也可以載入 HTML 格式不一定只能載入字串。

//  [/]<---等於本機端 127.0.0.1
app.get('/',function(req,res){
    res.sen('123');
});
//監聽 port  沒有預設的port就會跑3000
var port = process.env.PORT || 3000;
app.listen(port);

結語

雖然有學到如何開啟，但對於詳細的後端設定還是有一點難理解，有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。

2018-01-06

Node.js 的 30 天學習日記--第十四天

Node.js 學習第十四天

感覺好想變成學校作業一樣，不趕快在 12 點前作完就會失敗，這樣逼自己寫 w w w 。

UI 時間介接

今天這天是讓資料庫的每筆資料新增一組 UNIX 時間代碼，好讓搜尋可以更加方便且在某時間範圍內搜尋。
按照下面設定可以去搜尋一整天的記錄。

<body>
        開始時間：<br>
        <input type="date" id="time" value="">
        <input type="button" id="send" value="送出">
    <script>
        var time = document.getElementById('time');
        var send = document.getElementById('send');
        send.addEventListener('click',function(e){
        //確認日期格式是否正確
        console.log(time.value);
        var now = new Date(time.value);
        //把日期格式轉成且設定0時0分0秒0毫秒
        var startTime = now.setHours(0,0,0,0);
        console.log(startTime)
        //把日期格式轉成且設定23時59分59秒999毫秒
        var endTime = now.setHours(23,59,59,999);
        console.log(endTime)
        });
    </script>
</body>

reverse -資料翻轉調整

原本 firebase 資料新增是由新到舊由上到下排列， reverse 可以把整個資料反轉排列，如果做 Todolist 資料一直往下新增以後資料一多去檢視網頁就比較麻煩。

var data = [1,2,3,4,5];
console.log(data);
data.reverse();
console.log(data);

範例結果
不過這語法只能反轉陣列內的資料，物件資料不能翻轉所以要把物件資料 push 到陣列裡面。
下面程式碼是用前面練習 Todolist 來做的。

todos.on('value',function(snapshot){
        var str = '';
        //新增陣列
        var data = [];
        snapshot.forEach(function(item){
            //把物件加入陣列裡面
            data.push(item.val());
            console.log(data);
        })
        //翻轉陣列內資料
        data.reverse();
        //再把資料排列好
        for(var item in data){
            str+='<li>'+data[item].content+'</li>';
        }
        list.innerHTML = str;
    })

結語

反轉這語法用在很多的網頁上面做使用，所以可以去了解這語法更詳細的做法，有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。

2018-01-05

Node.js 的 30 天學習日記--第十三天

Node.js 學習第十二天

排列、顯示、新增、刪除、排序、搜尋都有了在來是要如何記錄每筆資料的時間。

new Date ( )

new Date () 是 JavaSrcipt 內鍵可以產出日期與時間的語法。
new Data

var time = new Date();
//顯示目前日期與時間和時區
console.log(time);

//顯示今年
console.log(time.getFullYear);

//顯示月份  0 = 1月 、 1 = 2月 以此類推
console.log(time.getMonth());

//顯示禮拜 禮拜日 = 0 、 禮拜一 = 1 以此類推
console.log(time.getDay());

//顯示目前幾點 24時制
console.log(time.getHours());

//顯示目前幾分鐘
console.log(time.getMinutes());

//顯示目前幾秒
console.log(time.getSeconde());

//顯示毫秒
console.log(time.getMilliseconds());

timeStamp

timeStamp 是時間戳記，它是由 1970 年 1 月 1日 0時 0分 0秒到你目前時間的總秒數。
輸入下面程式碼會得到一組數字，後三碼是毫秒再來前面是秒數累加上去的。
取得的一組數字可以放在 Date() 裡面去給電腦換算目前的日期與時間，之後可以再去做比對搜尋。

1	new Date().getTime()

結語

這是去紀錄每一筆資料的詳細時間，下回就會去學如何使用，有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。