Web前端开发技术

Appearance

helloweb ​

元信息 ​

  • 目标：架起自己的第一个 Web 站点——把 hello.html 放进 htdocs 即可被访问，由此理解 document root（URL 到磁盘路径的映射）、默认网页（DirectoryIndex）与纯文本配置文件三个机制
  • 关键概念：网站根目录（DocumentRoot）、默认网页、DirectoryIndex、httpd.conf、配置文件、404
  • 关联阶段：cp1
  • 常见误区：以为访问的是"站点"这个抽象物（访问的总是根目录下的具体文件，/ 会被导向默认网页）；改了 DocumentRoot 却不同步改 <Directory> 权限（报访问权限不足）；改完配置不重启 Apache（改动不生效）

hello web ​

在自己的电脑上架设一个简单的Web站点

配置第一个WEB站点 ​

切换至 d:\xampp\htdocs\文件夹，新建一个文件:hello.html，内容为：

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

打开浏览器，访问http://127.0.0.1/hello.html, 出现你刚才输入的“hello world!”，即第一个你的站点架设成功

你可在该目录下添加更多文件，并一一测试!

知识点：document root ​

d:\xampp\htdocs\ 是apache服务默认的网站根目录（document root）。当你访问http://127.0.0.1/hello.html时，Web服务器就会将这个网络地址转换为本地的磁盘地址，即对应的网站根目录下的对应文件,d:\xampp\htdocs\hello.html

参考阅读：Apache 文档——DocumentRoot 指令（网站根目录的完整定义）

知识点：默认网页 ​

如果你直接访问http://127.0.0.1 ，不附上任何文件名，则会看到xampp的欢迎页面(实际上是d:\xampp\htdocs\index.php的输出结果)。这是因为，Web服务器(此处为apache)有一个默认设置 1、Web服务器总是会将http://127.0.0.1 转换成 http://127.0.0.1/,这里的/即上述的文档根目录。换言之，你不可能访问一个抽象的站点，而总是访问站点上的某个具体目录。 2、同理，你也不可能访问一个抽象的目录，而总是需要访问一个具体的页面或文件。因此，如果/后面没有明确指定一个页面，Web服务器就会去该目录下寻找/index.html或/default.html或/index.php之类的文件，如果找到，则返回给浏览器显示；如果未找到，则通常会报错'404 not found'

参考阅读：Apache 文档——DirectoryIndex 指令（默认页面查找顺序的完整定义）

自定义Web站点根目录 ​

默认的网站根目录位于xampp的安装目录下，如d:\xampp\htdocs\。你也可以自定义该目录的位置：

修改apache配置文件d:\xampp\Apache\conf\httpd.conf，可将网站根目录设置为任何位置，如： d:\server\www

改动之前

apache
# 在配置文件中找到`DocumentRoot`的配置项，需要改动两行，将原来的`/xampp/htdocs`更改为新目录，如：`/server/www`
DocumentRoot  "/xampp/htdocs"
<Directory "/xampp/htdocs">

改动之后

apache
# 设置文档根目录
DocumentRoot  "/server/www"
# 为文档根目录设置权限等，务必同步更改，否则会报访问权限不足的错误
<Directory "/server/www">
# 务必重启apache

/server/www 是网络路径格式。转换为windows的磁盘路径，即/表示当前磁盘根目录，完整路径就是 d:\server\www

知识点：配置文件 ​

d:\xampp\Apache\conf\httpd.conf是一个典型的纯文本的配置文件，apache使用它来规定自身的行为或功能，用户可以修改该配置文件来控制或定制apache的行为。该配置文件的语法格式遵循 ini 类型的配置语法

  • 每一行代表一个配置项
  • 行首的 # 表示注释，供用户理解，无配置作用
  • 每一个配置项一般由两段组成，中间用空格分隔。以DocumentRoot "d:\xampp\htdocs" ，前半段为指令，后半段为值，中间由空格分隔

参考阅读：Apache 文档——配置文件（指令、值与注释的完整语法说明）

注：更改任意配置后，请务必重启apache

注意，更改网站根目录，将导致xampp内置的phpmyadmin（后续安装wordpress时需要用到）暂时无法使用，解决方式请参见后文虚拟站点。

访问自定义根目录 ​

切换至 d:\server\www文件夹，新建一个文件:index.html，内容为：

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

打开浏览器，访问http://127.0.0.1, 出现你刚才输入的内容。即表示成功

还记得前面提到过默认网页吗？