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

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的区别

$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...