Node.js快速上手

ode.js的概念與使用

Node.js是一個跨平臺的JavaScript運行環境，使得開發者可以搭建服務器端的JavaScript應用程序；

通過nvm管理nodejs版本

Mac安裝nvm

brew install nvm

配置nvm環境變量，在~/.zshrc下添加以下內容

export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh

如果是Linux系統可以使用命令：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | zsh

執行命令source ~/.zshrc使得環境變量生效

安裝node.js指定版本(16.19.0兼容vue-admin-template)

nvm install 16.19.0

如果要安裝穩定版本則使用命令：nvm install stable

二、nodejs模塊

1. fs模塊-讀寫文件

封裝了與本機文件系統進行交互的方法與屬性；

語法：

const fs = require('fs') // fs是讀寫模塊的標識符
fs.writeFile('文件路徑','寫入內容'，err => {
     // 寫入后的回調函數
 })
fs.readFile('文件路徑',(err,data) => {
  // 讀取后的回調函數
  // data是文件內容的Buffer數據流，可以通過toString方法轉為字符串
})

案例：

使用fs模塊寫入字符串到文件以及從文件中讀取內容

// 導入fs模塊
const fs = require('fs');
// 文件寫入
fs.writeFile('./1.txt','hello, this is javascript',error => {
    if(error){
        console.log(err);
    }else{
        console.log('寫入成功');
    }
})
// 文件讀取
fs.readFile('./1.txt',(err,data)=>{
    if(err){
        console.log(err);
    }else{
        console.log(data.toString());
    }
})

2.path模塊-路徑處理

建議在Node.js中使用絕對路徑；

js中可以使用--dirname獲取當前程序運行的絕對路徑；

使用path.join()可以生成作用于當前平臺的分隔符將路徑片段連接在一起；

語法：

const path = require('path')
path.join('path1','path2',...)

案例：

壓縮前端html文件，去掉回車符\r和\n,寫入到新的HTML文件中；

const fs = require('fs');
const path = require('path');

fs.readFile(path.join(__dirname,'public/index.html'),(error,data) => {
    if(error){
        console.log(error);
    }else{
        const str = data.toString();
        // 利用正則表達式去除回車與換行
        const resStr = str.replace(/[\r\n]/g,'');
        console.log(resStr);
        // 寫入新的文件中
        fs.writeFile(path.join(__dirname,'dist/index.html'),resStr,error => {
            if(error){
                console.log(error);
            }else{
                console.log('寫入成功!');
            }
        })
    }
})

正則表達式中[ ]代表的是一個字符串類，使用g代表全局匹配；
如果使用這種正則刪除回車與換行，那么HTML中如果寫了JavaScript就需要刪除雙斜杠注釋內容，否則這種方式壓縮會導致注釋符號將所有JavaScript代碼注釋掉；

3.Http模塊

URL是統一資源定位符，端口號標記服務器里不同功能的服務程序，端口號范圍0-65535，Http協議默認訪問80端口；

案例：創建web服務并相應內容給服務器；

語法：

const http = require('http')
const server = http.createServer()

server.on('request',(req,res) => {
  // 設置響應頭：內容類型，普通文本；編碼格式為utf-8
  res.setHeader('Content-Type','text/plain;charset=utf-8')
  // 設置響應體
  res.end('您好，歡迎使用Nodejs創建的web服務')
})

server.listen(3000,() => {
  console.log('web服務已經啟動')
})

案例：創建一個web服務，瀏覽器訪問/index.html時，返回指定網頁內容；

const http = require('http');
const fs = require('fs');
const path = require('path');
const server = http.createServer()

server.on('request', (req, res) => {
    if (req.url === '/ ') {
        fs.readFile(path.join(__dirname, 'dist/index.html'), (err, data) => {
            res.setHeader('Content-Type', 'text/html;charset=utf-8');
            res.end(data.toString());
        })
    } else {
        res.setHeader('Content-Type', 'text/html;charset=utf-8');
        res.end('您訪問的路徑不存在');
    }
})

server.listen(80, () => {
    console.log('web服務已經啟動');
})

4.項目模塊化

4.1 CommonJS標準

定義：在Nodejs中，每個文件都被視為一個單獨的模塊；

CommonJS標準語法：

導出 model.exports={}

導入 require('模塊名或路徑')

const obj = require('模塊名或路徑')
// obj 等于module.exports導出的對象

const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce((sum,val) => sum += val, 0)

module.exports={
  對外屬性名1: baseURL,
  對外屬性名2: getArraySum
}

案例：寫一個util.js工具模塊，使用CommonJS的語法，定義返回baseURL和數組求和的方法，在另一個JS模塊中導入并應用該方法；

// util.js
const baseURL = 'http://hmajax.itheima.net'
const getArraySum = array => array.reduce((sum,val)=>sum += val,0)

module.exports = {
    url:baseURL,
    arraySum: getArraySum
}

