自學Node.Js

Node.js

node.js

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

  • Node.js不是JavaScript應用,不是語言,不是框架,不是服務器。
  • 而是JavaScript運行時環境。
  • 就像瀏覽器同樣解析運行JavaScript語言,由於Node.js是創建在Chrome的V8引擎上的
  • 特色
    • 事件驅動(event-driven)
    • 非阻塞I/O模型(non-blocking I/O model)
    • 每一個函數都是異步的

node --version // 查看版本號css

node server.js // 開啓服務器html

npm

node package managerjava

npm --versionnode

npm install --global npm // 本身升級本身web

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

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

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

npm help || npm 命令 --helpjson

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是入口文件,文件名稱不重要

相關文章
相關標籤/搜索