了解单页应用
1.什么是單頁應(yīng)用
? ? 單頁應(yīng)用是整個webapp就一個html文件，全程無刷新，里面的各個功能頁面是javascript通過hash,或者history api來進行路由，并通過ajax拉取數(shù)據(jù)來實現(xiàn)響應(yīng)功能，所以叫單頁面。
?
2.單頁應(yīng)用的實現(xiàn)
? ?實際上只在一個頁面處理所有業(yè)務(wù)。但在用戶視覺上卻呈現(xiàn)多個頁面的效果，多個頁面的效果由js控制拼接完成，所以本能的瀏覽器上的歷史記錄前進后退無效，也因無刷新頁面而使用戶體驗良好
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><!-- 地址 #/ 顯示 首頁界面 --><!-- 地址 #/my 顯示 我的音樂界面 --><!-- 地址 #/friend 顯示 朋友界面 --><div id="app"><!-- 頂部導(dǎo)航 --><nav><a href="#/">首頁</a><a href="#/my">我的音樂</a><a href="#/friend">朋友</a></nav><!-- 顯示對應(yīng)界面 需要根據(jù)hash地址的不同來渲染--><div id="page"></div></div></body> <script src="./js/vue.js"></script> <script>// 初始化渲染// 1. 獲取hash值// 2. 判斷不同的hash值// 3. 頁面中插入不同的頁面內(nèi)容function render(){// 獲取hash地址，給 location.hash 賦值就是修改hash地址let hash = location.hash;//去除#，更美觀更像地址let path = hash.replace('#','');// 判斷path渲染不同界面switch(path){case '/':document.getElementById('page').innerHTML = '<b>首頁</b>';break;case '/my':document.getElementById('page').innerHTML = '<b>我的音樂</b>';break;case '/friend':document.getElementById('page').innerHTML = '<b>朋友</b>';break;default:break; }}render();// 切換hash的時候渲染window.onhashchange = function(){// 當hash地址發(fā)生改變的時候會執(zhí)行console.log(location.hash)// 根據(jù)當前的hash重新渲染即可render();}const vm = new Vue({el:'#app'}); </script> </html>??
? 3.單頁應(yīng)用的優(yōu)缺點
優(yōu)點：
1、前后端分離，前端負責(zé)界面顯示，后端負責(zé)數(shù)據(jù)存儲和計算，各司其職，開發(fā)效率更高
2、減輕服務(wù)器壓力，服務(wù)器只需要提供api調(diào)用即可，無需處理頁面合成及頁面邏輯。
3、同一套后端代碼，無需即可用于Web界面、手機、平板等多種客戶端；
缺點：
1、SEO問題，現(xiàn)在可以通過Prerender等技術(shù)解決一部分；
2、前進、后退、地址欄等，需要程序進行管理；
3、書簽，需要程序來提供支持；
?
4.其他
不適合做大型網(wǎng)站，維護成本高。
總結(jié)
- 上一篇： 基于SSM的高校共享单车管理系统【数据库
- 下一篇： c语言实验题数鸽子和兔子,[TZOJ]