Ajax+Node.js前后端交互最佳入門實踐(01)


1.Node.js簡介

1.0.前后台數據交互流程

在web開發中,我們經常聽說前端和后台,他們分別是做什么具體工作的呢?他們怎樣交互的呢?我們得把這些基礎的問題都搞明白了,才有一個大致的學習方向,首先,我們來看一張生活中幾乎每個人都經歷過的一個場景,如下圖:

點菜圖

當你去餐館吃飯的時候,坐下后服務員會帶着一個菜單過來,問你需要點什么菜,這個時候你瀏覽了菜單上的菜,把想吃的菜告訴服務員,服務員把你點的菜拿到后台,后台根據你點的菜名,逐一完成,菜做完后叫服務員給你上菜,就這么一個場景其實和我們web開發中的前后台交互竟是如此相似,我們來看看哪些點是相似的:

1 菜單---瀏覽器頁面, 你看到的菜單如果在web開發中,就相當於用戶看到的瀏覽器頁面

2 點菜(記錄想吃的菜) --- 點擊頁面(和頁面交互,例如:點擊登錄)

3 服務員把菜單交給后廚 --- 發送數據(可以把數據理解為菜單)到后台(可以把后台理解為后廚)

4 后廚做菜 --- 后台處理數據

5 上菜 --- 后台把處理好的數據發送給前台

根據上面的一些相似點,我們總結一下前后台的特點:

1、前台是對用戶可見的,例如,菜單、你能看到的網站頁面(如螺釘課堂首頁)

2、后台對用戶是不可見的,用戶也不用關心后台具體在干什么,用戶只需要知道吃什么菜(具體想看那些頁面數據),而並不關心這些菜如何做的(一般后廚不對外開放)

3、后廚和餐桌之間是需要建立通信連接的,這事兒由服務員來完成,在網絡中具體就是那些網絡傳輸設備來完成

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

前后端交互圖

1.1.Node.js是什么

Node.js是一個Javascript運行環境(runtime),發布於2009年5月,由Ryan Dahl開發,實質是對Chrome V8引擎進行了封裝

nodejs

讓我們再來回顧一下前面講dom的時候的一張關系圖

js各種關系圖

總結一下重點:

1 ECMAScript是JavaScript的標准

2 JavaScript在瀏覽器端依賴於DOM和BOM提供的接口,有了這些接口可以操作網頁中的元素和瀏覽器

3 JavaScript在后端也需要運行環境那就是Node.js,它擴展了一些模塊,讓js有后端開發的能力

4 相關的規范組織 W3C、ECMA、CommonJs

1.2.Node.js安裝

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

根據自己的平台和操作系統位數選擇下載,下載完成后雙擊安裝,一直點下一步就可以,最好安裝在默認位置,以免出現未知問題

下一步

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

node -v

如果出現node的版本號說明安裝成功

成功

1.3.開發工具安裝

這次我們會換一個編輯器來開發Node代碼,這個編輯器叫webstorm,對Node開發更加友好,下載地址:點擊進入官網

安裝方法也是直接點擊下一步

1.4.第一個程序

1 啟動webstorm,第一次打開會問你是否導入已經有的配置文件,通常選擇第二個

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

3 詢問你是激活版本還是說試用30天,可以自己購買,也可以先免費使用30天,關於如何激活的問題,請聯系QQ解決

4 最好一個彈出項目 點擊接收

5 選擇一個你喜歡的主題色吧,白色或者黑色

6 如果你不喜歡現在的主題,也可以安裝新主題,最后開始代碼邊寫 

7 創建項目

8 選擇項目存放位置,然后點擊create

9 進入到主界面就可以新建文件,寫代碼了,關於設置問題,可以看視頻教程

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM