Web前置知识

Mon, 01 Jan 0001 00:00:00 +0000

一、Web必备四大件

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

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

1
2

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

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

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

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

3.JavaScript（JS）

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

alert("你好！")

4.HTTP/HTTPS

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

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

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

用户浏览器
    ↓
输入 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`

网站根目录
├── 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`	`403 Forbidden`

控制因素：

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

完整解析流程

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

总结

1
2

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

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

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

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

1.站库分离

传统架构：

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

站库分离：

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

        ↓ 网络连接 ↓

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

2.数据存储

电商平台：

数据库：

MySQL

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


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


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

网站源码：

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

3.用户访问流程

用户打开：

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

流程：

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

4.为什么要站库分离

1.提高性能

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

分开:性能更稳定

1
2
3

web服务器：专门处理请求

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

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

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

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

网站访问量增加：

增加Web服务器：

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

4.方便维护

可以单独：

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

不会影响网站代码。

5. 常见站库分离技术

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

总结

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

五、中间件配置影响

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

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

用户请求
   ↓
中间件（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`

可以配置：

Nginx
 ↓
Tomcat
 ↓
UserController

也可以：

Nginx
 ↓
PHP-FPM
 ↓
login.php

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

3.代理配置影响架构

反向代理：

用户
 ↓
Nginx
 ↓
应用服务器

配置：

`1`	`proxy_pass http://app_server;`

影响：

1
2
3

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

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

例如：

访问：

`1`	`test.php`

如果配置：

`1`	`Nginx + PHP-FPM`

流程：

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

如果没有PHP解析配置：

可能变成：

下载源码文件

或者：

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

例如：

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

影响：

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

例如：

配置：

`1`	`localhost:8080/shop`

对应：

shop项目

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

例如：

使用数据库连接池：

程序
 ↓
连接池
 ↓
MySQL

配置：

1
2
3

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

影响：

1
2
3

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

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

例如 Redis：

没有缓存：

用户请求
 ↓
程序
 ↓
数据库

有缓存：

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

影响：

1
2
3

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

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

例如：

WAF、防火墙：

用户
 ↓
WAF
 ↓
Nginx
 ↓
网站

配置影响：

1
2
3

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

总结关系

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

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

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

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

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

一、准备基础资源

域名

例如：

`1`	`www.example.com`

作用：

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

DNS记录：

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

访问链路：

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

三、安装Web中间件

常见：

静态网站

安装：

Nginx

结构：

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

访问：

`1`	`www.example.com`

`1`	`index.html`

动态网站

例如：

Java：

Nginx
 ↓
Tomcat
 ↓
Java程序
 ↓
MySQL

PHP：

Nginx
 ↓
PHP-FPM
 ↓
PHP代码
 ↓
MySQL

Node：

Nginx
 ↓
Node.js
 ↓
数据库

四、部署网站源码

源码上传：

例如：

/var/www/

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

五、配置URL和源码映射

例如：