1. 程式人生 > >Node.js學習筆記 (一) Node介紹以及環境安裝

Node.js學習筆記 (一) Node介紹以及環境安裝

Node介紹以及環境安裝

文章目錄

1.什麼是Node

1.1 Node簡介

Node.js是一個能夠在伺服器端執行JavaScript的開放原始碼、跨平臺JavaScript執行環境。

  • Node使用JavaScript 作為開發語言,大部分基本模組都用JavaScript編寫

  • Node既不是語言,也不是框架,它是一個平臺

  • Node採用Google開發的V8引擎執行js程式碼,使用事件驅動、非阻塞和非同步I/O模型等技術來提高效能,可優化應用程式的傳輸量和規模

  • 在Node中沒有 BOM和DOM

2.Node能做什麼

  • Web服務API,比如REST
  • 實時多人遊戲
  • 後端的Web服務,例如跨域、伺服器端的請求
  • 基於Web的應用
  • 多客戶端的通訊,如即時通訊

3. Node的安裝與環境搭建

3.1 怎麼安裝Node

傻瓜式操作,一直下一步就可以了

具體操作略

3.2 Node的目錄結構

在這裡插入圖片描述

  • node_modules : node包目錄
  • node.exe : node啟動檔案
  • npm.cmd : npm啟動檔案

4. Node中的JavaScript

4.1 CommonJS規範

4.1.1 ECMAScript標準的缺陷

  • 沒有模組系統
  • 標準庫較少
  • 沒有標準介面
  • 缺乏管理系統

4.1.2 模組化

  • 如果程式設計的規模達到了一定程度,則必須對其進行模組化。
  • 模組化可以有多種形式,但至少應該提供能夠將程式碼分割為多個原始檔的機制。
  • CommonJS 的模組功能可以幫我們解決該問題。

4.1.3 CommonJS規範

  • CommonJS規範的提出,主要是為了彌補當前JavaScript沒有模組化標準的缺陷。

  • CommonJS規範為JS指定了一個美好的願景,希望JS能夠在任何地方執行。

  • CommonJS對模組的定義十分簡單:

    • 1.模組引用

      在規範中,定義了require()方法,這個方法接手模組標識,以此將一個模組引入到當前執行環境中。在 Node 中,只能通過 require 方法來載入執行多個 JavaScript 指令碼檔案。
      例子

      var math = require('math');
      
    • 2.模組定義

      在執行環境中,提供了exports物件用於匯出當前模組的方法或者變數,並且它是唯一的匯出的出口。

      在模組中還存在一個module物件,它代表模組自身,而exports是module的屬性。

      在Node中一個檔案就是一個模組

      例子

      exports.xxx = function() {};
      module.exports = {};
      
    • 3.模組標識

      模組標識其實就是模組的名字,也就是傳遞給require()方法的引數,它必須是符合駝峰命名法的字串,或者是以.或·..開頭的相對路徑、或者絕對路徑。
      模組的定義十分簡單,介面也十分簡潔。每個模組具有獨立的空間,它們互不干擾,在引用時也顯得乾淨利落。

4.2 Node中一些核心模組

核心模組是由 Node 提供的一個個的具名的模組,它們都有自己特殊的名稱標識,例如

  • fs 檔案操作模組
  • http 網路服務構建模組
  • os 作業系統資訊模組
  • path 路徑處理模組

所有核心模組在使用的時候都必須手動的先使用 require 方法來載入,然後才可以使用,例如:

var fs = require('fs')

注:Node 中的其它的核心模組

可以使用npm安裝自己所需要的模組

例如:需要安裝Express Web 開發框架

npm install express

5.Node中的包管理

5.1 CommonJS的包規範由包結構包描述檔案兩個部分組成

  • 1. 包結構

用於組織包中的各種檔案

包實際上就是一個壓縮檔案,解壓以後還原為目錄。符合規範的目錄,應該包含如下檔案:

package.json  描述檔案
bin  可執行二進位制檔案
lib  js程式碼
doc 文件
test 單元測試
  • 2. 包描述檔案

描述包的相關資訊,以供外部讀取分析

包描述檔案用於表達非程式碼相關的資訊,它是一個JSON格式的檔案 – package.json,位於包的根目錄下,是包的重要組成部分。

5.2 NPM

NPM(包管理器),基本命令

npm –v  檢視版本
npm  幫助說明
npm search 包名  搜尋模組包
npm install 包名  在當前目錄安裝包
npm install 包名 –g  全域性模式安裝包
npm remove 包名  刪除一個模組
npm install 檔案路徑  從本地安裝
npm install 包名 –registry=地址  從映象源安裝
npm config set registry 地址  設定映象源

6.Node的HelloWorld

6.1 使用Node執行簡單的JS程式碼

例子:列印Hello World

console.log("Hello World");

結果:

在這裡插入圖片描述

6.2 Node的模組測試

例子:建立一個math模組,然後引用模組進行加法計算

math.js

//方式一,直接使用exports物件
// exports.add = function (a,b) {
//   return a + b;
// }

//方式二,使用內建的module物件
module.exports = {
  mul : function (a, b) {
    return a * b;
  },
  add : function (a,b) {
    return a + b;
  }
}

client.js

var math = require("./math")

console.log(math.add(1,2));
console.log(math.mul(2,3));

結果:

在這裡插入圖片描述

6.2 Node寫檔案和簡單的錯誤處理

例子:建立一個檔案並寫入Hello World

const fs = require("fs");

