Press "Enter" to skip to content

全栈 – 10 数据库 用MAMP和WAMP搭建Web环境

Published 2021年11月18日 by admin

这是全栈数据工程师养成攻略系列教程的第十期：10 数据库 用MAMP和WAMP搭建Web环境。

现在人人都有自己的台式机或者笔记本，在我们的个人电脑上搭建一个Web环境，包括Web服务器和数据库等，对后续很多开发工作而言都是非常有用的。

Web环境

为什么需要一个Web环境呢？在数据可视化中很重要的一部分，便是基于Web网站进行一些动态交互可视化，这时候便需要一个Web环境用以部署我们的网站项目。

通常来说，一个Web环境中会包含以下几个组件：

  • Web服务器：例如Apache和Nginx，用于接收和处理Web请求；
  • 数据库：最常用的即关系型数据库MySQL，用于存储和读取数据；
  • 后端语言：例如PHP和Python等，用于开发Web项目。

在本地搭建并启动Web环境之后，我们便可以在浏览器中访问根目录中的网站项目。根目录是可配置的，可以设置成个人电脑上任意目录下的文件夹。使用后端语言开发一个Web项目，将其部署在根目录下，就可以通过浏览器访问我们的项目，进行浏览网页、数据交互等操作，就如同访问豆瓣、链家等网站一样，不同的只是这些网站部署于外网可访问的服务器上，而我们的网站只能在本机上访问。

当然，我们不用一个个单独地去安装以上提及的组件，而是像Anaconda那样，安装一个包含全部所需内容的套件即可，即XAMP。主要是MAMP和WAMP，分别对应Mac OS和Windows两大常用个人电脑操作系统，根据自己的操作系统选择相应的软件并下载安装即可。

MAMP有普通版和升级版两种，前者免费而且功能足以满足需求，WampServer下载时根据系统配置选择64bit或32bit即可。

偏好设置

搭建环境自然会涉及到不少配置项内容，或者称作软件的偏好设置，这里以MAMP为例讲解需要了解的设置。运行MAMP之后，可以看到以下软件界面，非常简单清爽，只有三个按钮，分别对应偏好设置、打开欢迎页面、开启/停止服务。

运行MAMP软件之后，会自动开启Web服务，开启成功后会在浏览器中弹出欢迎页面，相当于自动点击了第三个键和第二个键。欢迎页面如下图所示，可以查看PHP版本信息，提供了使用phpMyAdmin操作MySQL数据库的链接入口以及数据库信息，并给出了PHP、Python、Perl等语言连接并操作数据的样例代码。其中，phpMyAdmin是一款基于PHP开发的前端数据库图形化管理工具。除此之外，可以发现欢迎页面的链接是以localhost开头的，此即本地Web服务的一个别名，和movie.douban.com类似，但别人在他们的手机或电脑上则无法通过localhost访问你的本机Web环境。

需要重点介绍地是MAMP软件界面中的偏好设置这一按钮，英文显示为Preferences，点击之后可以进行以下五方面的偏好设置：开启/停止服务选项、端口配置、PHP配置、Web服务器配置、数据库配置。

  • 在开启/停止服务选项中，可以设置每次运行MAMP之后是否自动开启相关服务，以及在退出MAMP之后是否自动关闭相关服务；
  • 在端口配置中，可以对Apache、Nginx、MySQL所使用的端口进行配置。在讲解url的结构时曾简单提到过端口的概念，在同一台机器上，不同服务使用同一个域名，因此需要使用不同的端口以进行区分，例如Web服务、数据库服务、ssh服务的默认端口分别是80、3306、22。MAMP的默认端口配置是Apache和Nginx为8888、MySQL为8889，使用一些不常用的端口主要是为了避免和其他服务的冲突；
  • 在PHP配置中，可以设置PHP版本为5.x或7.x，以及是否启动缓存，PHP版本主要会影响到一些兼容性问题，例如phpMyAdmin的使用可能对PHP版本有一些要求；
  • 在Web服务器配置中，可以选择将Apache或Nginx作为所使用的Web服务器，使用默认的Apache即可。另外还可以在这里设置Web环境的根目录，例如以用户桌面为根目录，则在浏览器中访问localhost:8888即可看到桌面上的全部文件，其中8888为Apache的端口；
  • 在数据库配置中，可以看到当前所使用的MySQL版本号。

以上配置内容中，最为重要的是各项服务的端口配置，以及Web环境的根目录设置。只有理解了这两点内容，才能弄清楚应当把Web项目拷贝到哪里，以及如何在浏览器中访问到我们的项目。

Hello World

既然讲到了新的东西，那么是时候来一发Hello World了。开启Web服务之后，在根目录中新建一个hello.html，然后用Sublime进行编辑。html即Hyper Text Markup Language，超文本标记语言，使用html语言编写并且以.html为后缀名的文件，是Web网站项目中最常见的一种静态模版文件。在hello.html中输入以下代码，然后在浏览器中可以通过localhost:8888/hello.html访问到刚才所写的文件，并看到期待的Hello World。

<html>
    <header></header>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

当然，也可以通过直接双击hello.html的方式运行，同样可以在浏览器中打开并看到Hello World。但此时链接是以file开头，说明这一操作是通过文件系统完成的，而并非之前所用的Web环境。

PHP是一种非常简单的后端语言，在PHP中也可以使用html语法。在根目录中新建一个hello.php，然后用Sublime进行编辑并输入以下代码，其中第一行和第四行分别是php代码文件的头和尾，第二行用echo命令打印出来一条文本，第三行使用phpinfo()函数打印出当前所用PHP版本的一些信息，注意每行PHP代码需要用分号结束。编写完毕后，在浏览器中即可通过localhost:8888/hello.php访问到hello.php，并看到相应的打印内容。

<?php
    echo 'Hello World';
    phpinfo();
?>

以上两个例子都说明了，当Web服务开启之后，我们可以通过浏览器访问根目录中的内容，并让浏览器加载和渲染html、php等Web项目文件。

后续章节中，我们将结合实际项目进一步理解Web环境的作用。例如，当一个html文件中通过AJAX请求了同级目录中的json数据时，如果仅通过双击的方式运行html文件，AJAX请求将失败；而只有在一个Web环境中运行这一html文件，AJAX请求才能成功，数据才能被获取到并进一步展示。当然，如果Web项目中涉及到了数据库的使用，Web环境则是更加必不可少的。

视频链接：用MAMP和WAMP搭建Web环境

编辑于 2017-03-09 10:35

Published in 网站建设

发表回复