驾一叶之扁舟 举匏樽以相属
寄蜉蝣于天地,渺沧海之一粟。哀吾生之须臾,羡长江之无穷。
挟飞仙以遨游,抱明月而长终。知不可乎骤得,托遗响于悲风。

从壹开始 [ 学调试 ]║ 轻松实现 PC端+移动端的本地同步联调

缘起

哈喽!(瞬间就想到了开场白:亲爱的朋友们,我又回来了🤞),今天新开了一个专题,主要讲平时我开发中遇到的调试技巧。

为什么要写这个呢,下边是一个场景,我以前还真没这么用过,举个栗子,我们平时在开发 Web 的时候,总会遇到几个下边的调试情况,感谢 @前辈闺蜜 提出这个疑问(不知道能不能看到,不知道账号😂)

 

1、开发的时候,虽然可以在 PC 模仿手机来调试,但是还是想直接在手机看看效果如何?  // 可能只有部署到公网服务器了;

2、你可能会说,傻呀,发布到本地 IIS 代理,然后同一个局域网,用 ip+端口 来访问呀! // 那如果没有网呢?

3、可能更生气的说,直接手机开热点!这不就是同一个局域网了么 !   // 那如果是台式机呢?🙃

4、而且还有一种情况,台式机的网线网络,和手机连接的 WIFI 可能不在同一个局域网内,尴尬了。   // 感觉我像在找茬......

 

这个时候,问题就来了,你怎么用手机来访问你 PC 机上的 IIS 站点?

欸?!我在路上突然想到了一个办法,这里直接分享一下,内容很简单,不多做解释,一二三四直接往下走就行。

 

一、在 PC 上发布 Vue 项目

这里是用 IIS 的方式,当然你也可以使用 nginx 进行代理转发。

1、打包 Vue

直接在项目根目录,直接  

npm run build

然后就会在根目录下边,发现一个 dist 文件夹。就是它了,拖走。。。

 

2、部署到 IIS

这个就简单的不能再简单了,直接来个动图解决:

1、右键新建站点;

2、配置站点;

3、启动站点,并检查访问,是否正常

 

注意,这个时候,我们访问的还是 localhost 本地域名,我们的手机是无法访问的,而且要注意,我们的手机和 PC 不在同一个局域网内,这是我们本文讨论的意义!那到底如何要把两个终端连在一起呢,请往下看。

 

 

二、将 PC 和手机拽到同一个局域网内

1、手机需要一根数据线

 将我们的手机连上 PC,然后在网络设计的热点中,打开 USB 调试,这个应该都会,找不到的自行百度,大概就是这个酱紫:

 

 这个时候神奇的事情就发生了,我们的 PC 机,无论有没有连着网络,自动的会切换到手机网络里,这就是已经拽到了同一个局域网啦!这个时候我们可以使用WiFi ,也可以使用流量,我一般都是使用的流量,更稳定些。

那这个时候就剩下最后一个问题了,手机端如何访问呢,我们知道,我们访问站点,只能通过 IP 地址,localhost 本地域名是不行的,那如何获取现在 PC 站点的 URL 呢?请往下看。

 

三、获取此时的站点 URL

上边我们说到了连接上了手机的 USB 热点共享后,我们就造了一个小的局域网,这个时候我们的 PC 机的 IP 地址肯定变了,具体的方法,在命令窗户,使用  ipconfig 来查看本机 ip 地址:

( 查找本机 IP 地址)

 

这里说下,前辈问过的问题:

IPV4和IPV6的区别:

一、扩展了路由和寻址的能力

IPv6把IP地址由32位增加到128位,从而能够支持更大的地址空间,估计在地球表面每平米有4*10^18个IPv6地址,使IP地址在可预见的将来不会用完。

IPv6地址的编码采用类似于CIDR的分层分级结构,如同电话号码。简化了路由,加快了路由速度。在多点传播地址中增加了一个“范围”域,从而使多点传播不仅仅局限在子网内,可以横跨不同的子网,不同的局域网。

二、报头格式的简化

IPv 4报头格式中一些冗余的域或被丢弃或被列为扩展报头,从而降低了包处理和报头带宽的开销。虽然IPv6的地址是IPv4地址的4倍。但报头只有它的2倍大。

三、对可选项更大的支持

IPv6的可选项不放入报头,而是放在一个个独立的扩展头部。如果不指定路由器不会打开处理扩展头部.这大大改变了路由性能。IPv6放宽了对可选项长度的严格要求(IPv4的可选项总长最多为40字节),并可根据需要随时引入新选项。IPV6的很多新的特点就是由选项来提供的,如对IP层安全(IPSEC)的支持,对巨报(jumbogram)的支持以及对IP层漫游(Mobile-IP)的支持等。

四、QoS的功能

因特网不仅可以提供各种信息,缩短人们的距离.还可以进行网上娱乐。网上VOD现正被商家炒得热火朝天,而大多还只是准VOD的水平,且只能在局域网上实现,因特网上的VOD都很不理想.问题在于IPv4的报头虽然有服务类型的字段,实际上现在的路由器实现中都忽略了这一字段。

在IPv6的头部,有两个相应的优先权和流标识字段,允许把数据报指定为某一信息流的组成部分,并可对这些数据报进行流量控制。如对于实时通信即使所有分组都丢失也要保持恒速,所以优先权最高,而一个新闻分组延迟几秒钟也没什么感觉,所以其优先权较低。IPv6指定这两字段是每一IPv6节点都必须实现的。

五、身份验证和保密

在IPv6中加入了关于身份验证、数据一致性和保密性的内容。

六、安全机制IPSec是必选的

IPv4的是可选的或者是需要付费支持的。

七、加强了对移动设备的支持

IPv6在设计之初有有着支持移动设备的思想,允许移动终端在切换接入点时保留相同的IP地址。

八、支持无状态自动地址配置

IPv6无需DNS服务器也可完成地址的配置,路由广播地址前缀,各主机根据自己MAC地址和收到的地址前缀生成可聚合全球单播地址。这也方便了某一区域内的主机同时更换IP地址前缀。

 

所以,这个时候,我们的站点就是  http://192.168.0.104:9001 ,是不是可以直接访问了呢,先别着急开心,这个时候我们访问,还是不行的,因为我们还没有开放端口协议。

 

四、配置防火墙规则

这里有两个方法:

1、简单粗暴,直接把防火墙关闭,不好,危险不说,有时候我们还没有权限,必须是 Administrator。

2、配置入站规则,我使用的这个方法。

 

win7防火墙入站规则:别人电脑访问自己电脑的规则;

win7防火墙出站规则:自己电脑访问别人电脑的规则。

 

很简单,直接上动图:

 

 这个时候,我们就可以很轻松的解决文章开头提出来的问题了:不在同一个局域网的台式机和手机,如何在手机上访问站点。

 

 

 

五、结语

嗯,挺简单的,下次再见了,每个加油的小伙伴,都是最靓的崽!哈哈哈

 

posted @ 2019-06-21 17:37  老张的哲学  阅读(...)  评论(... 编辑 收藏
作者:老张的哲学
好好学习,天天向上
返回顶部小火箭
好友榜:
如果愿意,把你的博客地址放这里
jianshu.com/u/老张
SqlSugar codeisbug.com
钰玺 studenty.cn