一、Web必备四大件

1.HTML（HyperText Markup Language，超文本标记语言）

作用：负责网页的结构
就像房子的“骨架”，定义网页有哪些内容。
例如：标题、段落、图片、按钮、表格、表单等。
示例：

1
2


  <h1>欢迎来到我的网站</h1>
  <p>这是网页内容</p>

2.CSS（Cascading Style Sheets，层叠样式表）

作用：负责网页的样式和外观
就像房子的“装修”，控制颜色、大小、布局、动画等。
例如：字体颜色、背景、页面排版、响应式设计。
示例：

1
2
3
4


  h1 {
    color: blue;
    font-size: 30px;
  }

3.JavaScript（JS）

作用：负责网页的交互和动态效果
就像房子的“电路和智能系统”，让网页能够响应用户操作。
例如：
- 点击按钮弹窗
- 表单验证
- 数据动态加载
- 页面实时更新
示例：
1

alert("你好！")

4.HTTP/HTTPS

作用：负责浏览器和服务器之间的数据传输
就像“物流系统”，把网页文件和数据从服务器传送给用户。
例如：
- 浏览器请求网页
- 服务器返回HTML、CSS、JS、图片等资源
- HTTPS负责加密传输，提高安全性

二、源码和URL访问对应关系

用户输入 URL → 服务器找到对应程序/文件 → 返回网页内容 → 浏览器展示页面。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


用户浏览器
    ↓
输入 URL
    ↓
DNS解析域名
    ↓
Web服务器（Nginx/Apache等）
    ↓
根据URL规则找到对应源码
    ↓
执行代码或读取文件
    ↓
返回HTML/CSS/JS/数据
    ↓
浏览器渲染页面

三、文件访问解析有什么决定

文件访问一个解析主要由服务器配置、文件类型、请求URL、程序路由规则等因素决定。

简单理解：

1

当用户访问一个地址时，服务器根据规则判断：这个请求应该读取那个文件还是交给那个程序处理

主要有以下及部分决定：

1.Web服务器配置决定（第一层）

常见服务器：

1

Nginx、Apache、IIS

它负责接收URL请求，并决定如何处理。

比如：

用户访问：https://xxx.com/index.html

Nginx配置：

1
2
3


server{
	root /var/www/html
}

服务器会寻找：

1

/var/www/html/index.html

对应关系：

1

URL路径--->服务器根目录--->实际文件

2.URL路径决定访问位置

比如：

URL：

1

https://abc.com/images/logo.png

服务器解析：

1

/images/logo.png--->网站目录/images/logo.png

1
2
3
4
5
6


网站根目录
├── index.html
├── images
│    └── logo.png
└── css
     └── style.css

访问结果：

1

返回logo.png

3.文件拓展名决定解析方式

不同文件有不同程序处理：

文件	处理方式
.html	直接返回网页
.css	返回样式文件
.js	返回脚本文件
.jpg/.png	返回图片
.php	PHP解释器执行
.jsp	Java服务器执行
.py	Python程序执行

比如：

访问：abc.com/test.php

1

PHP解释器--—>执行代码--->生成HTML--->返回浏览器

4.路由规则决定动态解析

现代网站很多URL不是文件：

比如：

1

https://shop.com./product/1001

服务器可能没有：

1

product/1001.html

而是：

1

路由--->ProdutController--->查询数据库--->生成页面

比如：

Laravel：

1
2
3


/product/{id}
        ↓
ProductController@index

Spring：

1
2


@GetMapping("/product/{id}")
public Product getProduct()

5.默认首页规则决定入口文件

访问：

1

https://abc.com/

服务器不知道显示哪个文件。

通过配置：

1
2
3


index.html
index.php
default.html

决定

比如：

Nginx：

1

index index.html index.php;

优先：

1

index.html

不存在则：

1

index.php

6.MIME类型决定浏览器如何展示

服务器返回：

1

Content-Type

告诉浏览器：

HTML：

1

text/html

图片：

1

image/png

CSS:

1

text/css

JS:

1

application/javascript

浏览器根据这个决定如何显示。

7.权限决定能否访问

比如：

文件：

1

/admin/config.php

可能存在，但：

1

权限禁止

1

403 Forbidden

控制因素：

1
2
3
4


文件权限
服务器配置
登录状态
用户权限

完整解析流程

1

输入URL--->DNS找到服务器--->Web服务器接收请求--->检查URL路径--->判断静态文件还是动态路由--->读取文件/执行程序--->返回 HTTP响应--->浏览器解析展示

总结

1
2


文件访问解析由“Web服务配置+URL路径+文件类型+路由规则+权限控制”共同决定。
静态网站主要是URL映射文件，动态路由主要是URL映射程序。

四、数据库存储数据站库分离

数据库存储数据和站库分离是网站架构中的一种设计方式，核心思想是：

1

网站服务器负责处理页面和业务逻辑，数据库服务器专门负责存储和管理数据，两者分开部署。

1.站库分离

传统架构：

1
2
3
4