// demo.js
const obj = require('./util.js');
console.log(obj);
const res = obj.arraySum([1,2,3,4]);
console.log(res);

4.2 ECMAScript標準

4.2.1 默認導出導入用法：

const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce((sum,val) => sum += val, 0)

export default {
  對外屬性名1: baseURL,
  對外屬性名2: getArraySum
}

導出export default {}

導入import 變量名 from '模塊名或路徑'

Node.js默認支持CommonJS標準語法，如果需要使用ECMAScript語法，在運行模塊所在文件夾新建package.json文件，并寫入{"type":"module"}

案例：寫一個util.js工具模塊，使用ECMAScript的語法，定義返回baseURL和數組求和的方法，在另一個JS模塊中導入并應用該方法；

// utils.js
const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce((sum,val) => sum += val, 0)

export default {
  url: baseURL,
  arraySum: getArraySum
}

// package.json
{
  "type":"module"
}

// demo.js
import obj from './util.js'

console.log(obj);
const res = obj.arraySum([1,2,3,4]);
console.log(res);

4.2.2 命名導出和導入用法：

導出：export 修飾定義語句

export const baseURL = 'http://hmajax.itheima.net'
export const getArraySum = arr => arr.reduce((sum,val) => sum += val, 0)

導入：import {同名變量} from '模塊名或者路徑'

import {baseURL,getArraySum} from '模塊名或路徑'

案例：使用命名導出的方式，定義返回baseURL和數組求和的方法，在另一個JS模塊中導入并應用該方法；

// utils.js
export const baseURL = 'http://hmajax.itheima.net'
export const getArraySum = arr => arr.reduce((sum,val) => sum += val, 0)

// package.json
{
  "type":"module"
}

// demo.js
import {baseURL,getArraySum} from './util.js'

console.log(baseURL);
console.log(getArraySum([1,2,3,4]));

5. Nodejs中的包

5.1 包的概念

概念：將模塊、代碼、和其他資料聚合成一個文件夾；

分類：主要分為項目包(編寫項目和業務邏輯)和軟件包（封裝工具和方法）

根目錄有package.json文件用于記錄包的清單信息（作者、入口文件、包名）
導入一個包文件夾時，默認導入的是index.js文件，如果沒有這個文件，就去package.json里找main定義的文件；

一個包的項目文件結構：:point_down:

├── server.js      // 實際寫的業務邏輯代碼，在這里導入包utils
└── utils        // 包文件夾
    ├── index.js      // 這里將arr.js和str.js導出的功能函數進行聚合，導包實際導的是這個js文件
    ├── lib         // 功能函數文件夾
    │   ├── arr.js    // 實現具體功能
    │   └── str.js    // 實現具體功能
    └── package.json  // 記錄包的清單信息,定義入口js文件是誰，默認是index.js

案例：

// server.js
const obj = require('./utils') 

const res = obj.getArraySum([1,2,3,3]);
console.log(res);

// index.js
// 不解構會得到嵌套對象，這里直接解構賦值
const {getArraySum} = require('./lib/arr.js');
const {checkUser,checkPwd} = require('./lib/str.js');

module.exports={
    getArraySum,
    checkUser,
    checkPwd
}

// arr.js
const getArraySum = arr => arr.reduce((sum,val) => sum += val,0)

module.exports = {
    getArraySum
}

// str.js
const checkUserName = username => {
    return username.length >= 8;
}

const checkPassWord = password => {
    return password.length >= 6;
}

module.exports = {
    checkUser:checkUserName,
    checkPwd:checkPassWord,
}

5.2 npm包管理器

安裝本地軟件包

初始化清單文件npm init -y,會在當前文件夾下生成一個package.json文件

下載軟件包：npm i 軟件包名，下載包的同時會繼續生成package-lock.json文件用于固化軟件包的版本，防止最新版本更新影響本地；

安裝所有依賴：npm -i會將package.json中聲明的包名以及對應版本號都下載到，node-modules文件夾里；

刪除軟件包：npm uni 軟件包名；

安裝全局軟件包

本地軟件包在當前項目中使用，存在于node_modules中；

全局軟件包對于本機所有項目都可用，存在于系統設置的位置；

這里以安裝nodemon為例：

nodemon可以實時檢測代碼的更改，自動啟動程序；

使用：

安裝npm i nodemon -g;

運行 nodemon 待啟動的js文件

至此，你就學會了nodejs的基本使用啦~

、vue的兩種安裝方式

（1）直接在html中引入vue.js

（2）通過vue+nodeJS搭建

我們采用的是第二種方式

二、vue和nodeJS的關系

（1）nodeJS不是一個js框架，是一個基于Chrome V8引擎的javascript運行環境，所以會產生眾多基于node的js框架和庫，同時包括關于js模塊化的庫。另一個就是node可以創建本地服務器，從而可以使用js來編寫后臺程序。

（2）vue依賴node中的webpack打包工具，初始化vue項目，以及一些依賴包。

三、搭建vue項目

