django+vue+nginx+frp搭建漫畫網站之移動PC端自動切換（一）
手機端地址：http://m.comic.tklb.top/
電腦端地址：http://comic.tklb.top/
1、背景
漫畫網站電腦端專案目前是用django模板語言構建的，而手機端是使用vue寫的，當想實作移動PC自動切換時，其中一個辦法就是通過nginx來判斷請求頭并重定向到指定的服務下，
2、步驟
手機server端增加配置：
if ($http_user_agent ~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
rewrite ^(.*) http://comic.tklb.top$1 redirect;
}
rewrite引數：
電腦端配置：
if ($http_user_agent !~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
rewrite ^(.*) http://m.comic.tklb.top$1 permanent;
}
3、問題
1、全域切換的問題
錯誤：手機端介面報錯，手機端host為電腦端host
解決：
介面地址為電腦端的域名，全域切換的話，介面地址變為手機端的域名，就會報錯，所以決定不考慮全域切換，
2、nginx條件判斷問題
錯誤：
只在主頁的時候判斷，同時判斷主域名uri和是否為手機端請求頭時報錯如下：
nginx的配置中不支持if條件的邏輯與&& 邏輯或||運算 ，而且不支持if的嵌套語法，否則會報下面的錯誤：nginx: [emerg] invalid condition
解決：
# 方法一
set $flag 0;
if ($http_user_agent !~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)){
set $flag "${flag}1";
}
if ($request_uri = "/"){
set $flag "${flag}1";
}
if ($flag = "011"){
rewrite "/" http://comic.tklb.top/ break;
}
# 方法二
location = / {
if ($http_user_agent !~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)){
rewrite "/" http://comic.tklb.top/ break;
}
}
4、其他
1、詳情頁跳轉需求
2021-07-09前需求，之后的page頁已經用vue實作
除去首頁切換，詳情頁跳轉也是當前需要實作的（問就是手機端的page頁還未實作，需要使用電腦端的page頁暫時來代替，手機端page頁面應該回傳手機端的詳情，而回傳按鈕的地址是電腦端的詳情），
電腦端詳情頁：http://comic.tklb.top/585b2576892f58e9b1bbc107a12c1337_c/
手機端詳情頁：http://m.comic.tklb.top/#/datail?id=bb3d959d0ef552d6a5f29dee1d5549c7
步驟：
1、在電腦端server里設定
if ($request_uri ~* ^/(.*?)_c/$) {
set $flag "${flag}2";
}
if ($flag = "012"){
rewrite "^/(.*?)_c/$" http://m.comic.tklb.top/#/detail?id=$1 break;
}
2、手機端server里設定
if ($request_uri ~* ^/#/datail?id=(.*?)$) {
set $flag "${flag}2";
}
if ($flag = "012"){
rewrite "^/#/detail?id=(.*?)$" http://comic.tklb.top/$1_c/ break;
}
注：由于下圖這個特性，且移動端是vue單頁面的，而路由中保留了#，當前決定不去除#和轉換成多頁面，因此手機端server設定無效
2、uri和request_uri的區別
$uri指的是請求的檔案和路徑，不包含?或者#之類的東西
$request_uri則指的是請求的整個字串，包含了后面請求的東西
例如：
$uri： www.baidu.com/document
$request_uri： www.baidu.com/document?x=1
參考資料：
-
https://www.cnblogs.com/brianzhu/p/8624703.html
-
https://blog.csdn.net/weixin_43228360/article/details/105323940
-
https://www.cnblogs.com/aaa103439/p/68f8124a7848326d8100821748e71068.html
-
Nginx配置網站適配PC和手機 https://xxxxg.blog.csdn.net/article/details/46680863
-
Detect Mobile Browsers | Open source mobile phone detection http://detectmobilebrowsers.com/
-
nginx中location、rewrite用法總結 https://www.cnblogs.com/dadonggg/p/7797281.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/289233.html
標籤：其他
下一篇：行程管理-死鎖問題