一、nodejs與javascript的區別

1.1 ECMAScript

• 不能操作DOM 不能監聽click事件，不能傳送ajax請求
• 不能處理http請求 不能操作檔案
• 只有ECMAScript不能做任何實際的專案

1.2 javascript

• 使用ECMAScript語法規範 外加Web API
• DOM操作 BOM操作 事件繫結 Ajax
• 兩者結合 即可完成瀏覽器端任何操作

1.3 nodejs

• 使用ECMAScript語法規範 外加nodejs API 缺一不可
• 處理http 處理檔案
• 兩者結合 完成server端的操作

{
  "name": "debugger-test"
 
,"version": "1.0.0","description": "","main": "index.js",// 重要 入口檔案
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },"keywords": [],"author": "","license": "ISC"
}
複製程式碼

// app.js
const http = require('http');

// 用http模組建立一個服務 服務端返回兩個引數req，res
const server = http.createServer((req,res
 
)=>{
    res.writeHead(200,{
        'content-type': 'text/html' // 返回的資訊格式是html格式
    })
    res.end('<h1>hello world</h1>') // 返回的具體內容
})
server.listen(3000,()=>{
    console.log('listening on 3000 port')
})
複製程式碼

1.4 server端開發和前端開發的區別

• 服務穩定性
  • server端可能會遭受各種惡意攻擊和誤操作
  • 單個客戶端可以意外掛掉，但是服務端不能
  • 使用PM2做程式守候 -- 指程式一旦掛掉會自動重啟 不用人工
• 考慮記憶體和CPU（優化，擴充套件）
  • 客戶端獨佔一個瀏覽器，記憶體和CPU都不是問題
  • server端要承載很多請求，CPU和記憶體都是稀缺資源
  • 使用stream寫日誌（優化），使用redis存session（擴充套件）
• 日誌記錄 對server端非常重要
  • 前端也會參與寫日誌，但只是日誌的發起方，不關心後續
  • server端要記錄日誌，儲存日誌，分析日誌，前端不關心
  • 多種日誌記錄方式，如何分析日誌，根據不同情況選擇不同的日誌記錄的方式
• 安全 前端可以輕易攻破 但server端不會輕易被攻破
  • server端要隨時準備接收各種惡意攻擊，前端則很少
  • 如：越權操作，資料庫攻擊
  • 登入驗證 預防xss攻擊和sql注入
• 叢集和服務拆分 server端承載的流量越來越大
  • 產品發展速度快，流量可能會迅速增加
  • 通過擴充套件機器和服務拆分來承載大流量

二、專案分析

2.1 專案實現目標

• 開發一個部落格系統 具有部落格的基本功能
• 只開發server端，不關心前端

2.2 專案需求分析

• 首頁，作者主頁，部落格詳情頁
• 登入頁
• 管理中心，新建頁，編輯頁

2.3 專案技術方案

• 資料如何儲存
  • 部落格

• 如何與前端對接，即介面設計

三、開發介面

// app.js
const http = require('http');

// 用http模組建立一個服務 服務端返回兩個引數req，res
const server = http.createServer((req,{
        'content-type': 'text/html' // 返回的資訊格式是html格式
    })
    res.end('<h1>hello world</h1>') // 返回的具體內容
})
server.listen(8000,()=>{
    console.log('listening on 8000 port')
})
複製程式碼

3.1 從輸入url到頁面渲染的過程？

• DNS解析（解析到一個IP地址），客戶端和伺服器端建立TCP連線，傳送http請求
  • 客戶端找到伺服器，會三次握手
  • 第一次握手：客戶端詢問伺服器 是否可以用
  • 第二次握手：伺服器端告訴客戶端可用
  • 第三次握手：客戶端告訴伺服器端，即將訪問 傳送http請求
• • server端接收到http請求，處理，並返回

    • nodejs處理http請求

    • get請求和querystring（url引數）

      • get請求 即客戶端要向server端獲取資料，如查詢部落格列表
      • 通過querystring來傳遞資料，如a.html?a=100&b=200
      • 瀏覽器直接訪問，就傳送get請求

      const http = require('http');
      const querystring = require('querystring');
      const server = http.createServer((req,res)=>{
          console.log(req.method) // GET
          const url = req.url // 獲取請求的完整url
          req.query = querystring.parse(url.split('?')[1]) // 解析querystring
          res.end(JSON.stringify(req.query));//將querystring返回
      });
      server.listen(8000);
      複製程式碼

    • post請求和postdata

      • 客戶端要像服務端傳遞資料，如新建部落格
      • 通過postData傳遞資料
      • 瀏覽器無法直接模擬，需要手寫js，或者使用postman

const http = require('http');
const server = http.createServer((req,res)=>{
    if(req.method === 'POST'){
        // 資料格式
        conssole.log('content-type',req.headers['content-type']);
        // 接受資料
        let postData = "";
        req.on('data',chunk=>{
            postData += chunk.toString()
        });
        req.on('end',()=>{
            console.log(postData);
            res.end('hello world'); //在這裡返回，因為是非同步
        })
    }
});
server.listen(8000);
複製程式碼

    - 路由（介面地址）
複製程式碼

const http=require('http');
const server = http.createServer((req,res)=>{
    const url= req.url;
    const path = url.split('?')[0];
    res.end(path); //返回路由
});
server.listen(8000);
複製程式碼

• 客戶端接收到返回資料，處理資料（如渲染頁面，執行JS）

四、部落格專案

4.1 搭建環境

• blog-1

  • bin
    • www.js
  • app.js 存放http.createServer()內的回撥函式

• npm init -y 入口檔案改成 "main": "bin/www.js",

• yarn add nodemon cross-env --save-dev 安裝

  • nodemon 可以監控檔案變化 可以自動重啟node 不需要手動重啟
  • cross-env 識別當前的環境 開發環境-dev 線上環境-production

  //package.json
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1","dev": "cross-env NODE_ENV=dev nodemon ./bin/www.js"
  },複製程式碼

• npm run dev

4.2 開發介面-初始化路由

• 返回假資料：將路由和資料處理分離，以符合設計原則