Matttt的空間

express套件(五) - spilt

程式架構越來越大
因此開始要切割程序
1.導入外部程序
1-1.
在routes裡建立extern.js

exports.index = function(req, res, next) {
  res.send("respond with a extern index");
};

1-2.
在app.js
加上

extern = require('./routes/extern')

也加上app.get

app.get('/extern', extern.index); 
app.get('/extern/*', extern.index);

將所有有關extern都導向extern.index的function
之後在做其他的切割

1-3.
這樣所有有關extern都導向extern.js中的index

2.判斷params
express在使用*來做引導
引導之後會將判斷剩下來的
除了GET值之外存到params[0]裡
因此將params[0]做spilt
就可以再次延伸route
2-1.
在routes.js
改成

exports.index = function(req, res, next) {
  if (req.params[0] == null) {
    res.send("respond with a extern index");
  } else {
    var params = req.params[0].split("/");
    if (params[0] == "func1") {
      func1(req, res, next);
    } else {
      res.send("respond with a extern no function");
    }
  }
};

function func1(req, res, next) {
  res.send("respond with a extern func1");
};

2-2.

express套件(四) - template engine

1.加入404為靜態網頁
在express裡app.js

app.set('views', __dirname + '/views');
app.set('view engine', 'jade');

是設定template的路徑和engine
也就是說像是routes/index.js裡寫的

res.render('index', { title: 'Express' });

會自動到views尋找index.jade檔案
交給jade模組
因為我不喜歡jade模組
所以我使用同樣是templat模組的ejs
jade會將原來的html簡化到我看不太懂的地步
而且不能直接使用DW等之類的網頁編輯軟體編輯之後的html的檔案
ejs可以直接使用比較方便

1-1.安裝template ejs模組
請在app目錄下輸入

npm install ejs

1-2.在view下建立404.html內容為

<html>
<head><title>404 Not Found</title></head>
<body bgcolor="white">
<center><h1>404 Not Found</h1></center>
</body>
</html>

1-3.修改app.js
輸入將html的檔案給ejs模組處理

app.engine('html', require('ejs').renderFile);

app.engine這是宣告html交給ejs模組處理
當然也可以修改
app.set('view engine', 'ejs');
不過副檔名要改成ejs才會讀的到
而且交給ejs模組

然後

res.send(404, 'Sorry cant find that!');

取代為

res.render('404.html');

呼叫這function會執行ejs模組它會去view載入404.html並且輸出

1-4.結果

2.加入圖片路徑、CSS、jQuery等等靜態網頁檔案
在express裡app.js

app.use(express.static(path.join(__dirname, 'public')));

也就是說public裡面的資料夾和檔案會直接對應到網址上
像是stylesheets/style.css

2-1.
在public/images裡面加圖片
在404.html上就可以直接讀取

3.利用ejs模組
加上數值讓網頁可以變動文字或是其他更動

3-1.
在404.html
上面加上<%= time%>
就是說會將time的value填到這裡

3-2.
在app.js

res.render('404.html',);

修改成

res..render('404.html', {
   locals:{time : Date()}
});

3-3.
結果就會顯示value的值

在html裡面有用到<%= %>一定要填值要不然ejs模組會出錯

express套件(二) - route

新增網頁路徑有好幾種方式
每種方式都有不同的效果
下面會示範各種寫法

1.
在下面的程式

app.get('/', routes.index);
app.get('/users', user.list);

後面加上

//It can cover /route/
app.get('/route', function(req, res, next) {
    res.send('This path has no / (/route)');
});
//It is no use
app.get('/route/', function(req, res, next) {
    res.send('This path has / (/route/)')
});
//It is use.
app.get('/route2/', function(req, res, next) {
    res.send('This path has / (/route2/)')
});
app.get('/route2', function(req, res, next) {
    res.send('This path has no / (/route2)');
});

執行後
會發現在app.get程式的順序會影響判斷的順序
只要判斷成功就會直接結束
所以上面的可以發現 /route/ 可以被判斷為 /route
但是 /route 不能被判斷為 /route/

2.
加入param的值
一樣在app.get之後加上

//It can't cover /list
app.get('/list/:num', function(req, res, next) {
    var num = req.params.num;
    res.send('This is test num:' + num);
});
//It can't cover /list2/:num
app.get('/list2/:num/:num2', function(req, res, next) {
    var num = req.params.num;
    var num2 = req.param('num2');
    var string = '';
    string += 'This is test num:' + num + '<br />';
    string += 'This is test num2:' + num2 + '<br />';
    res.send(string);
});

