前端同一URL根據(jù)設(shè)備加載不同頁面的實(shí)現(xiàn)方案
前言
因?yàn)闅v史的原因，公司內(nèi)部有一個(gè)系統(tǒng)針對(duì)手機(jī)端和電腦端分別做了一套前端的spa頁面，但是業(yè)務(wù)方還是希望通過不同設(shè)備訪問同一個(gè)地址的時(shí)候，手機(jī)端加載手機(jī)端的頁面，電腦端就去加載電腦端的頁面 該如何實(shí)現(xiàn)這該死的需求呢？
方案
問題拆解
問：定心想一下，要實(shí)現(xiàn)這個(gè)需求我們需要解決的最根本的問題是什么呢？
答：根本要解決的問題是區(qū)分不同的設(shè)備，對(duì)相同的URL地址，返回對(duì)應(yīng)設(shè)備的入口html文件。
問：那該如何區(qū)分不同設(shè)備呢?
答：我們可以在nginx中，根據(jù)請(qǐng)求頭中的ua區(qū)分是移動(dòng)端設(shè)備還是電腦端設(shè)備。
問：那具體該怎么配置呢?
具體配置
server {
listen 9999;
root /www/data/source;
# 默認(rèn)入口是pc
set $index_file /index-pc.html;
if ($http_user_agent ~* "(android|iphone|ipad|ipod|mobile)") {
# 手機(jī)端入口
set $index_file /index-mobile.html;
}
if ($arg_isMobile != "") {
# 特殊需要 如果路徑上帶isMobile也加載手機(jī)端入口頁面
set $index_file /index-mobile.html;
}
location / {
# 順序匹配 默認(rèn)匹配路徑 否則返回pc或mobile入口html
try_files $uri $index_file;
}
}
效果
電腦端訪問localhost:9999
手機(jī)端訪問localhost:9999
電腦端訪問localhost:9999?isMobile=1
解決
通過ua的判斷，針對(duì)相同的請(qǐng)求URL加載對(duì)應(yīng)設(shè)備的入口html文件。
注意點(diǎn)
這個(gè)解決方案有一個(gè)要求是兩個(gè)端構(gòu)建后的資源需要上傳到同一個(gè)目錄下面，并且要修改入口html名稱區(qū)分不同端的入口。擔(dān)心靜態(tài)資源(js,css,img)混亂的話，可以在構(gòu)建的時(shí)候,把靜態(tài)資源也用目錄區(qū)分開，比如電腦端靜態(tài)資源構(gòu)建到pc目錄下，手機(jī)端的資源構(gòu)建到mobile目錄下。
結(jié)語
沒有最好的方案，只有最適合業(yè)務(wù)需求的方案。
總結(jié)
到此這篇關(guān)于前端同一URL根據(jù)設(shè)備加載不同頁面的文章就介紹到這了,更多相關(guān)前端同一URL加載不同頁面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了前端實(shí)現(xiàn)文字漸變的三種方式：CSS通過背景漸變與裁切實(shí)現(xiàn),Canvas利用createLinearGradient繪制,SVG通過定義漸變并應(yīng)用到文字,CSS最常用,其他兩種適用于特定場景,需要的朋友可以參考下2025-07-07
js提交form表單,并傳遞參數(shù)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s提交form表單,并傳遞參數(shù)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了關(guān)于在 JavaScript 中如何讓 this 保持正確的指向的解決方案,文中給大家介紹了三種解決方案,使用閉包,使用箭頭函數(shù)和換綁 this這三種方法,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-01-01
作為一項(xiàng)有意思的新技術(shù)，canvas給我們帶來了對(duì)網(wǎng)頁繪圖和網(wǎng)頁動(dòng)畫的新革命。本文簡單介紹下canvas實(shí)用的功能，下面跟著小編一起來看下吧2017-01-01
js判斷文件類型大小并給出提示的實(shí)現(xiàn)方法
下面小編就為大家分享一篇js判斷文件類型大小并給出提示的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
js 創(chuàng)建一個(gè)浮動(dòng)div的代碼
js 創(chuàng)建一個(gè)浮動(dòng)div的代碼，一般用來指導(dǎo)用戶下面的操作與多條件選擇。點(diǎn)擊一下就可顯示，具體的大家可以自由發(fā)揮。2009-12-12
用最通俗易懂的代碼幫助新手理解javascript閉包 推薦
我同樣也是個(gè)javascript新手，怎么說呢，先學(xué)的jquery，精通之后發(fā)現(xiàn)了javascript的重要性，再回過頭來學(xué)javascript面向?qū)ο缶幊?/div> 2012-03-03
這篇文章主要介紹了JS簡單封裝的圖片無縫滾動(dòng)效果,結(jié)合完整實(shí)例形式分析了javascript針對(duì)圖片無縫滾動(dòng)功能實(shí)現(xiàn)的具體操作技巧,包括鼠標(biāo)事件響應(yīng)、事件函數(shù)及頁面元素屬性動(dòng)態(tài)變換等相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
基于Bootstrap實(shí)現(xiàn)下拉菜單項(xiàng)和表單導(dǎo)航條(兩個(gè)菜單項(xiàng)，一個(gè)下拉菜單和登錄表單導(dǎo)航條)
這篇文章主要介紹了基于Bootstrap實(shí)現(xiàn)下拉菜單項(xiàng)和表單導(dǎo)航條(兩個(gè)菜單項(xiàng)，一個(gè)下拉菜單和登錄表單導(dǎo)航條)的相關(guān)資料,需要的朋友可以參考下2016-07-07
前端傳遞參數(shù)時(shí)form-data和json的區(qū)別詳解
前端可以通FormData對(duì)象實(shí)現(xiàn)表單形式提交數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于前端傳遞參數(shù)時(shí)form-data和json區(qū)別的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11最新評(píng)論