1.Node.js簡介

1.0.前后臺(tái)數(shù)據(jù)交互流程

在web開發(fā)中，我們經(jīng)常聽說前端和后臺(tái)，他們分別是做什么具體工作的呢？他們?cè)鯓咏换サ哪?#xff1f;我們得把這些基礎(chǔ)的問題都搞明白了，才有一個(gè)大致的學(xué)習(xí)方向，首先，我們來看一張生活中幾乎每個(gè)人都經(jīng)歷過的一個(gè)場景，如下圖：

當(dāng)你去餐館吃飯的時(shí)候，坐下后服務(wù)員會(huì)帶著一個(gè)菜單過來，問你需要點(diǎn)什么菜，這個(gè)時(shí)候你瀏覽了菜單上的菜，把想吃的菜告訴服務(wù)員，服務(wù)員把你點(diǎn)的菜拿到后臺(tái)，后臺(tái)根據(jù)你點(diǎn)的菜名，逐一完成，菜做完后叫服務(wù)員給你上菜，就這么一個(gè)場景其實(shí)和我們web開發(fā)中的前后臺(tái)交互竟是如此相似，我們來看看哪些點(diǎn)是相似的：

1 菜單---瀏覽器頁面， 你看到的菜單如果在web開發(fā)中，就相當(dāng)于用戶看到的瀏覽器頁面

2 點(diǎn)菜（記錄想吃的菜） --- 點(diǎn)擊頁面（和頁面交互，例如：點(diǎn)擊登錄）

3 服務(wù)員把菜單交給后廚 --- 發(fā)送數(shù)據(jù)（可以把數(shù)據(jù)理解為菜單）到后臺(tái)（可以把后臺(tái)理解為后廚）

4 后廚做菜 --- 后臺(tái)處理數(shù)據(jù)

5 上菜 --- 后臺(tái)把處理好的數(shù)據(jù)發(fā)送給前臺(tái)

根據(jù)上面的一些相似點(diǎn)，我們總結(jié)一下前后臺(tái)的特點(diǎn)：

1、前臺(tái)是對(duì)用戶可見的，例如，菜單、你能看到的網(wǎng)站頁面（如螺釘課堂首頁）

2、后臺(tái)對(duì)用戶是不可見的，用戶也不用關(guān)心后臺(tái)具體在干什么，用戶只需要知道吃什么菜(具體想看那些頁面數(shù)據(jù))，而并不關(guān)心這些菜如何做的（一般后廚不對(duì)外開放）

3、后廚和餐桌之間是需要建立通信連接的，這事兒由服務(wù)員來完成，在網(wǎng)絡(luò)中具體就是那些網(wǎng)絡(luò)傳輸設(shè)備來完成

綜上所述，我想你應(yīng)該大致猜出前端工程師和后端工程師具體做哪些工作了，前端工程師主要負(fù)責(zé)頁面展示，這里包括pc端、移動(dòng)端、TV端等，需要考慮如何把后端給我的數(shù)據(jù)顯示得更好看，也就是說我得把菜單做得非常好看，客戶點(diǎn)菜才更有欲望，這其中客戶點(diǎn)菜的交互過程也是非常重要的，關(guān)系到用戶的使用體驗(yàn)，還有一個(gè)非常重要的職責(zé)就是要把數(shù)據(jù)發(fā)送到后臺(tái)去處理，用戶和頁面交互的時(shí)候需要什么，不需要什么，怎樣做才能提高體驗(yàn)也是前端需要關(guān)心的，一句話概括就是前端負(fù)責(zé)用戶的體驗(yàn)，后臺(tái)主要就是處理數(shù)據(jù)，這個(gè)過程不需要讓用戶知道，你可以去倉庫拿原材料，用各種工具各種方式來完成菜譜上的各種菜，只需要最終呈上一道可口的菜就行，總結(jié)起來就是前端負(fù)責(zé)和用戶交互，后臺(tái)負(fù)責(zé)處理數(shù)據(jù)，下面我們通過一幅圖來給大家展示：

1.1.Node.js是什么

Node.js是一個(gè)Javascript運(yùn)行環(huán)境(runtime)，發(fā)布于2009年5月，由Ryan Dahl開發(fā)，實(shí)質(zhì)是對(duì)Chrome V8引擎進(jìn)行了封裝

讓我們?cè)賮砘仡櫼幌虑懊嬷vdom的時(shí)候的一張關(guān)系圖

總結(jié)一下重點(diǎn)：

1 ECMAScript是JavaScript的標(biāo)準(zhǔn)

2 JavaScript在瀏覽器端依賴于DOM和BOM提供的接口，有了這些接口可以操作網(wǎng)頁中的元素和瀏覽器

3 JavaScript在后端也需要運(yùn)行環(huán)境那就是Node.js，它擴(kuò)展了一些模塊，讓js有后端開發(fā)的能力

4 相關(guān)的規(guī)范組織 W3C、ECMA、CommonJs

1.2.Node.js安裝

下載地址：?https://nodejs.org/en/download/

根據(jù)自己的平臺(tái)和操作系統(tǒng)位數(shù)選擇下載，下載完成后雙擊安裝，一直點(diǎn)下一步就可以，最好安裝在默認(rèn)位置，以免出現(xiàn)未知問題

安裝好后測試是否安裝成功：

node -v

如果出現(xiàn)node的版本號(hào)說明安裝成功

1.3.開發(fā)工具安裝

這次我們會(huì)換一個(gè)編輯器來開發(fā)Node代碼，這個(gè)編輯器叫webstorm，對(duì)Node開發(fā)更加友好，下載地址：點(diǎn)擊進(jìn)入官網(wǎng)

安裝方法也是直接點(diǎn)擊下一步

1.4.第一個(gè)程序

1 啟動(dòng)webstorm,第一次打開會(huì)問你是否導(dǎo)入已經(jīng)有的配置文件，通常選擇第二個(gè)

2 詢問你是否同意一些條款，這個(gè)你必須同意才能使用 選擇第一個(gè)按鈕

3 詢問你是激活版本還是說試用30天，可以自己購買，也可以先免費(fèi)使用30天，關(guān)于如何激活的問題，請(qǐng)聯(lián)系QQ解決

4 最好一個(gè)彈出項(xiàng)目 點(diǎn)擊接收

5 選擇一個(gè)你喜歡的主題色吧，白色或者黑色

6 如果你不喜歡現(xiàn)在的主題，也可以安裝新主題，最后開始代碼邊寫?

7 創(chuàng)建項(xiàng)目

8 選擇項(xiàng)目存放位置，然后點(diǎn)擊create

9 進(jìn)入到主界面就可以新建文件，寫代碼了，關(guān)于設(shè)置問題，可以看視頻教程

10 在新建的文件里面輸入一段代碼 然后右鍵 --> run 就可以運(yùn)行了

?

轉(zhuǎn)載于:https://www.cnblogs.com/nodeing/p/8808984.html

總結(jié)

以上是生活随笔為你收集整理的Ajax+Node.js前后端交互最佳入门实践(01)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。