一台服务器
├── 网站程序
├── Web服务(Nginx/Apache)
└── 数据库(MySQL)

站库分离：

1
2
3
4
5
6
7
8
9


网站服务器                  数据库服务器
------------                ------------
Nginx                       MySQL
PHP/Java/Node               数据表
网站源码                     用户数据
业务逻辑                     商品数据
                            订单数据

        ↓ 网络连接 ↓

网站通过数据库连接访问数据

2.数据存储

电商平台：

数据库：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


MySQL

用户表(user)
----------------
id
username
password
phone


商品表(product)
----------------
id
name
price


订单表(order)
----------------
id
user_id
product_id
amount

网站源码：

1
2
3
4
5
6
7
8
9


商城程序
|
| SQL查询
↓
数据库
|
| 返回数据
↓
生成网页

3.用户访问流程

用户打开：

1

https://shop.com/product/1001

流程：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


用户浏览器
      ↓
网站服务器
      ↓
业务程序
      ↓
请求数据库
      ↓
MySQL查询商品数据
      ↓
返回数据
      ↓
生成商品页面
      ↓
显示给用户

4.为什么要站库分离

1.提高性能

1

网站和数据库使用同一台机器容易形成竞争资源

分开:性能更稳定

1
2
3


web服务器：专门处理请求

数据库服务器：专门处理查询

2.提高安全性：数据库不直接暴露公网，攻击者即使访问网站，也难直接访问数据库。

1
2
3
4
5


公网用户
    ↓
网站服务器
    ↓
内网数据库

3.方便拓展：多个网站服务器共享一个数据库。

网站访问量增加：

增加Web服务器：

1
2
3
4
5
6
7
8


          负载均衡
             |
   ------------------
   |        |        |
 Web1     Web2     Web3
             |
             ↓
          数据库

4.方便维护

可以单独：

升级数据库
备份数据
优化查询
更换数据库服务器

不会影响网站代码。

5. 常见站库分离技术

部分	常用技术
Web服务器	Nginx、Apache
后端程序	Java、PHP、Python、Node.js
数据库	MySQL、PostgreSQL、MongoDB
缓存	Redis、Memcached
负载均衡	Nginx、LVS
容器	Docker、Kubernetes

总结

1

站库分离就是把“网站程序”和“数据库数据”放到不同服务器，通过网络连接通信。它能提高性能、安全性、扩展能力。

五、中间件配置影响

中间件处于“用户请求”和“业务代码/数据库”之间，负责转发、解析、控制和管理。

在网站架构中，中间件配置会直接影响后续的开发方式、访问方式、部署方式和运维手法。

1
2
3
4
5
6
7


用户请求
   ↓
中间件（Nginx/Apache/Tomcat/Redis等）
   ↓
业务程序
   ↓
数据库

中间件配置不同，后面的处理方式也会不同。

1.Web服务器配置影响访问方式

例如 Nginx：

配置静态文件

1
2
3


location /static/ {
    root /data/web;
}

访问：

1

https://abc.com/static/a.jpg

对应：

1

/data/web/static/a.jpg

影响：

文件存放位置

URL设计

前端资源加载方式

2.路由配置影响源码结构

例如：

1

/user/login

可以配置：

1
2
3
4
5


Nginx
 ↓
Tomcat
 ↓
UserController

也可以：

1
2
3
4
5


Nginx
 ↓
PHP-FPM
 ↓
login.php

同一个URL，不同中间件配置，会对应不同代码处理方式。

3.代理配置影响架构

反向代理：

1
2
3
4
5


用户
 ↓
Nginx
 ↓
应用服务器

配置：

1

proxy_pass http://app_server;

影响：

1
2
3


后端服务器隐藏
可以多服务器负载均衡
可以做缓存和安全控制

4.PHP解析配置影响文件执行

例如：

访问：

1

test.php

如果配置：

1

Nginx + PHP-FPM

流程：

1
2
3
4
5
6
7


test.php
 ↓
PHP解释器
 ↓
生成HTML
 ↓
返回浏览器

如果没有PHP解析配置：

可能变成：

1

下载源码文件

或者：

1

404

5.Tomcat配置影响Java项目运行

例如：

1
2
3
4
5
6
7


Tomcat
 |
 ├── webapps
 │     └── app
 │          └── WEB-INF
 │
 └── server.xml

影响：

1
2
3
4


项目访问路径
端口
Session管理
应用部署方式

例如：

配置：

1

localhost:8080/shop

对应：

1

shop项目

6. 数据库中间件影响数据访问

例如：

使用数据库连接池：

1
2
3
4
5


程序
 ↓
连接池
 ↓
MySQL

配置：

1
2
3


最大连接数
超时时间
连接复用

影响：

1
2
3


系统并发能力
数据库压力
稳定性

7. 缓存中间件影响业务逻辑

例如 Redis：

没有缓存：

1
2
3
4
5


用户请求
 ↓
程序
 ↓
数据库

有缓存：

1
2
3
4
5


用户请求
 ↓
Redis
 ↓
数据库（缓存不存在时）

