案例：學生檔案管理

• 技術要點
  • http請求響應、MongooDB資料庫、art-template模板引擎、靜態資源訪問。

NodeJS專案製作流程

• 建立專案資料夾並生成專案描述檔案

  • 新建專案資料夾students
  • 在專案資料夾中開啟命令提示符面板
  • 鍵入指令 npm init -y 自動生成package.json檔案
  • 在students資料夾中新建檔案app.js 以建立網路伺服器

• 建立網站伺服器實現客戶端和伺服器端通訊

  • 在app.js檔案中，引入http模組，建立網站伺服器

• 連線資料庫並根據需求設計學員資訊表

  • 下載安裝 mongoose 第三方包 npm install mongoose
  • 在專案根目錄下新建資料夾model 並建立檔案connect.js
  • 在connect.js中，引入mongoose資料庫模組 const mongoose = require('mongoose');
  • 連線資料庫 mongoose.connect('mongodb://localhost/playground');
  • 在app.js中引入connect.js檔案 require('./model/connect');
  • 在model資料夾下新建檔案user.js以建立資料庫集合
  • 在user.js中，引入mongoose資料庫模組 const mongoose = require('mongoose');
  • 建立學生集合規則 const studentsSchema = new mongoose.Schema({})
  • 使用學生集合規則 const Student = mongoose.model('Student', studentsSchema);
  • 將學生資訊集合進行匯出 module.exports = Student;
  • 回到app.js 引入學生資訊集合 const Student = require('./model/user');

• 建立路由並實現頁面模板呈遞

  • 下載安裝路由模組 npm install router
  • 在app.js中引入router模組 require('router');
  • 獲取路由物件 const router = getRouter();
  • 定義路由,呈遞學生檔案資訊頁面 ``
  • 定義路由 router.get('/add', (req, res) => {res.end('test');})
  • 當客戶端訪問伺服器端的時候，實現路由的呼叫

• 實現靜態資源訪問

  • 下載安裝模板引擎模組 npm install art-template
  • 引入模板引擎 const template = require('art-template');
  • 配置模板根目錄 template.defaults.root = path.join(__dirname, 'views');
  • 當客戶端訪問伺服器端的時候，啟動路由功能
  • 下載安裝靜態資源訪問服務 npm install serve-static
  • 引入模組 const serveStatic = require('serve-static');
  • 呼叫方法，實現靜態資源訪問服務 const serve = serveStatic(path.join(__dirname, 'public'));
  • 當客戶端訪問伺服器端的時候，啟動靜態資源訪問服務功能

• 實現學生資訊新增功能

  • 在模板的表單中指定請求地址與請求方式 action method
  • 為每一個表單項新增name屬性
  • 新增實現學生資訊功能路由
  • 引入querystring模組，將字串解析為物件 const querystring = require('querystring');
  • 接收客戶端傳遞過來的學生資訊
  • 將學生資訊新增到資料庫中
  • 將頁面重定向到學生資訊列表頁面

• 實現學生資訊展示功能

  • 從資料庫中將所有的學生資訊查詢出來
  • 通過模板引擎將學生資訊和HTML模板進行拼接
  • 將拼接好的HTML模板響應給客戶端

第三方模組router

• 功能：實現路由
• 使用步驟
  • 獲取路由物件
  • 呼叫路由物件提供的方法建立路由
  • 啟用路由，使路由生效

const getRouter = require('router')
const router = getRouter();
router.get('/add', (req, res) => {
    res.end('Hello World!')
}) 
server.on('request', (req, res) => {
    router(req, res)
})

• 下載 npm install router

第三方模組serve-static

• 功能：實現靜態資源訪問服務
• 步驟：
  • 引入serve-static模組獲取建立靜態資源服務功能的方法
  • 呼叫方法建立靜態資源服務並指定靜態資源服務目錄
  • 啟用靜態資源服務功能

const serveStatic = require('serve-static')
const serve = serveStatic('public')
server.on('request', () => { 
    serve(req, res)
})
server.listen(3000)