Web开发基础

少于1分钟

Web通信是Web应用的核心，主要涉及客户端（通常是浏览器）与服务器之间的交互。其核心概念和框架如下：

定义：HTTP（HyperText Transfer Protocol，超文本传输协议）是Web通信的基础协议，用于定义客户端和服务器之间请求和响应的格式。
请求（HTTP Request）：
- 请求方法：常用的有GET（获取资源）、POST（提交数据）、PUT（更新资源）、DELETE（删除资源）。
- 参数传递：可以通过路径（如/info/aaa）、查询字符串（如?username=aaa）或请求体（如JSON格式）传递数据。
- 身份验证：通过Cookies等方式实现用户身份验证，但也存在安全性问题（如第三方Cookies）。
响应（HTTP Response）：
- 状态码：用于表示请求的结果，如200（成功）、400（请求错误）、403（禁止访问）、404（未找到）、500（服务器错误）。
- 正文：响应中可以携带文件或数据，如HTML页面、图片等。
HTTPS：HTTP的加密版本，通过SSL/TLS协议实现数据加密传输，解决HTTP的不安全问题（如信息明文传输、无法验证身份等）。

以网上选课系统为例：

Web页面是用户通过浏览器访问的内容，由HTML、CSS和JavaScript组成，统称为“前端三件套”。

定义：HTML是用于描述网页内容的标记语言，通过标签定义网页的结构和内容。
常用标签：
- 文本标签：<h1>-<h6>（标题）、<p>（段落）、<ul>（无序列表）、<ol>（有序列表）、<li>（列表项）。
- 图像和链接：<img>（插入图片）、<a>（超链接）。
- 容器标签：<div>（分区容器）、<span>（文本片段）。
- 其他：<header>（页眉）、<style>（内部样式表）。
属性：HTML标签可以有属性，如class（类名）、id（唯一标识符）、style（样式）、src（外部资源链接）。

定义：CSS用于美化网页，定义HTML元素的样式。
使用方式：
- 内联样式：通过style属性直接在HTML标签中定义样式。
- 内部样式表：在<head>中使用<style>标签定义样式。
- 外部样式表：将样式定义在单独的.css文件中，通过<link>标签引入。
层叠性（Cascading）：当多个样式定义冲突时，优先级顺序为：内联样式 > 内部样式表 > 外部样式表。

定义：JavaScript是一种脚本语言，用于实现网页的动态交互。
功能：
- 操纵HTML元素（如修改样式、内容）。
- 响应用户事件（如点击按钮）。
- 与服务器交互（如通过AJAX动态加载数据）。
使用方式：
- 嵌入HTML：通过<script>标签直接写在HTML文件中。
- 外部脚本：将JavaScript代码写在单独的.js文件中，通过<script src="...">引入。

Web应用是基于Web技术构建的应用程序，分为静态网页和动态网页，采用前后端分离的开发模式。

定义：内容根据用户请求动态生成的网页。
特点：
- 服务器端需要处理逻辑（如从数据库读取数据）。
- 内容根据用户需求动态变化（如用户信息、搜索结果）。
实现方式：
- 服务器端使用模板文件，根据请求内容填充数据后返回。
- 常用技术栈：PHP、Node.js、Python（Django/Flask）等。

定义：将前端（用户界面）和后端（服务器逻辑）分离，各自独立开发。
优势：
- 开发效率：前端和后端可以并行开发。
- 用户体验：前端可以快速响应用户操作，后端专注于数据处理。
- 可维护性：代码结构清晰，便于维护和扩展。
实现方式：
- 前端通过API（应用程序接口）与后端通信。
- 前端框架（如React、Vue.js）负责页面渲染，后端框架（如Spring Boot、Express.js）提供数据服务。
安全问题：前端代码可能被篡改，导致向后端发送恶意请求。

定义：Web应用需要存储数据，以便在用户请求时提供。
存储方式：
- 服务器端存储：使用数据库（如MySQL、MongoDB）保存用户数据、历史记录等。
- 客户端存储：使用Cookies、LocalStorage等技术保存用户偏好、登录状态等。