fs.writeFile('./1.txt', ' Hello Node.js', (err) => {
  if (!err){
    console.log('檔案已儲存!');
  }
});

結果:

在這裡插入圖片描述

6.3 使用Node建立簡單的HTTP服務

例子:

var http = require("http");

var server = http.createServer();

server.on("request",function (request,response) {
  console.log("Hello World 3000 " + request.url);
  response.write("Hello World 3000 " + request.url);
  response.end();
})

server.listen(3000,function () {
  console.log("Hello into SimpleServer,Please require http://localhost:3000");
});



6.4 ES6中的模板字串

例子:

let str = `
Hello 
      World
!!!!  !!!
`

//ES6新增的字串表示方法,使用``表示模板字串
console.log(str);

結果:

在這裡插入圖片描述

6.5 Node中模板引擎的使用

例子1:

var template = require("art-template");

console.log(template.render("大家好,我叫:{{ name }}",{
  name : 'zhangsan'
}));

結果:

在這裡插入圖片描述

例子2:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="node_modules/art-template/lib/template-web.js"></script>
  <script src="node_modules/jQuery/tmp/jquery.js"></script>
  <script type="text/template" id="tmp1">
    <p>大家好,我叫:{{ name }}</p>
    <p>我今年 {{ age }} 歲了</p>
    <h1>我來自 {{ province }}</h1>
    <p>我喜歡:{{each hobbies}} {{ $value }} {{/each}}</p>
  </script>
  <script>
    var ret = template('tmp1', {
      name: 'Jack',
      age: 18,
      province: '北京市',
      hobbies: [
        '寫程式碼',
        '唱歌',
        '打遊戲'
      ]
    });
    $(function () {
      $("#hello").html(ret)
    })
  </script>

</head>
<body>
 <div id="hello">

 </div>
</body>
</html>

結果:

在這裡插入圖片描述

7.使用JS開發仿Apache伺服器閹割版

7.1 基本目錄結構

在這裡插入圖片描述

7.2 需求

  • 1.能根據目錄訪問相應資源
  • 2.可以獲取提交表單資訊
  • 3.有錯誤處理

7.3 實現程式碼

const http = require("http");
const fs = require("fs");
const template = require('art-template')
const url = require("url")

var comments = [
  {
    name: '張三',
    message: '今天天氣不錯!',
    dateTime: '2015-10-16'
  },
  {
    name: '張三2',
    message: '今天天氣不錯!',
    dateTime: '2015-10-16'
  },
  {
    name: '張三3',
    message: '今天天氣不錯!',
    dateTime: '2015-10-16'
  },
  {
    name: '張三4',
    message: '今天天氣不錯!',
    dateTime: '2015-10-16'
  },
  {
    name: '張三5',
    message: '今天天氣不錯!',
    dateTime: '2015-10-16'
  }
]


var basePath = 'E:/基礎專案/HTMLandCSS_Project/nodejs-learn-demo/2.黑馬Node/class_02'

http
  //建立http服務
  .createServer(function (req,res) {
    //獲取url路徑
    //Url {
    //   protocol: null,
    //   slashes: null,
    //   auth: null,
    //   host: null,
    //   port: null,
    //   hostname: null,
    //   hash: null,
    //   search: null,
    //   query: null,
    //   pathname: '/public/lib/bootstrap/dist/css/bootstrap.css.map',
    //   path: '/public/lib/bootstrap/dist/css/bootstrap.css.map',
    //   href: '/public/lib/bootstrap/dist/css/bootstrap.css.map' }

    //使用url模組轉換url
    var baseUrl = url.parse(req.url);
    //獲取基本請求路徑
    var pathName = baseUrl.pathname;

    //判斷是否是主頁面,讀取主頁面文字並返回
    if(pathName === '/' || pathName === '/index') {
      fs.readFile(basePath + "/views/index.html", function (err, data) {
        if (!err) {
          var ret = template.render(data.toString(), {
            comments: comments
          });
          res.end(ret);
        } else {
          res.end('404 Not Found');
        }
      })
    }

    //判斷是不是表單頁面
    else if (pathName.indexOf("/post") > -1){
      //返回讀取表單頁面文字
      fs.readFile(basePath + "/views/post.html", function (err, data) {
        if (!err) {
          res.end(data.toString());
        } else {
          res.end('404 Not Found');
        }
      })
    }

    //判斷請求是不是公共資源
    else if (pathName.indexOf("/public/") > -1) {
      console.log("index in public");
      fs.readFile("." + pathName, function (err, data) {
        if (!err) {
          res.end(data);
        } else {
          res.end('404 Not Found');
        }
      })
    }

    else if (pathName.indexOf('/pinglun') > -1){
      //轉換提交的URL引數
      var comment = parseQuery(baseUrl.query);
      comment.dateTime = '2017-11-2 17:11:22';
      comments.unshift(comment);
      //重定向到主頁面
      res.statusCode = 302;
      res.setHeader('Location', '/index');
      res.end();
    }

    else {
      fs.readFile("./views/404.html", function (err, data) {
        if (!err) {
          res.end(data);
        } else {
          res.end('404 Not Found');
        }
      })
    }

  })
  //監聽3000埠
  .listen(3000,function () {
    console.log("Server is start up...");
  })


//轉換url引數,將url引數轉換為物件
var parseQuery = function (query) {
  var reg = /([^=&\s]+)[=\s]*([^&\s]*)/g;
  var obj = {};
  while (reg.exec(query)) {
    obj[RegExp.$1] = decodeURI(RegExp.$2);
  }
  return obj;
}

結果:

在這裡插入圖片描述