自學Node.Js

ZhengAu發表於2019-03-27
Node.js

Node.js

node.js

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.

  • Node.js不是JavaScript應用，不是語言，不是框架，不是伺服器。
  • 而是JavaScript執行時環境。
  • 就像瀏覽器一樣解析執行JavaScript語言，因為Node.js是建立在Chrome的V8引擎上的
  • 特點
    • 事件驅動（event-driven）
    • 非阻塞I/O模型（non-blocking I/O model）
    • 每個函式都是非同步的

node --version // 檢視版本號

node server.js // 開啟伺服器

npm

node package manager

npm --version

npm install --global npm // 自己升級自己

npm init || npm init -y // 快速生成package.json

npm install XXX --save // 把下載的包在package.json中建立依賴項

npm uninstall XXX --save // 刪除的同時，把依賴項刪除

npm help || npm 命令 --help

npm config list

art-template

簡介

模板引擎

npm install --save art-template

npm i -S art-template

子模版

把其他模組頁面包含在主要頁面中，以減少頁面冗餘

{{ include './header.html' }} {{ include './footer.html' }}

模板繼承

父模板：

// template.html
// block 表示模板，'content'表示此模板的標識
{{ block 'content' }}
  // body    
  // 此處內容可以被子模版替換
{{ /block }}

{{ block 'style'}}
{{ /block }}
複製程式碼

繼承父模板：

// 首先說明繼承
{{ extend './template.html'}}

// 再使用父模板中的內容
{{ block 'content'}}
  // 此處內容會替換父模板中的對應部分
  // 若不寫則不會替換
{{ /block }}

複製程式碼

模板例項：

<!--template.html-->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ block 'title' }}My Site{{ /block }}</title>

    {{block 'head'}}
      <link rel="stylesheet" href="main.css">
      <!-- CSS -->
    {{/block}}
</head>
<body>
    {{ block 'content' }}
        <!-- 主體內容 -->
    {{ /block }}

    {{ block 'script' }}
      <!-- JavaScript -->
    {{ /block }}
</body>
</html>

<!-- 繼承 tempalte.html 的頁面 -->
{{extend './template.html'}}

{{ block 'title' }}
  {{title}}
{{ /block }}

{{block 'head'}}
    <link rel="stylesheet" href="custom.css">
{{/block}}

{{block 'content'}}
  <p>This is just an awesome page.</p>
{{/block}}

{{ block 'script' }}
  <!-- javascript -->
{{ /block }}
複製程式碼

Express

Fast, unopinionated, minimalist web framework for Node.js.

安裝：

npm install -save express

使用：

const express = require('express')
const app = express()
const port = 3000

// 公開指定的目錄
app.use('/public/', express.static('./public/'))
// 當請求 / 時，傳送響應的內容。使用了箭頭函式
app.get('/', (req, res) => {
    res.send('')
})
// 監聽埠號
app.listen(port, (req, res) => {
    console.log('server running...')
})

複製程式碼

Express 中配置 art-template

安裝：

npm install art-template --save

npm install express-art-template --save

或者

npm i -S art-template express-art-template

配置：

app.engine('html', require('express-art-template'))
複製程式碼

使用：

app.get('/', (req, res) => {
    res.render('xxx.html')
    // res.render('xxx.html', {xx:'xx', ...})
})
複製程式碼

Express 獲取表單 POST 請求體資料

藉助第三方包body-parser

安裝：

npm install body-parser --save

配置：

var express = require('express')
// 引包
var bodyParser = require('body-parser')

var app = express()

// 配置body-parser
// 只要加入這個配置，則在 req 請求物件上會多出一個屬性 body
// 也就是說你就可以直接通過 req.body 來獲取表單 POST 請求體資料
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())

app.use(function (req, res) {
  res.setHeader('Content-Type', 'text/plain')
  res.write('you posted:\n')
  res.end(JSON.stringify(req.body, null, 2))
})
複製程式碼

使用：

req.body // 獲取POST提交的資料

app.use(function (req, res) {
  res.setHeader('Content-Type', 'text/plain')
  res.write('you posted:\n')
  res.end(JSON.stringify(req.body, null, 2))
})
複製程式碼

Express 獲取表單 GET 請求體資料

req.query	// 獲取GET提交的資料
複製程式碼

MongoDB

非關係型資料庫

補充

nodemon

Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development.

nodemon, reload, automatically.

第三方工具，會監視檔案的變化，當檔案發生變化時，自動重啟伺服器

npm install -g nodemon // 安裝到全域性

nodemon server.js // 開啟伺服器，server.js是入口檔案，檔名稱不重要

相關文章