執行後
會發現在param也是同樣情形
只會進入正確的地方

Linux網路設定

網路卡預設設定儲存區
/etc/udev/rules.d/70-persistent-net.rules
如下面所示
有找到兩張網卡分別命名為eth0 eth1

# PCI device 0x8086:/sys/devices/pci0000:00/0000:00:03.0 (e1000)
SUBSYSTEM=="net", ACTION=="add", DRIVERS=="?*", ATTR{address}=="08:00:27:61:13:49", ATTR{dev_id}=="0x0", ATTR{type}=="1", KERNEL=="eth*", NAME="eth0"

# PCI device 0x8086:/sys/devices/pci0000:00/0000:00:08.0 (e1000)
SUBSYSTEM=="net", ACTION=="add", DRIVERS=="?*", ATTR{address}=="08:00:27:07:ca:54", ATTR{dev_id}=="0x0", ATTR{type}=="1", KERNEL=="eth*", NAME="eth1"

網卡設定值
/etc/network/interfaces

# /etc/network/interfaces -- configuration file for ifup(8), ifdown(8)
# The loopback interface
# automatically added when upgrading
auto lo
iface lo inet loopback

# The first network card - this entry was created during the Debian installation
# (network, broadcast and gateway are optional)
# automatically added when upgrading
auto eth0
iface eth0 inet static
        address 211.21.247.10
        netmask 255.255.255.248
        network 211.23.247.8
        broadcast 211.23.247.15

auto eth1
iface eth1 dhcp

express套件(三) - 404

1.一開始產生的express
假設輸入錯誤路徑時
網頁會顯現

除了app.get程式有寫判斷

因此我們可以將錯誤網頁路徑導向其他網頁

2.加入404導引function
2-1.
編輯app.js
在裡面加入

app.use(function(req, res, next){
    res.send(404, 'Sorry cant find that!');
});

這個意思就是將所有沒有指定的位置，輸出404 + "Sorry cant find that!"

2-2.
或是不要上面的設定可以使用另外的方式
在app.get最後面在加上

app.get('*', function(req, res, next) {
    res.send('Sorry cant find that.'); 
});

*也是只所有的
所以之前沒有判斷到的都會導到此function裡
因此在app.get裡面可以加入"正規表示法"

express套件(一) - 安裝

1.express的套件類似於MVC
而且他將Post、Get等等網頁常用傳遞資料的方式
自動處理可以直接使用function
可以將code切割成不同網頁

2.安裝express

npm install -g express

註：在Linux下需要加入sudo

3.建立自己的app

express my_app

下載app所需套件

cd my_app
npm install

4.第一次執行

node app.js

npm操作

1.基本上安裝完node.js都會一起安裝npm

2.npm為node.js的套件管理工具
在網路上有很多人寫好的module
可以在https://npmjs.org/查詢有沒有你所需的套件

3.因此使用npm可以下載別人寫好的套件
節省寫code的時間

4.收尋套件
輸入命令和要收尋套件的名稱
npm search socket.io
第一次收尋通常比較久

5.安裝套件
npm install socket.io

6.列出已安裝套件
npm list

7.更新套件
npm update

8.移除套件
npm uninstall socket.io

9.假設你所開發的app中需要其他套件
app可能會給其他人使用
因此需要使用package.json加入需要使用其他套件的名稱和版號
package.json裡輸入

{
    "name": "application-name",
    "version": "0.0.1",
    "private": true,
    "dependencies": {
        "express": "3.2.6",
        "jade": "*"
    }
}

之後輸入

npm install

就會自動安裝你app所需要的套件

註：接下來的指令有分為全域和本地
　　全域是由是否加入-g來判定
　　也是就是說你想要將express安裝後讓其他使用者可以使用
　　就輸入"npm install -g express"
　　要看全域有沒有此套件也要使用"npm list -g"才看的到
　　有些套件需要安裝到全域上
　　例如: node-inspector, express

註：在Linux下因為權限關係
　　因此安裝到全域下需要輸入sudo

註：package.json為app紀錄開發者的訊息
　　像是app的版號、名稱
　　開發者的姓名、email
　　所需安裝套件等等

Matttt的空間

express套件(五) - spilt

express套件(四) - template engine

express套件(二) - route

Linux網路設定

express套件(三) - 404

express套件(一) - 安裝

npm操作

置頂

Blog檔案庫

Tags

搜尋此網誌

訪客瀏覽數