整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
Node.js是一個跨平臺的JavaScript運(yùn)行環(huán)境，使得開發(fā)者可以搭建服務(wù)器端的JavaScript應(yīng)用程序；
brew install nvmexport NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh如果是Linux系統(tǒng)可以使用命令：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | zsh執(zhí)行命令source ~/.zshrc使得環(huán)境變量生效
nvm install 16.19.0如果要安裝穩(wěn)定版本則使用命令：nvm install stable
封裝了與本機(jī)文件系統(tǒng)進(jìn)行交互的方法與屬性；
語法：
const fs = require('fs') // fs是讀寫模塊的標(biāo)識符
fs.writeFile('文件路徑','寫入內(nèi)容'，err => {
// 寫入后的回調(diào)函數(shù)
})
fs.readFile('文件路徑',(err,data) => {
// 讀取后的回調(diào)函數(shù)
// data是文件內(nèi)容的Buffer數(shù)據(jù)流，可以通過toString方法轉(zhuǎn)為字符串
})案例：
使用fs模塊寫入字符串到文件以及從文件中讀取內(nèi)容
// 導(dǎo)入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());
}
})建議在Node.js中使用絕對路徑；
js中可以使用--dirname獲取當(dāng)前程序運(yùn)行的絕對路徑；
使用path.join()可以生成作用于當(dāng)前平臺的分隔符將路徑片段連接在一起；
語法：
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();
// 利用正則表達(dá)式去除回車與換行
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('寫入成功!');
}
})
}
})正則表達(dá)式中[ ]代表的是一個字符串類，使用g代表全局匹配；
如果使用這種正則刪除回車與換行，那么HTML中如果寫了JavaScript就需要刪除雙斜杠注釋內(nèi)容，否則這種方式壓縮會導(dǎo)致注釋符號將所有JavaScript代碼注釋掉；
URL是統(tǒng)一資源定位符，端口號標(biāo)記服務(wù)器里不同功能的服務(wù)程序，端口號范圍0-65535，Http協(xié)議默認(rèn)訪問80端口；
案例：創(chuàng)建web服務(wù)并相應(yīng)內(nèi)容給服務(wù)器；
語法：
const http = require('http')
const server = http.createServer()
server.on('request',(req,res) => {
// 設(shè)置響應(yīng)頭：內(nèi)容類型，普通文本；編碼格式為utf-8
res.setHeader('Content-Type','text/plain;charset=utf-8')
// 設(shè)置響應(yīng)體
res.end('您好，歡迎使用Nodejs創(chuàng)建的web服務(wù)')
})
server.listen(3000,() => {
console.log('web服務(wù)已經(jīng)啟動')
})案例：創(chuàng)建一個web服務(wù)，瀏覽器訪問/index.html時，返回指定網(wǎng)頁內(nèi)容；
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服務(wù)已經(jīng)啟動');
})定義：在Nodejs中，每個文件都被視為一個單獨(dú)的模塊；
CommonJS標(biāo)準(zhǔn)語法 ：
導(dǎo)出 model.exports={}
導(dǎo)入 require('模塊名或路徑')
const obj = require('模塊名或路徑')
// obj 等于module.exports導(dǎo)出的對象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和數(shù)組求和的方法，在另一個JS模塊中導(dǎo)入并應(yīng)用該方法；
// 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);const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce((sum,val) => sum += val, 0)
export default {
對外屬性名1: baseURL,
對外屬性名2: getArraySum
}導(dǎo)出export default {}
導(dǎo)入import 變量名 from '模塊名或路徑'
Node.js默認(rèn)支持CommonJS標(biāo)準(zhǔn)語法，如果需要使用ECMAScript語法，在運(yùn)行模塊所在文件夾新建package.json文件，并寫入{"type":"module"}
案例：寫一個util.js工具模塊，使用ECMAScript的語法，定義返回baseURL和數(shù)組求和的方法，在另一個JS模塊中導(dǎo)入并應(yīng)用該方法；
// 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);導(dǎo)出：export 修飾定義語句
export const baseURL = 'http://hmajax.itheima.net'
export const getArraySum = arr => arr.reduce((sum,val) => sum += val, 0)導(dǎo)入：import {同名變量} from '模塊名或者路徑'
import {baseURL,getArraySum} from '模塊名或路徑'案例：使用命名導(dǎo)出的方式，定義返回baseURL和數(shù)組求和的方法，在另一個JS模塊中導(dǎo)入并應(yīng)用該方法；
// 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]));概念：將模塊、代碼、和其他資料聚合成一個文件夾；
分類：主要分為項(xiàng)目包(編寫項(xiàng)目和業(yè)務(wù)邏輯)和軟件包（封裝工具和方法）
根目錄有package.json文件用于記錄包的清單信息（作者、入口文件、包名）
導(dǎo)入一個包文件夾時，默認(rèn)導(dǎo)入的是index.js文件，如果沒有這個文件，就去package.json里找main定義的文件；
一個包的項(xiàng)目文件結(jié)構(gòu)：:point_down:
├── server.js // 實(shí)際寫的業(yè)務(wù)邏輯代碼，在這里導(dǎo)入包utils
└── utils // 包文件夾
├── index.js // 這里將arr.js和str.js導(dǎo)出的功能函數(shù)進(jìn)行聚合，導(dǎo)包實(shí)際導(dǎo)的是這個js文件
├── lib // 功能函數(shù)文件夾
│ ├── arr.js // 實(shí)現(xiàn)具體功能
│ └── str.js // 實(shí)現(xiàn)具體功能
└── package.json // 記錄包的清單信息,定義入口js文件是誰，默認(rèn)是index.js案例：
// server.js
const obj = require('./utils')
const res = obj.getArraySum([1,2,3,3]);
console.log(res);// index.js
// 不解構(gòu)會得到嵌套對象，這里直接解構(gòu)賦值
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,
}安裝本地軟件包
初始化清單文件npm init -y,會在當(dāng)前文件夾下生成一個package.json文件
下載軟件包：npm i 軟件包名，下載包的同時會繼續(xù)生成package-lock.json文件用于固化軟件包的版本，防止最新版本更新影響本地；
安裝所有依賴：npm -i會將package.json中聲明的包名以及對應(yīng)版本號都下載到，node-modules文件夾里；
刪除軟件包：npm uni 軟件包名；
安裝全局軟件包
本地軟件包在當(dāng)前項(xiàng)目中使用，存在于node_modules中；
全局軟件包對于本機(jī)所有項(xiàng)目都可用，存在于系統(tǒng)設(shè)置的位置；
這里以安裝nodemon為例：
nodemon可以實(shí)時檢測代碼的更改，自動啟動程序；
使用：
安裝npm i nodemon -g;
運(yùn)行 nodemon 待啟動的js文件
至此，你就學(xué)會了nodejs的基本使用啦~
、vue的兩種安裝方式
（1）直接在html中引入vue.js
（2）通過vue+nodeJS搭建
我們采用的是第二種方式
二、vue和nodeJS的關(guān)系
（1）nodeJS不是一個js框架，是一個基于Chrome V8引擎的javascript運(yùn)行環(huán)境，所以會產(chǎn)生眾多基于node的js框架和庫，同時包括關(guān)于js模塊化的庫。另一個就是node可以創(chuàng)建本地服務(wù)器，從而可以使用js來編寫后臺程序。
（2）vue依賴node中的webpack打包工具，初始化vue項(xiàng)目，以及一些依賴包。
三、搭建vue項(xiàng)目
（1）安裝node
（2）初始化vue項(xiàng)目，初始化命令：vue init webpack my-project
需要注意的是：node的版本需要和npm版本相對應(yīng)
（3）初始化項(xiàng)目后，進(jìn)入到project目錄下使用命令npm run dev來啟動項(xiàng)目。這個命令的執(zhí)行是通過vue腳手架找到項(xiàng)目的根目錄下的package.json文件，scripts表示腳本部分，作用是把webpack的原生命令進(jìn)行 代理。其中build即是打包命令。執(zhí)行了npm run dev則會啟動端口，在開發(fā)
（4）vue目錄結(jié)構(gòu)，項(xiàng)目目錄：webroot->vue->project
在build下的webpack.base.conf.js中可配置文件引入路徑的別名，引入的公共文件路徑可在這里配置，移動文件時只需要修改這一個地方，如：@表示src目錄.
四、關(guān)于vue的幾大知識模塊
（1）vue路由
vue使用的是單頁面路由，即所有組件都是渲染在一個容器中，頁面跳轉(zhuǎn)時不需要重新加載頁面，只是重新渲染組件。在開發(fā)應(yīng)用時，前端分配頁面地址，包括實(shí)際路徑地址、name、別名、重定向、組件名稱，實(shí)際訪問路徑可以是別名也可以是真實(shí)路徑
（2）vue雙向數(shù)據(jù)綁定，使用模板語言
（3）vue的生命周期
beforeCreate：this無法使用，data數(shù)據(jù)、method方法都是無法獲取的
created：可以操作vue實(shí)例中的數(shù)據(jù)和方法，但是無法操作dom結(jié)構(gòu)
mounted：掛載完畢，dom節(jié)點(diǎn)渲染到頁面中，能操作dom結(jié)構(gòu)
computed：計(jì)算屬性，vue經(jīng)常會在模板中使用一些簡單的表達(dá)式來控制值，所以復(fù)雜的邏輯應(yīng)使用計(jì)算屬性來進(jìn)行控制。可快速計(jì)算視圖中的屬性，并且計(jì)算會被緩存，在需要更新的時候更新。提升頁面性能。一般是當(dāng)做屬性來使用
watch：偵聽屬性，用來監(jiān)聽data中的數(shù)據(jù)變化，還可以監(jiān)聽函數(shù)的中參數(shù)來獲取新值和舊值，和計(jì)算屬性有些類似，通常用這個屬性來響應(yīng)數(shù)據(jù)的變化，監(jiān)聽ajax返回的結(jié)果。監(jiān)聽特定數(shù)據(jù)的變化并作出具體的業(yè)務(wù)邏輯。
（4）vue組件的開發(fā)和調(diào)用：注冊組件使用.vue文件，使用export default將組件暴露出去，在父組件中import進(jìn)來，并聲明組件，在父組件中直接使用組件名稱作為標(biāo)簽名即可使用子組件
（5）vue的權(quán)限控制：控制用戶登錄權(quán)限，控制用戶角色權(quán)限，在頁面加載前判斷是否已登錄，如果已登錄再判斷用戶是否有權(quán)限
odeJs是基于Chrome V8引擎的JavaScript運(yùn)行環(huán)境，可以理解為對Chrome V8引擎進(jìn)行了封裝，即NodeJs封封裝了很多庫文件，以便我們更高效地開發(fā)我們的應(yīng)用。它采用事件驅(qū)動和非阻塞I/O模型，非常適合構(gòu)建運(yùn)行在分布式的數(shù)據(jù)密集型實(shí)時應(yīng)用。
在NodeJs環(huán)境中，JavaScript可以運(yùn)行在服務(wù)端，并為JavaScript提供了操作文件、創(chuàng)建HTTP服務(wù)、創(chuàng)建TCP、UDP服務(wù)等接口，使其成為與C#、PHP、Python、Perl、Ruby等服務(wù)端語言一樣可以開發(fā)網(wǎng)接應(yīng)用的腳本語言。NodeJs針對對一些特殊用例進(jìn)行優(yōu)化，提供替代的API，使得V8在非瀏覽器環(huán)境下運(yùn)行得更好。NodeJs是一個功能強(qiáng)大的JavaScript運(yùn)行環(huán)境，適用于構(gòu)建高效、可擴(kuò)展的網(wǎng)絡(luò)應(yīng)用。
一、NodeJs和Javascript(Js)是不一樣的。兩者的區(qū)別：
NodeJs是一個基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境，是一個讓 JavaScript 運(yùn)行在服務(wù)端的開發(fā)平臺，運(yùn)行Javascript代碼是由V8引擎解釋運(yùn)行；
JavaScript是一種高級的、解釋型的編程語言；它支持面向?qū)ο缶幊蹋钍骄幊蹋约昂瘮?shù)式編程。
傳統(tǒng)的JavaScript是運(yùn)行在瀏覽器上的，瀏覽器內(nèi)核分如圖：
渲染引擎負(fù)責(zé)渲染HTML和CSS；
JavaScript 引擎負(fù)責(zé)運(yùn)行JavaScript代碼；
執(zhí)行JavaScript代碼，需要JavaScript引擎，可以使用瀏覽器（內(nèi)置JavaScript引擎）或NodeJs環(huán)境（內(nèi)置JavaScript引擎）執(zhí)行JavaScript代碼。
二、NodeJs安裝
進(jìn)入NodeJs官網(wǎng)：https://nodejs.org/
下載后，運(yùn)行node-v20.11.0-x64.msi，按默認(rèn)安裝：
打開：C:\Program Files\nodejs
將C:\Program Files\nodejs添加到環(huán)境變量中：
打開終端，運(yùn)行node --version
可以看到版本號：v20.11.0，說明NodeJs環(huán)境安裝成功。
三、創(chuàng)建第一個運(yùn)行程序：Hello World!程序
在我的電腦中創(chuàng)建目錄：D:\NodeJs\al001，在該目錄下創(chuàng)建helloword.js文件，用記事本打開helloword.js，輸入console.log("Hello World!");并保存，如下圖：
打開終端，CD進(jìn)入目錄：D:\NodeJs\al001，輸入命令：node helloworld.js
可以看到輸出結(jié)果：Hello World!
就是這么神奇，就是這么簡單。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
