个性化阅读
专注于IT技术分析

如何从同一局域网(LAN)中的计算机或移动设备访问XAMPP的htdocs目录

本文概述

在进行一些需要在移动设备上进行测试的项目(而不是像我需要的相机那样进行仿真)时, 许多开发人员遇到了一个常见问题。”我们无法”轻松地从其他设备访问本地站点, 例如在移动设备上, 甚至在你需要向同事展示页面时。我引用了我们不能这样做的原因, 因为实际上可以在xampp中执行此操作, 但是并不是每个人都知道如何执行此操作。

在这篇简短的文章中, 我们将向你说明如何从同一局域网中的另一台设备访问xampp实例的htdocs目录。

要求

  • XAMPP需要已经安装(不需要将Apache和MySQL服务作为服务安装)。
  • 另一台检查其是否正常工作的设备(我们将使用连接到同一Wi-Fi网络的移动设备)。

1.在防火墙上允许Apache和MySQL的入站连接

第一步, 考虑到你已经在自己的计算机(主机)上安装了XAMPP并且功能正常, 你将需要允许与计算机防火墙上的Apache(HTTPD)和MySQL(MYSQLD)规则的入站连接。在Windows中, 你可以轻松地访问防火墙设置并搜索”高级设置”菜单。在具有高级安全性的Windows Defender防火墙上, 你应该能够找到Apache HTTP Server和mysqld规则。分别选择每个选项, 右键单击它们, 然后选择属性:

防火墙规则Apache Xampp Windows

在此菜单中, 默认部分常规将出现, 你将找到操作子组, 在此区域中选择允许连接选项:

允许连接Xampp入站规则

并应用更改。在两个进程(Apache HTTP Server和mysqld)都执行完此操作之后, 这些进程现在应该带有一个绿色选中图标, 例如对于Apache:

Apache防火墙Windows Xampp

并使用MySQL:

MySQL(mysqld)防火墙Windows Xampp

允许入站连接后, 你现在应该准备从其他设备进行测试。

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服务:

Xampp控制面板

3.检查主机公共IP并从其他设备进行测试

最后一步, 我们需要知道我们自己的私有IPv4地址, 以便我们可以从其他设备访问它, 你可以在命令提示符下使用ipconfig轻松获取它:

ipconfig

这将生成类似于以下内容的输出:

IPCONFIG视窗

使用此IPv4地址从连接到局域网的其他设备访问htdocs目录。例如, 我们应该能够看到在上一步中创建的带有以下URL http://youripv4address/mywebpage.html的测试页, 并且可以在移动设备中看到以下输出:

预览网页Xampp

编码愉快!

赞(0)
未经允许不得转载:srcmini » 如何从同一局域网(LAN)中的计算机或移动设备访问XAMPP的htdocs目录

评论 抢沙发

评论前必须登录!