Django + Vue + Nginx + FRP Mobile PC Switch to Build Comic Website (Part 1)

Mobile phone address: http://m.comic.tklb.top/

Computer terminal address: http://comic.tklb.top/

background

1, the background

The PC project is currently built using the Django template language, while the mobile project is written using Vue. When you want to implement automatic mobile PC switching, one way is to use NGINX to determine the request header and redirect to the specified service.

2, steps,

Added configuration of mobile phone server:

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

Rewrite parameters:

image.png

Computer side configuration:

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

3, problem,

1, the problem of global switching

Error: Error on the mobile phone interface, the host on the mobile phone is the host on the computer

image\_1.png

image\_2.png

Solution:

The interface address is the domain name of the computer side. If you switch the interface address to the domain name of the mobile phone side, there will be an error. So we decided not to consider the global switch.

2. Nginx condition judgment problem

Error:

Only in the home page, at the same time to determine the main domain URI and whether the mobile terminal request header times the error is as follows:

image\_3.png

Nginx configuration does not support the if condition of logic and && logic or | | operators, and does not support the if nested syntax, otherwise will be submitted to the following error: nginx: [emerg] invalid condition

image\_4.png

Solution:

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, other

1. Details page jump requirements

2021-07-09 before the requirement, after the page has been implemented with VUE

In addition to the switch of the home page, the detail page jump is also needed to be implemented at present (i.e. the page page on the mobile side has not been implemented yet, so it needs to be replaced by the page page on the computer side temporarily. The page page on the mobile side should return the details on the mobile side, and the address of the back button is the details on the computer side).

Computer studying mood page: http://comic.tklb.top/585b257… \_c/

Mobile phone details page: http://m.comic.tklb.top/#/dat…

Steps:

1. Set it in the computer server

if ($request_uri ~* ^/(.*?) _c/$) { set $flag "${flag}2"; } if ($flag = "012"){ rewrite "^/(.*?) _c/$" http://m.comic.tklb.top/#/detail?id=$1 break; }

2. Setting in the mobile server

if ($request_uri ~* ^/#/datail? id=(.*?) $) { set $flag "${flag}2"; } if ($flag = "012"){ rewrite "^/#/detail? id=(.*?) $" http://comic.tklb.top/$1_c/ break; }

Note: Due to the following characteristics, and the mobile terminal is a single page VUE, but the # is retained in the route. Currently, it has been decided not to remove the # and convert it to multiple pages, so the server setting on the mobile terminal is invalid

image\_5.png

2,uriandrequest_uriThe difference between

$uri refers to the requested file and path, not including? Or something like #

$request_uri refers to the entire string of requests, including what follows

Such as:

$uri: www.baidu.com/document $request_uri:

References:

1.https://www.cnblogs.com/brian… \_43228360/article/details/1053239403.https://www.cnblogs.com/aaa10… Configurations (site PC and mobile phone https://xxxxg.blog.csdn.net/a… Mobile Browsers | Open source mobile phone detection http://detectmobilebrowsers.c… In the location, rewrite usage summary https://www.cnblogs.com/dadon…