Node express 實作網站 – Bake

安裝完Node之後就已經有網站功能轉貼自

建立一個node.js

// node.js 內建 http 相關 module
const http = require('http')
// createServer() 要傳入的參數是 function
const server = http.createServer(handler)

// 兩個參數分別是 request 和 response，這裡使用命名慣例寫法
function handler(req, res) {
  console.log(req.url)  // 印出 req 網址
  res.write('Hello World!')   // 指定 respone 回傳內容
  res.end()   // 結束這個 response
}

// 常見為 80 port，測試時使用 5001 port 就不易發生衝突
server.listen(5001)

輸入 https://localhost:5001

我們可以加上轉址功能

const http = require('http')
const server = http.createServer(handler)

function handler(req, res) {
  console.log(req.url)  // 印出 req 網址
  if (req.url === '/hello') {
    // 參數分別是 request 的 status code 和內容格式，告訴瀏覽器如何解析網頁
    res.writeHead(200, {            // 200: 請求成功
      'Content-Type': 'text/html'
    })
    res.write('<h1>hello!</h1>')    // 也可以加上 HTML 標籤
  } else if (req.url === '/bye') {
    res.write('bye!')
  } else {
    res.write('Invalid url')
  }
  res.end()   // 結束這個 response
}

server.listen(5001)

安裝express

 npm install express --save

用express 實作一個Hello World

編輯一個index.js

// 引入 library
const express = require('express');
// express 引入的是一個 function
const app = express();
// 建立一個不易產生衝突的 port 用來測試
const port = 5001;

// 如何處理不同的 request，參數分別為 url 和要執行的 function
app.get('/', (req, res) => {
  res.send('hello world!')
})

app.get('/bye', (req, res) => {
  res.send('bye!')
})

// 運行這個 port，參數分別為 port 和要執行的 function
app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

執行 node index.js ，網站就執行了。

MVC 基本架構

MVC（Model–view–controller）：是一種應用程式架構，透過將程式碼拆成分成模型（Model）、視圖（View）和控制器（Controller）三個部分，並透過路由系統，建立整個應用程式的設計模式。

在 MVC 架構中，request 流程大致如下：
1.發出的 request 會由 Controller 來處理
2.接著 Controller 會和 Model 拿取 data
3.Controller 再把拿到的資料給 View，由 View 提供的 template
4.最後 Controller 再結合 data 和 template，回傳 respon

透過 Express 提供的 template engines 來實作 View

透過 Express 提供的 template engines 來實作 View

1.安裝ejs

npm install ejs

EJS 語法是透過<% %>符號，和 PHP 語法其實很類似，語法又可分為三種：

<% JavaScript 程式碼 %>
<%-  %> 會經過解析然後印出來，用於引入 HTML 內容
<%=  %> 會直接印出原始碼，用於輸出資料，避免被解析成語法，可視為一種 XSS 防禦

2.設定index.js

// 設定 view engine
app.set('view engine', 'ejs')

3.預設目錄會是 /views，因此需要新建一個資料夾 views，並在資料夾中建立一個 hello.ejs 檔

4.在 hello.ejs 檔中輸入簡單的程式碼進行測試，例如：<h1>Hello</h1>

5.接著調整 index.js 程式碼，告訴 express 去 render views 目錄底下叫做 hello 的檔案：

const express = require('express');
const app = express();
const port = 5001;

// 設定 view engine
app.set('view engine', 'ejs')

app.get('/', (req, res) => {
  res.send('index')
})

