头图

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

iewoai_seg

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

 title=

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

 title=

image\_1.png

 title=

image\_2.png

解决:

接口地址为电脑端的域名,全局切换的话,接口地址变为手机端的域名,就会报错,所以决定不考虑全局切换。

2、nginx条件判断问题

错误:

只在主页的时候判断,同时判断主域名uri和是否为手机端请求头时报错如下:

 title=

image\_3.png

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

 title=

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设置无效

 title=

image\_5.png

2、urirequest_uri的区别

$uri 指的是请求的文件和路径,不包含?或者#之类的东西

$request_uri 则指的是请求的整个字符串,包含了后面请求的东西

例如:

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

参考资料:

1.https://www.cnblogs.com/brian...
2.https://blog.csdn.net/weixin\_43228360/article/details/105323940
3.https://www.cnblogs.com/aaa10...
4.Nginx配置网站适配PC和手机 https://xxxxg.blog.csdn.net/a...
5.Detect Mobile Browsers | Open source mobile phone detection http://detectmobilebrowsers.com/
6.nginx中location、rewrite用法总结 https://www.cnblogs.com/dadon...

阅读 217
1 声望
0 粉丝
0 条评论
你知道吗?

1 声望
0 粉丝
宣传栏