別稱 | 功能 | |
---|---|---|
前端 (front-end) | client 端 | 網頁排版、呈現等 |
後端 (back-end) | server 端 | 與資料庫溝通處理 |
並非一般所想有 javascript 特效就是「動態網頁」,而是網頁內容會隨資料庫改變,才稱為「動態網頁」
console.log('您好! Node.JS!');
node index.js
程式碼
index.js
執行指令
比如:hello world 魔改
module.exports:匯出模組
require:載入模組
module.exports = 'Hello world!'
var str = require('data.js');
console.log(str);
data.js
index.js
module.exports = function() {
console.log('我要抓寶可夢');
}
函數
var __poke = function() {
console.log('我要抓寶可夢');
}
var __PI = '我是拍'
module.exports = {
poke: __poke,
PI: __PI
}
物件
先前開發前端時,script 引入的順序會影響,require 方法可避免掉這種狀況
__dirname:當前執行 script 所在資料夾
__filename:當前執行 script 的檔名
process:程序相關操縱
var fs = require('fs')
fs.writeFile('pokemon.txt', 'Pokemon 超好丸', function (err) {
// 如果寫檔失敗會丟錯誤
if (err) throw err;
console.log('我寫了檔案!');
})
fs.writeFile():寫檔案
一個檔案 data
將 data 每一行生成一個網頁
所有生成網頁在 public 資料夾下
檔案取名為 line<num>.html,<num>為第幾行
Hello world!
我是許胖
第三行
data
哈,這個簡單 fs.readFile()
注意檔案編碼!通常是 'utf8'
還記得字串的str.split()方法嗎?
Hello world!
我是許胖
第三行
var fs = require('fs')
fs.readFile('data', { encoding: 'utf8' } , function (err, data) {
if (err) throw err;
var lines = data.split('\r\n'); // 依照行去分割
})
剩下生成網頁
接上 HTML
lines.forEach(function (line, i) {
var content = [
'<!DOCTYPE html>\n<html><head><title>',
line,
'</title></head><body>',
line,
'</body></html>'
].join(''); // 網頁內容
})
linux系統:public/line<num>.html
Windows系統:public\line<num>.html
使用 path.join() 避免上述狀況
var path = require('path')
var filename = path.join('public', 'line' + (i + 1) + '.html')
原因:沒有 public 這個資料夾
直覺的解法:在寫入檔案前建立 public 資料夾
fs.mkdir()
原因:重複建立 public 資料夾
解決方法:fs.access() 檢查 public 是否存在
fs.constants.F_OK:常數,可檢查檔案存在與否
如果 fs.mkdir() 不好寫
可以改用同步的版本 fs.mkdirSync()
var dirname = 'public';
// 檢查 public 是否存在
fs.access(dirname, fs.constants.F_OK, function (err) {
if (err) { // public 不存在
fs.mkdirSync(dirname); // 建立資料夾
console.log('建立 ' + dirname + ' 資料夾');
} else {
console.log(dirname + ' 資料夾已經存在!');
}
})
複習一下 http ~
瀏覽器
伺服器
請求 request
回應 response
Source:wikipedia
用 GET 的方式送請求給 wikipedia 首頁
GET /wiki/Main_Page http/1.1
HOST: en.wikipedia.org
狀態碼
http.createServer()
回傳值是 http.Server 物件
在 http 模組中,伺服器就是以此物件作用
對伺服器送出請求,觸發 'request' 事件
執行函式 function (req, res) {}
req:請求內容,http.IncomingMessage物件
res:伺服器回應內容,http.ServerResponse物件
函式就是在觸發 'request' 時,根據 req 來決定送回 res 的內容
var http = require('http')
http
// 建立 http 伺服器
.createServer(function (req, res) {
console.log('執行!');
res.write('Hello world!')
res.end()
})
// localhost:5566
.listen(5566)
var http = require('http')
http
// 建立 http 伺服器
.createServer(function (req, res) {
console.log('執行!');
res.write('Hello world!')
res.end()
})
// localhost:5566
.listen(5566)
http.request()
回傳值為http.ClientRequest 物件
var https = require('https')
https
// 送出請求
.request('https://uva.onlinejudge.org', function (res) {
console.log(res.statusCode);
console.log(res.method);
// 網頁編碼 & 資料
res.setEncoding('utf8');
res.on('data', function (data) {
console.log(data)
})
// 結束讀取回應
res.on('end', function () {
console.log('結束');
})
})
// 錯誤控制
.on('error', function (err) {
console.log('失敗! ' + err.message);
})
// 記得要加 end()
.end()
var http = require('http')
http
// 建立 http 伺服器
.createServer(function (req, res) {
res.write('Url: ' + req.url + ', Method: ' + req.method + '\n');
res.write('Body: ' + req.body);
res.end()
})
// localhost:5566
.listen(5566)
成千上萬的套件在 npmjs.org
很難找出誰好誰不好
只能多看多摸索
後面會介紹一些好用的套件
npm init
npm install --save <套件名>
全域套件:npm install -g <套件名>
npm update --save <套件名>
npm uninstall --save <套件名>
npm set:可以在未來 npm init 中預設一些值
npm set init-author-name '<名字>'
npm set init-author-email '<email>'
npm set init-license '<授權種類>'
npm ls 或 npm ls <套件名>
npm run build 生成網頁
npm start
npm run start 的縮寫,start 和 test 可縮寫
多行指令可用 & 連接
"scripts": {
"build": "node index.js",
"start": "node index.js & node server.js"
}
在 npm 註冊:npm adduser
登入 npm:npm login
發布套件:npm publish
範例:hexo-tag-owl
// Model
var models = {
hello: 'Hello world!'
}
// View
var views = {
show: function(str) {
console.log(str)
}
}
// Controller
var controllers = {
run: function() {
views.show(models.hello);
}
}
controllers.run()
console.log('Hello world!')
改造前
改造後
太星爆了