了解单页应用
1.什么是單頁應用
? ? 單頁應用是整個webapp就一個html文件，全程無刷新，里面的各個功能頁面是javascript通過hash,或者history api來進行路由，并通過ajax拉取數據來實現響應功能，所以叫單頁面。
?
2.單頁應用的實現
? ?實際上只在一個頁面處理所有業務。但在用戶視覺上卻呈現多個頁面的效果，多個頁面的效果由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"><!-- 頂部導航 --><nav><a href="#/">首頁</a><a href="#/my">我的音樂</a><a href="#/friend">朋友</a></nav><!-- 顯示對應界面 需要根據hash地址的不同來渲染--><div id="page"></div></div></body> <script src="./js/vue.js"></script> <script>// 初始化渲染// 1. 獲取hash值// 2. 判斷不同的hash值// 3. 頁面中插入不同的頁面內容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地址發生改變的時候會執行console.log(location.hash)// 根據當前的hash重新渲染即可render();}const vm = new Vue({el:'#app'}); </script> </html>??
? 3.單頁應用的優缺點
優點：
1、前后端分離，前端負責界面顯示，后端負責數據存儲和計算，各司其職，開發效率更高
2、減輕服務器壓力，服務器只需要提供api調用即可，無需處理頁面合成及頁面邏輯。
3、同一套后端代碼，無需即可用于Web界面、手機、平板等多種客戶端；
缺點：
1、SEO問題，現在可以通過Prerender等技術解決一部分；
2、前進、后退、地址欄等，需要程序進行管理；
3、書簽，需要程序來提供支持；
?
4.其他
不適合做大型網站，維護成本高。
總結
- 上一篇： 基于SSM的高校共享单车管理系统【数据库
- 下一篇： c语言实验题数鸽子和兔子,[TZOJ]