Hello Node - 基本設定和簡單範例

Hello Node - 基本設定和簡單範例

Hello Node - 基本設定和簡單範例

距離上次摸Node.js 使用 Node.js + Express 建構一個簡單的微博網站 又是好長一段時間，這次從基本設定和簡單範例開始記錄。

跟著Hello node.js - win7中的nodejs(1) 安裝篇至hello world安裝完成後，玩玩暖身題「Hello Node」吧。

Hello Node 1

Step 1：在資料夾新增一個「hello.js」檔案。

Hello Node

Step 2：檔案內容如下，寫一行「console.log('hello node');」。

Hello Node

Step 3：到Node.js command prompt輸入「node hello.js」(node 檔案名.副檔名)，即可得到結果。

Hello Node

或是直接在command line中輸入

node -e "console.log('hello node');"

Hello Node 2

Step 1：建立一個「hello2.js」檔案，內容如下。
var http = require('http');

http.createServer(function(req, res){
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write('<h1>Hello Node</h1>');
    res.end('<p>Hello World</p>')
}).listen(3000);

console.log('HTTP server is listening at port 3000.');
Step 2：Node.js command prompt輸入「hello2.js」，即可得到結果。

Hello Node

Step 3：打開瀏覽器，網址輸入「http://localhost:3000」。

Hello Node

Hello Node with EJS

Step 1：使用以下指令建立基本架構。
npm uninstall -gd express
npm install -gd express
npm install -g express-generator (安裝命令工具)
express -t ejs helloejs

建立完成以後，資料夾的結構如下。

Hello Node with EJS

Step 2：進入剛建立的資料夾「helloejs」。
cd D:\helloejs
Step 3：安裝相依檔案。
npm install
Step 4：記得看ㄧ下有兩個地方要設定為EJS。

  • app.js

    app.set('view engine', 'ejs');

  • package.json

      "dependencies": {
    "ejs": "^1.0.0",
    "express": "~4.13.1",
  }
Step 5：更改樣版的內容。

layout.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Hello Node with EJS</title>
    <meta name="description" content="Hello Node with EJS">
</head>
<body>
    <%- body %>
</body>
</html>

index.ejs

<h1>Hello Node with EJS</h1>
Step 6：執行指令「npm start」，打開瀏覽器並網址輸入「http://localhost:3000」，就可以看到結果了。

Hello Node with EJS

範例程式碼

遇到的問題與解法

嘗試「express -t ejs helloejs」，但出現錯誤訊息「'express' 不是內部或外部命令，也不是可運行的程序或批處理文件」。

一直以來我都直接用「express -t ejs 專案名稱」來建立基本架構，但一按下Enter鍵後出現錯誤訊息「'express' 不是內部或外部命令，也不是可運行的程序或批處理文件」。這可怎麼辦才好呢？[Node.js]重新安裝node.js和express的問題這篇文章提到，Express已經升級到4.0了，將命令工具抽離出來，因此必須要另外安裝命令工具「npm install -g express-generator」，然後才可以使用指令「express -t ejs 專案名稱」來建立基本架構。然後使用「npm install」安裝相依檔案，接著由於安裝了新東西，必須要使用「npm start」重新啟動專案才能看到結果。

推薦閱讀

參考資料

由於部落格搬家了，因此在新落格也放了一份，未來若有增刪會在這裡更新-Hello Node - 基本設定和簡單範例。

留言

張貼留言