django+vue+nginx+frp搭建漫画网站之移动PC端自动切换（一） django+vue+nginx+frp搭建漫画网站之

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参数：

文章图片

image.png
电脑端配置：

if ($http_user_agent !~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) { rewrite^(.*) http://m.comic.tklb.top$1 permanent; }

3、问题 1、全局切换的问题
错误：手机端接口报错，手机端host为电脑端host

文章图片

image\_1.png

文章图片

image\_2.png
解决：
接口地址为电脑端的域名，全局切换的话，接口地址变为手机端的域名，就会报错，所以决定不考虑全局切换。
2、nginx条件判断问题错误：
只在主页的时候判断，同时判断主域名uri和是否为手机端请求头时报错如下：

文章图片

image\_3.png
nginx的配置中不支持if条件的逻辑与&& 逻辑或||运算，而且不支持if的嵌套语法，否则会报下面的错误：nginx: [emerg] invalid condition

文章图片

image\_4.png
解决：

# 方法一 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/585b257...\_c/
手机端详情页：http://m.comic.tklb.top/#/dat...
步骤：
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设置无效

文章图片

image\_5.png
2、uri和request_uri的区别
【django+vue+nginx+frp搭建漫画网站之移动PC端自动切换（一）】$uri 指的是请求的文件和路径，不包含?或者#之类的东西
$request_uri 则指的是请求的整个字符串，包含了后面请求的东西
例如：

$uri： www.baidu.com/document $request_uri： www.baidu.com/document?x=1

参考资料：
1.https://www.cnblogs.com/brian...\_43228360/article/details/1053239403.https://www.cnblogs.com/aaa10...配置网站适配PC和手机 https://xxxxg.blog.csdn.net/a... Mobile Browsers | Open source mobile phone detection http://detectmobilebrowsers.c...中location、rewrite用法总结 https://www.cnblogs.com/dadon...