• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

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

互联网 diligentman 2小时前 1次浏览

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

手机端地址:http://m.comic.tklb.top/
电脑端地址:http://comic.tklb.top/

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

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

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

电脑端配置:

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

3、问题

1、全局切换的问题

错误:手机端接口报错,手机端host为电脑端host

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

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

解决:

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

2、nginx条件判断问题

错误:

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

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

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

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

解决:

# 方法一
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设置无效

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

2、urirequest_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


喜欢 (0)