app.get('/hello', (req, res) => {
// 叫 express 去 render views 底下叫做 hello 的檔案，副檔名可省略
  res.render('hello')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

網站變成有hello的page(node去讀取views目錄裡的hello page)

實作簡易的 todo list API

1.首先在 index.js 建立 todos，並設定 app.get() 傳入資料：

const express = require('express');
const app = express();
const port = 5001;

// 設定 view engine
app.set('view engine', 'ejs')

// 建立 todos data
const todos = [
  'first todo', 'second todo', 'third todo'
]

app.get('/todos', (req, res) => {
  // 第二個參數可傳入資料
  res.render('todos', {
    todos     // todos: todos 一樣的話可省略寫法
  })
})

app.get('/hello', (req, res) => {
  res.render('hello')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

2.接著編輯 todos.ejs 檔的內容，也就是 todos 的 view 部分。要輸出內容的語法是 <%= code %>，而不是用 console.log()，或是 PHP 的 echo：

<h1>Todos</h1>

<ul>
<% for(let i = 0; i < todos.length; i++) { %>
  <li><%= todos[i]%></li>    // 加上等於代表後面的東西要輸出
<% } %>
</ul>

3.在瀏覽器運行，這樣能根據之前設立的 data 輸出 todos：

4.接著回到 index.js 檔，用同樣的方式，根據不同 id 來拿取對應的 todo：

// 加上 :id 代表不確定的參數
app.get('/todos/:id', (req, res) => {
  // params: 可拿到網址列上指定的參數
  const id = req.params.id
  const todo = todos[id]
  res.render('todo', {
    todo
  })
})

5.建立 todo.ejs 檔，也就是 todo 的 view 部分：

<h1>Todo</h1>

<h2><%= todo %></h2>

6.透過網址列上的 id，能夠讀取相對應的 todo：

重構專案：實作 Model & Controller

接下來要試著重構程式碼，也就是實作 MVC 架構中的 Model 和 Controller 部分。

Model：用來管理 todos 的資料

1.回到 express 目錄，新增一個 models 資料夾，並在裡面建立 todo.js 檔

2.在 todo.js 檔案，建立 todoModel，提供存取資料的方法（function），例如 get 或 add 等 method：

const todos = [
  'first todo', 'second todo', 'third todo'
]

// 建立一個 todoModel 物件，裡面放存取資料的方法（function）
const todoModel = {
  getAll: () => {
    return todos
  },

  get: id => {
    return todos[id]
  }
}

module.exports = todoModel

Controller：控制器

1.同樣在 express 目錄，新增一個 controllers 資料夾，並在裡面建立 todo.js 檔

2.接著重構程式碼：

*從 model 引入資料
*建立物件，並透過方法（function）來存取資料，這裡會和一開始中 *index.js 的 app.get() 寫法類似再交由 view engine 進行 render

// 先從 model 引入 todos 資料
const todoModel = require(../models/todo)

// 建立一個 todoController 物件，透過方法來存取 model 的資料
const todoController = {
  // 傳入參數 req, res
  getAll: (req, res) => {
    const todos = todoModel.getAll()
    res.render('todos', {
      todos
    })
  },

  get: (req, res) => {
    const id = req.params.id
    const todo = todoModel.get(id)
    res.render('todo', {
      todo
    })
  }
}

module.exports = todoController

3.回到根目錄的 index.js 檔，修改路由，透過引入 controller 的 todo.js，程式碼就可以更簡潔：

const express = require('express');
const app = express();
const port = 5001;

// 引入 controller
const todoController = require('./controllers/todo')

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

const todos = [
  'first todo', 'second todo', 'third todo'
]

// 可直接使用 controller 的方法拿取資料和進行 render
app.get('/todos', todoController.getAll)

app.get('/todos/:id',

這樣就完成了有 MCV 架構的程式：

*express 目錄的 index.js：提供路由
*views 目錄的 todo.ejs 和 todos.ejs：提供模版
*models 目錄的 todo.js：提供資料
*controllers 目錄的 todo.js：結合 model 和 view，根據路由回傳Response

串接 Node.js 與 MySQL

在瞭解到基本的 Express 架構之後，再來我們要試著把 todo 資料存在資料庫。這是因為在實際專案中，後端會把資料存放在資料庫，因此我們要來學習如何透過 Node.js 和 MySQL 溝通。

Step1. 安裝 MySQL

在使用 Node.js 操作 MySQL 資料庫時，必須先安裝 MySQL 模組。搜尋 node.js mysql 會找到 GitHub 有個叫做 mysqljs 的 Library，執行安裝指令：

npm install mysql

Step2. 新增 app 資料庫 & todos 資料表

我們可以用phpmyadmin來新增資料庫與資料表

Step3. 串接 MySQL 資料庫

確認本地端已經安裝資料庫並正常啟動，接著就可以新增一個 db.js 檔來進行連線，程式碼可參考範例：

// 引入 mysql 模組
var mysql = require('mysql');
// 建立連線
var connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'root',
  database: 'app'
});

connection.connect();
// 使用 callback 來接收訊息: 連線成功就印出 todos 所有欄位
connection.query('SELECT * from todos', function (error, results, fields) {
  if (error) throw error;
  console.log(results);
});

connection.end();

Step4. 重構程式碼

1.將 db.js 簡化，獨立成串聯資料庫時需要的資料，方便其他部分要連線時引入：

var mysql = require('mysql');
var connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'root',
  database: 'app'
});

module.exports = connection;

2.接著在 index.js 引入 db，也就是 mysql 模組以及連線資料，加上 db.connect() 指令來連線：

const express = require('express');
// 引入 db 資料庫: mysql 模組 & 連線資料
const db = require('./db')
const app = express();
const port = 5001;

const todoController = require('./controllers/todo')

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

app.get('/todos', todoController.getAll)
app.get('/todos/:id', todoController.get)

app.listen(port, () => {
  // 連線資料庫
  db.connect()
  console.log(`Example app listening at http://localhost:${port}`)
})

3.再來是修改 Models，MVC 架構的好處就是能像這樣明確分工：

在使用 SQL 指令時須注意，字串拼接可能會有 SQL injection 的風險，可透過 Preparing Queries 來避免，方法和 Prepared Statements 其實很類似。

// 引入 db，也就是 connection
const db = require('../db')

const todoModel = {
  // 這裡要用 callback 來拿取資料
  getAll: (cb) => {
    db.query(
      'SELECT * FROM todos', (err, results) => {
      if (err) return cb(err);
      // cb: 第一個參數為是否有錯誤，沒有的話就是 null，第二個才是結果
      cb(null, results)
    });
  },

  get: (id, cb) => {
    db.query(
      'SELECT * FROM todos WHERE id = ?', [id], (err, results) => {
        if (err) return cb(err);
        cb(null, results)
      });
  }
}

module.exports = todoModel

4.因為 Models 從同步改成非同步操作，也要修改 Controllers 的部分：

// 先從 model 引入 todos 資料
const todoModel = require('../models/todo')

const todoController = {
  getAll: (req, res) => {
    // 改成 callback 非同步操作
    todoModel.getAll((err, results) => {
      // 如果有 err 就印出錯誤訊息
      if (err) return console.log(err);
      // 不然就把 todos 傳給 view
      res.render('todos', {
        todos: results
      })
    })
  },

  get: (req, res) => {
    const id = req.params.id
    todoModel.get(id, (err, results) => {
      if (err) return console.log(err);
      res.render('todos', {
        // 注意回傳的結果 array，必須取 results[0] 才會是一個 todo
        todos: results[0]
      })
    })
  }
}

module.exports = todoController

5.再來是修改 Views 部分，Todos 部分有兩種寫法：

第一種：分開寫

<h1>Todos</h1>

<ul>
<% for(let i = 0; i < todos.length; i++) { %>
  <li><%= todos[i].id %>: <%= todos[i].content %></li>
<% } %>
</ul>

第二種：寫在一起，用字串拼接方式

<h1>Todos</h1>

<ul>
<% for(let i = 0; i < todos.length; i++) { %>
  <li><%= todos[i].id + ': ' + todos[i].content %></li>
<% } %>
</ul>

執行 node index.js 之後，回到瀏覽器確認程式是否有成功運行：

本範例port為5002，作者說：不知道如何原因5001被占走，只好執行5002

接著是 Todo，會發現輸出結果是 Object。這是因為 <%= %> 語法會直接印出字串，當我們想要把一個 Object 轉成字串時，就會發生下列情形：

只要將 Todo 部分修改成輸出 todo.content：

<h1>Todo</h1>

<h2><%= todo.content %></h2>

結果就會是相對應的 todo：

如果對資料庫操作 CURD，重整頁面也會動態更新：

學到目前為止，透過上面這些範例，我們其實已經能寫出一些簡單的網頁程式了，並且有 MVC 架構，能夠簡化程式碼且便於維護。

一	二	三	四	五	六	日
« 六月
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

安裝完Node之後就已經有網站功能 轉貼自