blob: 72afea5060f493e891f081141972cf26b0a751cb (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
---
title: 如何设置一个本地测试服务器？
slug: Learn/Common_questions/set_up_a_local_testing_server
tags:
- 初学者
- 服务器
translation_of: Learn/Common_questions/set_up_a_local_testing_server
---
<div class="summary">
<p>本文将会介绍如何在你的计算机上安装一个简单的本地测试服务器，以及它的基本用法。</p>
</div>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">前提:</th>
<td>你需要知道<a href="https://developer.mozilla.org/zh-CN/docs/learn/How_the_Internet_works">互联网是怎么工作的</a>，以及<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_is_a_web_server">什么是网络服务器</a>。</td>
</tr>
<tr>
<th scope="row">目标:</th>
<td>你将学习如何配置本地测试服务器。</td>
</tr>
</tbody>
</table>
<h2 id="本地文件与远程文件">本地文件与远程文件</h2>
<p>在大多数示例中，我们告诉你只需在浏览器中直接打开您的示例，有很多方法可以实现这一点，你可以通过双击 HTML 文件或将其拖拽到浏览器窗口中，或者在浏览器中选择 <code>文件 > 打开... </code> 选择 HTML 文件等。</p>
<p>如果你打开的是本地示例的话，你可以在地址栏看到这个地址是以 <code>file://</code> 开头的，接着本地硬盘上该示例文件的路径。相比之下，如果你查看的是我们在 GitHub 上托管的示例（或其他远程服务器上的示例），Web 地址会以 <code>http://</code> 或 <code>https://</code> 开头，说明该文件是通过 HTTP 传输的。</p>
<h2 id="测试本地文件存在的问题">测试本地文件存在的问题</h2>
<p>某些示例如果你将其作为本地文件打开的话，它将不会运行。 这可能是由于各种原因，最有可能是：</p>
<ul>
<li><strong>它们具有异步请求。</strong> 如果你只是从本地文件运行示例，一些浏览器（包括 Chrome）将不会运行异步请求（请参阅 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">从服务器获取数据</a>）。 这是因为安全限制（更多关于 Web 安全的信息，请参阅 <a href="https://developer.mozilla.org/zh-CN/docs/learn/Server-side/First_steps/Website_security">站点安全</a>）。</li>
<li><strong>它们具有服务端代码。</strong> 服务器端语言（如 PHP 或 Python）需要一个特殊的服务器来解释代码并提供结果。</li>
</ul>
<h2 id="运行一个简单的本地_HTTP_服务器">运行一个简单的本地 HTTP 服务器</h2>
<p><font><font>为了解决异步请求的问题，我们需要通过在本地Web服务器上运行这些示例来测试这些示例。</font><font>为我们的目的，最简单的方法之一就是使用Python的</font></font><code>SimpleHTTPServer</code><font><font>模块。</font></font></p>
<p>我们需要：</p>
<ol>
<li>
<p><font>安装Python。</font><font>如果您正在使用Linux或Mac OS X，则应该已经在您的系统上可用。</font><font>如果您是Windows用户，则可以从Python主页获取安装程序，并按照说明进行安装：</font></p>
<ul>
<li><font><font>转到</font></font><a href="https://www.python.org/"><font><font>python.org</font></font></a></li>
<li><font><font>在“下载”部分下，单击Python“3.xxx”的链接。</font></font></li>
<li><font><font>在页面的底部，选择</font></font><em><font><font>Windows x86可执行文件安装程序</font></font></em><font><font>并下载它。</font></font></li>
<li><font><font>当它已经下载，运行它。</font></font></li>
<li><font><font>在第一个安装程序页面上，确保选中了“将Python 3.xxx添加到PATH”复选框。</font></font></li>
<li><font><font>单击</font></font><em><font><font>安装</font></font></em><font><font>，然后</font><font>在安装完成</font><font>后单击</font></font><em><font><font>关闭</font></font></em><font><font>。</font></font></li>
</ul>
</li>
<li>
<p><font>打开你的命令提示符（Windows）/终端（OS X / Linux）。</font><font>要检查Python是否安装，请输入以下命令：</font></p>
<pre class="brush: bash">python -V</pre>
</li>
<li>
<p><font><font>下面应该给出你安装的版本号</font><font>，使用</font></font><code>cd</code><font><font>命令</font><font>导航到您的示例所在的目录</font><font>。</font></font></p>
<pre class="brush: bash"># 输入你想要进入的目录，举例
cd Desktop
# 用两个点来表示进入上一层级的目录
cd ..</pre>
</li>
<li>
<p>输入命令在该目录中启动服务器：</p>
<pre><font><font>＃如果上面返回的Python版本是3.X </font></font><font><font>
python -m http.server </font></font><font><font>
＃如果上面返回的Python版本是2.X </font></font><font><font>
python -m </font></font><code>SimpleHTTPServer</code></pre>
</li>
<li>
<p><font><font>默认情况下，这将在本地Web服务器上的端口8000上运行目录的内容。您可以通过转到</font></font><code>localhost:8000</code><font><font>Web浏览器中</font><font>的URL来访问此服务器</font><font>。</font><font>在这里你会看到列出的目录的内容 - 点击你想运行的HTML文件。</font></font></p>
</li>
</ol>
<div class="note">
<p><strong><font><font>注意</font></font></strong><font><font>：如果您已经在端口8000上运行了某些东西，则可以通过运行server命令，然后选择另一个端口号（例如</font></font><code>python -m http.server 7800</code><font><font> （Python 3.x）或</font></font><code>python -m SimpleHTTPServer 7800</code><font><font> （Python 2.x））</font><font>来选择另一个端口</font><font>。</font><font>然后您可以访问您的内容</font></font><code>localhost:7800</code><font><font>。</font></font></p>
</div>
<h2 id="在本地运行服务器端语言"><font><font>在本地运行服务器端语言</font></font></h2>
<p><font><font>Python的</font></font><code>SimpleHTTPServer</code><font><font>模块是有用的，但它不知道如何运行用PHP或Python等语言编写的代码。</font><font>为了处理这个问题，你需要更多的东西 - 正是你需要的东西取决于你正在运行的服务器端语言。</font><font>这里有几个例子：</font></font></p>
<ul>
<li><font><font>要运行Python服务器端代码，您需要使用 Python 网络框架。</font><font>您可以通过阅读</font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django"><font><font>Django Web Framework（Python）</font></font></a><font><font>来了解如何使用Django框架</font><font>。</font></font><a href="http://flask.pocoo.org/">Flask</a><font><font>也是一个不错的选择（稍微轻量一点）。</font><font>要运行Flask，你需要先</font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3"><font><font>安装Python / PIP</font></font></a><font><font>，然后使用</font></font><code>pip3 install flask </code>来安装Flask<font><font>。</font><font>此时，您应该能够运行Python Flask示例</font></font><code>python3 python-example.py</code><font><font>，然后在</font></font><font><font>您的浏览器中打开 <code>localhost:5000</code> 查看。</font></font></li>
<li><font><font>要运行Node.js（JavaScript）服务器端代码，您可以直接使用Node或选择构建于其上的框架。</font><font>Express是一个不错的选择 - 请参阅</font></font><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/Express_Nodejs"><font><font>Express Web Framework（Node.js / JavaScript）</font></font></a><font><font>。</font></font></li>
<li><font><font>要运行PHP服务器端代码，您需要一个可以解释PHP的服务器设置。</font><font>本地PHP测试的好选择是</font></font><a href="https://www.mamp.info/en/downloads/"><font><font>MAMP</font></font></a><font><font>（Mac和Windows）， </font></font><a href="http://ampps.com/download"><font><font>AMPPS</font></font></a><font><font>（Mac，Windows，Linux）和</font></font><a href="https://www.linux.com/learn/easy-lamp-server-installation"><font><font>LAMP</font></font></a><font><font>（Linux，Apache，MySQL和PHP / Python / Perl）。</font><font>这些是完整的包，创建本地设置，允许您运行Apache服务器，PHP和MySQL数据库。</font></font></li>
</ul>
|
