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

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

地址：http://www.iewoai.com/

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 

参考资料：

1. https://www.cnblogs.com/brianzhu/p/8624703.html

2. https://blog.csdn.net/weixin_43228360/article/details/105323940

3. https://www.cnblogs.com/aaa103439/p/68f8124a7848326d8100821748e71068.html

4. Nginx配置网站适配PC和手机 https://xxxxg.blog.csdn.net/article/details/46680863

5. Detect Mobile Browsers | Open source mobile phone detection http://detectmobilebrowsers.com/

6. nginx中location、rewrite用法总结 https://www.cnblogs.com/dadonggg/p/7797281.html