javascript - 請(qǐng)問前后端分離的spa應(yīng)用是怎么一回事兒?
問題描述
作為一個(gè)自學(xué)后端的前端不是很懂,spa是訪問網(wǎng)址時(shí)一次性返回去,之后靠前端路由切換顯示么?然后服務(wù)器只負(fù)責(zé)對(duì)ajax返回?cái)?shù)據(jù)?
問題解答
回答1:你只需要提供一個(gè)url鏈接到前端的index.html頁面,然后寫好接口API就行了,其他的都交給前端處理。
回答2:是的,你理解的沒錯(cuò)只有一個(gè)入口文件,靠路由切換組件,后臺(tái)提供api
回答3:1.是不是一次性返回取決于你有沒有做了代碼異步加載,提取公共部分的處理2.spa頁面的切換是通過前端路由導(dǎo)航的3.前后端完全分離,代碼沒有耦合,服務(wù)器只提供數(shù)據(jù)服務(wù),前端通過ajax調(diào)用服務(wù)端接口,獲得數(shù)據(jù)之后再更新頁面。
希望能幫到你。
回答4:傳統(tǒng):前端由多個(gè)頁面組成,后端負(fù)責(zé)組織數(shù)據(jù)、實(shí)現(xiàn)路由、甚至生成頁面內(nèi)容;前端后端其實(shí)是混雜一起的;當(dāng)前:前端由單個(gè)頁面或者少量頁面構(gòu)成(Single Page Application),前端框架負(fù)責(zé)組織路由,切換頁面內(nèi)容(一般將頁面拆分成組件/Componet),后端只負(fù)責(zé)提供 API 服務(wù)并收發(fā)數(shù)據(jù);這樣前后端就基本分離解耦了。
回答5:后端只負(fù)責(zé)提供前端所需要的數(shù)據(jù),其他頁面間的切換跳轉(zhuǎn)與用戶的交互等邏輯的實(shí)現(xiàn)都由前端來完成。spa單頁面只需要一個(gè)index.html頁面,作為整個(gè)項(xiàng)目的入口,然后引入必需的js文件,其他js文件可以按需加載,具體的頁面內(nèi)容可以由js動(dòng)態(tài)生成渲染。有時(shí)頁面的變化不是重新請(qǐng)求,也不是刷新,而是通過事件驅(qū)動(dòng),執(zhí)行對(duì)應(yīng)的方法來重新渲染當(dāng)前頁面。
回答6:一切都要從ajax的局部刷新說起.
傳統(tǒng)的web, 瀏覽器輸入一個(gè)url然后返回一個(gè)頁面.
后來, 人們發(fā)現(xiàn)這樣太浪費(fèi)資源啦, 比如, 我點(diǎn)了個(gè)贊, 那么數(shù)據(jù)庫和頁面上的贊數(shù)都要+1, 這個(gè)刷新頁面肯定是不行的啊, 那就’局部刷新’吧.
再后來, 機(jī)智的開發(fā)者又想到, hash路徑段(形如#header)是不會(huì)像服務(wù)器發(fā)請(qǐng)求的, 那么我們可以在點(diǎn)擊一個(gè)錨點(diǎn)的時(shí)候加載一個(gè)小頁面, 局部刷新, 再加上可以操作瀏覽器的歷史記錄來實(shí)現(xiàn)回退等功能. 那干脆就搞個(gè)前端路由吧. 于是前端路由就出現(xiàn)啦.
其實(shí)前端路由本質(zhì)上也是一種局部刷新, 但是更規(guī)范. 這次刷新, 拉回來的是一個(gè)完整的組件, 這個(gè)組件包含了視圖和數(shù)據(jù). 這里的數(shù)據(jù)又分為兩種, 一種是后端傳過來的, 暫且成為數(shù)據(jù)庫數(shù)據(jù), 另一種是為了更好地管理視圖而在前端生成的數(shù)據(jù), 暫且成為視圖數(shù)據(jù).
一通亂說過后, 我們就可以好好分析一下SPA到底是個(gè)什么東西啦.
SPA是single page application的簡稱, 中文叫單頁應(yīng)用. 何為單頁? 就是只有一個(gè)頁面, 這個(gè)頁面一般是index.html, 這是項(xiàng)目的入口文件. 自項(xiàng)目啟動(dòng)到結(jié)束, 瀏覽器中始終都是這個(gè)頁面, 你看到的變化只是組件之間的創(chuàng)建和刪除. 比如你在這個(gè)頁面里引入bootstrap(不是個(gè)好主意), 那你所有的組件都會(huì)受到bootstrap的影響.
... 實(shí)在寫不下去了, 剩下的太長啦. 等我哪天寫個(gè)文章好好說一下. 作為的答案的話, 篇幅實(shí)在太大.
簡單的來說, 就是前端提供視圖, 后端提供json數(shù)據(jù). 用后端的數(shù)據(jù)來渲染前端的頁面.
相關(guān)文章:
1. python3.x - python連oanda的模擬交易api獲取json問題第五問2. docker - 如何修改運(yùn)行中容器的配置3. nignx - docker內(nèi)nginx 80端口被占用4. docker-machine添加一個(gè)已有的docker主機(jī)問題5. java - SSH框架中寫分頁時(shí)service層中不能注入分頁類6. 關(guān)于docker下的nginx壓力測(cè)試7. 為什么我ping不通我的docker容器呢???8. node.js - 我是一個(gè)做前端的,求教如何學(xué)習(xí)vue,node等js引擎?9. javascript - js代碼獲取驗(yàn)證碼倒計(jì)時(shí)問題10. html5 - 百度echart官網(wǎng)下載的地圖json數(shù)據(jù)亂碼
