web开发基础

2025-4-5

🌐 一、Web 开发架构概览

🧭 1. BS 架构：浏览器与服务器的沟通桥梁

Browser/Server 模式：用户通过浏览器访问应用，服务器负责处理逻辑和返回数据。
相较于传统的 CS 架构，BS 架构无需安装客户端，兼容性更强、维护更便捷。

对比项 BS 架构 CS 架构
客户端 浏览器即可使用 需安装专用软件
更新方式 服务器统一更新 每台客户端手动更新
跨平台性 高兼容性（Win/macOS/Linux） 需单独适配不同系统

 

📡 2. HTTP 协议：前后端沟通的通用语言

HTTP 是 Web 通信的基础，现代 HTTP/2 支持多路复用与头部压缩，页面加载性能提升显著。

  • 请求示例： 
    GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
  • 响应示例： 
    HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8

<!DOCTYPE html><html><body>Hello World!</body></html

 

🎨 二、前端开发：打造美观易用的用户界面

🧱 1. HTML：页面的结构化骨架

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端开发入门</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <nav>
        <a href="#home">首页</a>
        <a href="#about">关于</a>
      </nav>
    </header>
    <main>
      <article>
        <h1>语义化 HTML 的优势</h1>
        <p>语义标签更易读、利于 SEO，并提升无障碍访问体验。</p>
      </article>
    </main>
    <footer>
      <p>© 2025 版权所有</p>
    </footer>
    <script src="script.js"></script>
  </body>
</html>

 

🎨 2. CSS：赋予页面视觉灵魂

选择器样例：

p { font-size: 16px; }
.title { color: #ff6b6b; }
#header { background-color: #f5f5f5; }

盒模型结构图解：

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
  margin: 10px auto;
}

现代布局方案：

  • 🔧 Flexbox（适合一维布局）： 
    .container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.item {
  flex: 1 0 200px;
}
  • 🧮 Grid（适合二维布局）： 
    .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

响应式设计：

@media (max-width: 600px) {
  .nav { display: block; }
  .sidebar { display: none; }
}

 

⚙️ 3. CSS 预处理器：编写更优雅的样式

使用 SCSS 示例：

$primary: #2c3e50;

@mixin rounded($radius) {
  border-radius: $radius;
}

.button {
  background: $primary;
  @include rounded(8px);
}

 

🧩 三、后端开发：构建高效服务端逻辑

🛠 1. 后端技术栈选择

语言 框架 优势 场景
Node.js Express/NestJS 高并发，事件驱动 聊天/实时API
Python Flask/FastAPI 语法清晰，开发快速 数据服务、AI
Java Spring Boot 企业级稳定 金融、电商
PHP Laravel CMS 支持好 内容管理
Go Gin 性能高，原生并发 微服务、区块链

 

🌉 2. Express 框架核心模块

  • 路由系统： 
    app.get('/users/:id', (req, res) => {
  res.send(`用户ID：${req.params.id}`);
});
  • 中间件机制： 
    app.use(bodyParser.json());
  • 模板引擎： 
    app.set('view engine', 'ejs');
res.render('index', { title: '欢迎页' });

 

💾 3. 数据存储与接口设计

MySQL 表设计：

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(50) NOT NULL UNIQUE,
  email VARCHAR(100) NOT NULL UNIQUE,
  password VARCHAR(64) NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

MongoDB 存储结构：

db.users.insertOne({
  username: "john_doe",
  email: "john@example.com",
  profile: { age: 28, interests: ["编程", "阅读"] },
  created_at: new Date()
});

 

🔗 4. RESTful API 设计规范

  • 常用请求方法：
方法 说明
GET 获取数据（安全）
POST 创建资源
PUT 更新资源（全量）
PATCH 局部更新
DELETE 删除资源
  • 标准响应格式： 
    {
  "data": {
    "id": 1,
    "username": "alice"
  },
  "meta": {
    "status": "success",
    "timestamp": "2025-04-20T12:00:15Z"
  }
}

 

🔐 5. 安全与性能优化

  • SQL 注入防范（使用参数绑定）
  • XSS 过滤：DOMPurify.sanitize（userInput）
  • CSRF 防护：使用令牌验证
  • 性能优化：
    • 建立索引（如 email 字段）
    • 使用 Redis 缓存
    • 异步任务队列（如 RabbitMQ/Kafka）

 

✅ 四、总结：构建一个现代 Web 项目

  • 前端：HTML + CSS + JS + 框架（React/Vue）
  • 后端：语言 + 框架 + 数据库 + API 设计
  • 其它要素：HTTPS、安全、部署、负载均衡、CDN 等

 

21 Website Development Companies to Know | Built In

版权声明：
作者：xiaochen
链接：https://xiaochen.red/81.html
文章版权归作者所有，未经允许请勿转载。
THE END
BS架构cssExpresshtmlMySQLweb