（1）安裝node

（2）初始化vue項目，初始化命令：vue init webpack my-project

需要注意的是：node的版本需要和npm版本相對應

（3）初始化項目后，進入到project目錄下使用命令npm run dev來啟動項目。這個命令的執行是通過vue腳手架找到項目的根目錄下的package.json文件，scripts表示腳本部分，作用是把webpack的原生命令進行代理。其中build即是打包命令。執行了npm run dev則會啟動端口，在開發

（4）vue目錄結構，項目目錄：webroot->vue->project

在build下的webpack.base.conf.js中可配置文件引入路徑的別名，引入的公共文件路徑可在這里配置，移動文件時只需要修改這一個地方，如：@表示src目錄.

四、關于vue的幾大知識模塊

（1）vue路由

vue使用的是單頁面路由，即所有組件都是渲染在一個容器中，頁面跳轉時不需要重新加載頁面，只是重新渲染組件。在開發應用時，前端分配頁面地址，包括實際路徑地址、name、別名、重定向、組件名稱，實際訪問路徑可以是別名也可以是真實路徑

（2）vue雙向數據綁定，使用模板語言

（3）vue的生命周期

beforeCreate：this無法使用，data數據、method方法都是無法獲取的

created：可以操作vue實例中的數據和方法，但是無法操作dom結構

mounted：掛載完畢，dom節點渲染到頁面中，能操作dom結構

computed：計算屬性，vue經常會在模板中使用一些簡單的表達式來控制值，所以復雜的邏輯應使用計算屬性來進行控制?？煽焖儆嬎阋晥D中的屬性，并且計算會被緩存，在需要更新的時候更新。提升頁面性能。一般是當做屬性來使用

watch：偵聽屬性，用來監聽data中的數據變化，還可以監聽函數的中參數來獲取新值和舊值，和計算屬性有些類似，通常用這個屬性來響應數據的變化，監聽ajax返回的結果。監聽特定數據的變化并作出具體的業務邏輯。

（4）vue組件的開發和調用：注冊組件使用.vue文件，使用export default將組件暴露出去，在父組件中import進來，并聲明組件，在父組件中直接使用組件名稱作為標簽名即可使用子組件

（5）vue的權限控制：控制用戶登錄權限，控制用戶角色權限，在頁面加載前判斷是否已登錄，如果已登錄再判斷用戶是否有權限

odeJs是基于Chrome V8引擎的JavaScript運行環境，可以理解為對Chrome V8引擎進行了封裝，即NodeJs封封裝了很多庫文件，以便我們更高效地開發我們的應用。它采用事件驅動和非阻塞I/O模型，非常適合構建運行在分布式的數據密集型實時應用。

在NodeJs環境中，JavaScript可以運行在服務端，并為JavaScript提供了操作文件、創建HTTP服務、創建TCP、UDP服務等接口，使其成為與C#、PHP、Python、Perl、Ruby等服務端語言一樣可以開發網接應用的腳本語言。NodeJs針對對一些特殊用例進行優化，提供替代的API，使得V8在非瀏覽器環境下運行得更好。NodeJs是一個功能強大的JavaScript運行環境，適用于構建高效、可擴展的網絡應用。

一、NodeJs和Javascript(Js)是不一樣的。兩者的區別：

NodeJs

NodeJs是一個基于 Chrome V8 引擎的 JavaScript 運行環境，是一個讓 JavaScript 運行在服務端的開發平臺，運行Javascript代碼是由V8引擎解釋運行；

Javascript

JavaScript是一種高級的、解釋型的編程語言；它支持面向對象編程，命令式編程，以及函數式編程。

傳統的JavaScript是運行在瀏覽器上的，瀏覽器內核分如圖：

渲染引擎負責渲染HTML和CSS；

JavaScript 引擎負責運行JavaScript代碼；

執行JavaScript代碼，需要JavaScript引擎，可以使用瀏覽器（內置JavaScript引擎）或NodeJs環境（內置JavaScript引擎）執行JavaScript代碼。

二、NodeJs安裝

進入NodeJs官網：https://nodejs.org/

下載后，運行node-v20.11.0-x64.msi，按默認安裝：

打開：C:\Program Files\nodejs

將C:\Program Files\nodejs添加到環境變量中：

打開終端，運行node --version

可以看到版本號：v20.11.0，說明NodeJs環境安裝成功。

三、創建第一個運行程序：Hello World!程序

在我的電腦中創建目錄：D:\NodeJs\al001，在該目錄下創建helloword.js文件，用記事本打開helloword.js，輸入console.log("Hello World!");并保存，如下圖：

打開終端，CD進入目錄：D:\NodeJs\al001，輸入命令：node helloworld.js

可以看到輸出結果：Hello World!

就是這么神奇，就是這么簡單。

在線咨詢

上一篇：CSS盒子模型，排版布局的基石
下一篇：HTML表單3（下拉列表、多行文字輸入）-零基礎自學網頁制作

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商