影响：

1
2
3


数据读取方式
数据更新策略
高并发处理方式

8. 安全中间件影响访问控制

例如：

WAF、防火墙：

1
2
3
4
5
6
7


用户
 ↓
WAF
 ↓
Nginx
 ↓
网站

配置影响：

1
2
3


哪些请求允许访问
哪些参数被拦截
登录验证策略

总结关系

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


中间件配置
      ↓
请求解析方式
      ↓
URL与源码映射
      ↓
业务代码执行方式
      ↓
数据库访问方式
      ↓
系统性能、安全、扩展能力

1

中间件是网站运行链路中的“规则控制层”，它决定请求如何进入系统、交给谁处理、如何返回结果，因此会影响后续所有开发和运维手法。

六、常规真实Web搭建解析流程

一个真实 Web 网站从搭建到用户访问，通常经历以下完整流程：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


域名
 ↓
DNS解析
 ↓
服务器部署
 ↓
Web中间件配置
 ↓
网站源码部署
 ↓
数据库连接
 ↓
业务运行
 ↓
用户访问解析

一、准备基础资源

域名

例如：

1

www.example.com

作用：

用户访问入口
绑定服务器IP

DNS记录：

1
2
3
4


www.example.com
        |
        ↓
123.45.67.89

服务器

常见：

云服务器（阿里云、腾讯云、AWS）
VPS
物理服务器

系统：

1
2


Linux
Windows Server

例如：

1
2
3


服务器
IP:
123.45.67.89

二、部署网络环境

开放端口

常见：

端口	用途
80	HTTP
443	HTTPS
22	SSH管理
3306	MySQL

例如：

用户访问：

1

http://example.com

实际：

1

example.com:80

配置域名解析

DNS：

1
2
3


www.example.com
        ↓
123.45.67.89

访问链路：

1
2
3
4
5


浏览器
 ↓
DNS服务器
 ↓
找到网站服务器

三、安装Web中间件

常见：

静态网站

安装：

1

Nginx

结构：

1
2
3
4
5
6
7


Nginx
 |
 └── html目录
       |
       ├── index.html
       ├── css
       └── js

访问：

1

www.example.com

1

index.html

动态网站

例如：

Java：

1
2
3
4
5
6
7


Nginx
 ↓
Tomcat
 ↓
Java程序
 ↓
MySQL

PHP：

1
2
3
4
5
6
7


Nginx
 ↓
PHP-FPM
 ↓
PHP代码
 ↓
MySQL

Node：

1
2
3
4
5


Nginx
 ↓
Node.js
 ↓
数据库

四、部署网站源码

源码上传：

例如：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


/var/www/

├── frontend
│    ├── index.html
│    ├── css
│    └── js
│
└── backend
     ├── controller
     ├── service
     └── config

五、配置URL和源码映射

例如：

用户访问：

1

https://example.com/user

Nginx：

1
2
3
4
5


/user
 ↓
后端服务
 ↓
UserController

代码：

1
2
3
4
5
6
7


Route
 ↓
Controller
 ↓
Service
 ↓
Database

六、配置数据库

数据库服务器：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


MySQL

database:
shop

tables:

user
product
order

网站配置：

例如：

1
2
3
4
5
6
7
8


数据库地址:
192.168.1.20

账号:
app_user

密码:
123456

程序连接：

1
2
3
4


网站程序
    |
    ↓
MySQL

七、访问解析流程

用户打开：

1

https://shop.com/product?id=100

全过程：

 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


① 浏览器请求
        |
        ↓
② DNS查询
        |
        ↓
③ 找到服务器IP
        |
        ↓
④ Nginx接收请求
        |
        ↓
⑤ 判断URL规则
        |
        ↓
⑥ 转发给应用服务器
        |
        ↓
⑦ Controller处理
        |
        ↓
⑧ 查询数据库
        |
        ↓
⑨ 返回JSON/HTML
        |
        ↓
⑩ 浏览器渲染页面

八、生产环境常见架构

小网站：

1
2
3
4
5
6
7


用户
 |
Nginx
 |
网站程序
 |
MySQL

中型网站：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


          用户
           |
       负载均衡
           |
 ----------------
 |              |
Web服务器1   Web服务器2
 |              |
 ----------------
           |
       数据库

大型网站：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


用户
 |
CDN
 |
WAF安全防护
 |
负载均衡
 |
应用集群
 |
缓存Redis
 |
数据库集群
 |
备份系统

九、最终对应关系

用户看到	后端实际
URL	路由规则
页面	HTML模板/前端代码
图片	文件存储
登录	用户表查询
商品列表	数据库查询
下单	业务代码+数据库写入
支付	第三方接口

总结：

1

真实Web搭建就是：域名负责找到服务器，Nginx等中间件负责解析请求，源码负责业务逻辑，数据库负责保存数据，最终通过HTTP/HTTPS把结果返回给浏览器.

一个完整网站本质上就是： 域名 + DNS + 服务器 + 中间件 + 源码 + 数据库 + 安全配置 + 运维体系。