本文概述
在进行一些需要在移动设备上进行测试的项目(而不是像我需要的相机那样进行仿真)时, 许多开发人员遇到了一个常见问题。”我们无法”轻松地从其他设备访问本地站点, 例如在移动设备上, 甚至在你需要向同事展示页面时。我引用了我们不能这样做的原因, 因为实际上可以在xampp中执行此操作, 但是并不是每个人都知道如何执行此操作。
在这篇简短的文章中, 我们将向你说明如何从同一局域网中的另一台设备访问xampp实例的htdocs目录。
要求
- XAMPP需要已经安装(不需要将Apache和MySQL服务作为服务安装)。
- 另一台检查其是否正常工作的设备(我们将使用连接到同一Wi-Fi网络的移动设备)。
1.在防火墙上允许Apache和MySQL的入站连接
第一步, 考虑到你已经在自己的计算机(主机)上安装了XAMPP并且功能正常, 你将需要允许与计算机防火墙上的Apache(HTTPD)和MySQL(MYSQLD)规则的入站连接。在Windows中, 你可以轻松地访问防火墙设置并搜索”高级设置”菜单。在具有高级安全性的Windows Defender防火墙上, 你应该能够找到Apache HTTP Server和mysqld规则。分别选择每个选项, 右键单击它们, 然后选择属性:
在此菜单中, 默认部分常规将出现, 你将找到操作子组, 在此区域中选择允许连接选项:
并应用更改。在两个进程(Apache HTTP Server和mysqld)都执行完此操作之后, 这些进程现在应该带有一个绿色选中图标, 例如对于Apache:
并使用MySQL:
允许入站连接后, 你现在应该准备从其他设备进行测试。
2.在htdocs的根目录内创建测试页
为了进行测试, 我们将在xampp(C:\ xampp \ htdocs)中htdocs的根目录中创建一个示例页面, 即mywebpage.html, 其中包含以下内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World</title>
</head>
<body>
<h2>You are viewing this HTML file from a device via LAN</h2>
</body>
</html>
考虑到HTDOCS目录的内容如下, 我们应该能够看到此页面:
htdocs/
├── cordova
├── mywebpage.html
├── projects
└── sandbox
内容无关紧要, 如果你不了解所有内容, 这将有助于你进行自我指导。现在确保在XAMPP控制面板中运行apache和MySQL服务:
3.检查主机公共IP并从其他设备进行测试
最后一步, 我们需要知道我们自己的私有IPv4地址, 以便我们可以从其他设备访问它, 你可以在命令提示符下使用ipconfig轻松获取它:
ipconfig
这将生成类似于以下内容的输出:
使用此IPv4地址从连接到局域网的其他设备访问htdocs目录。例如, 我们应该能够看到在上一步中创建的带有以下URL http://youripv4address/mywebpage.html的测试页, 并且可以在移动设备中看到以下输出:
编码愉快!
评论前必须登录!
注册