从零开始手把手带你搭建全栈项目

从零开始搭建全栈项目：手把手新手教程（前后端分离实战）

首先介绍一下本项目。它名为 Users Chat AI，是一款典型的前后端分离小型全栈应用。以下是它的目录结构，供您参考：

ai 全栈/├── backend/← 后端代码（Node.js + json-server）├── frontend/ ← 前端代码（HTML + CSS + JS）└── db.json ← 用 JSON 文件充当数据库

核心理念十分清晰：后端仅负责提供数据接口，前端专注于页面展示与用户交互，二者通过 HTTP 请求进行通信。这正是当今大多数互联网公司的标准协作模式。

模块化编程：写代码的首要原则

在实际编码之前，请牢记以下三条规则——它们将助你未来避免大量困扰：

这样做的优势显而易见：代码维护更便捷，三个月后回顾依然清晰；可读性高，他人接手项目无需从头猜测；简单可靠，小型、单一的功能模块不易出现错误。

JavaScript：一门语言打通全栈

你或许认为 JavaScript 仅能用于网页开发，但实际上它可运行于多种环境：前端（浏览器中操作 DOM）、后端（通过 Node.js 编写服务端）、AI 应用开发，乃至嵌入式设备。本项目前后端均使用 JavaScript（Node.js），对新手而言最大优势在于：只需掌握一门语言即可实现全栈开发。

后端开发：通过 RESTful API 暴露数据

4.1 API 是什么？

API（应用程序编程接口）简单来说就是后端向前端提供的一组数据接口。例如前端请求“获取用户列表”，后端则返回对应的 JSON 数据。

4.2 什么是 RESTful？

RESTful 是设计 API 的一种规范，核心原则可概括为两点：

① URL 用于定位资源（使用名词），避免使用动词

✅ 好的设计：❌ 不好的设计：GET/users 用户列表 GET/getAllUsersGET/users/5 第 5 个用户 POST /deleteUser?id=5POST /users 新增用户DELETE /users/5 删除第 5 个用户

② 通过 HTTP 方法表达具体操作

这就是 CRUD（增删改查）——所有业务系统中最基础的四种操作。RESTful 被誉为“Web 开发的基石”，阿里巴巴的 Java 开发规范也强烈推荐这一实践。

4.3 后端初始化（动手实操）

打开终端，切换到 backend 目录，运行以下命令：

# 第一步：初始化项目，会生成 package.jsonnpm init -y# 第二步：安装 json-servernpm i json-server

关于这些名词的简要说明：

• npm（Node Package Management）是 Node.js 的包管理器，类似于“应用商店”，通过一条命令即可安装他人编写好的工具。
• package.json 是项目的身份标识，包含项目名称、版本号以及所依赖的包信息。
• json-server 是一个极为强大的工具，可将一个 JSON 文件即时转换为一套完整的 RESTful API。例如编写一个 db.json 文件：

{"users": [{ "id": 1, "name": "张三", "age": 25 },{ "id": 2, "name": "李四", "age": 30 }],"posts": [{ "id": 1, "title": "我的第一篇文章", "userId": 1 }]}

启动 json-server 后，系统会自动生成以下接口：

GEThttp://localhost:3000/users→ 获取用户列表GEThttp://localhost:3000/users/1→ 获取第 1 个用户POST http://localhost:3000/users→ 新增一个用户PUThttp://localhost:3000/users/1→ 修改第 1 个用户DELETE http://localhost:3000/users/1→ 删除第 1 个用户

无需编写任何后端代码，仅凭一个 JSON 文件即可搭建完整的后端服务！

数据存储方式

程序中的数据存储主要分为以下两类：

本项目采用 JSON 文件实现持久化存储——对于学习和小型项目而言已足够，并且 json-server 原生支持此方式。

前端开发：网页三剑客与模块化

前端开发的三大核心技术各司其职：

6.1 HTML 核心概念

盒子模型（Box Model）

每个 HTML 元素本质上都是一个“盒子”。块级元素可设置宽度和高度，在 PC 端开发中，通常采用固定宽度的容器（container）包裹内容，并左右留白实现居中布局。

语义化标签（重点强调）

<div class="header">...div><div class="na v">...div><div class="main">...div><div class="footer">...div><header>...header><na v>...na v><main>...main><footer>...footer>

为何要使用语义化标签？首先，可读性强、易于维护——一个月后回顾代码，能一眼识别各部分功能。其次，对 SEO 友好——百度、Google 等搜索引擎的爬虫能更准确地理解页面结构，从而获得更高排名。

DOM：浏览器如何解析 HTML

当浏览器加载 HTML 文件时，其内部的 C++ HTML 解析器会将其解析为树状结构，即 DOM（文档对象模型）。

document（根节点）└── html └── body（可视区的起点）├── header├── div.container│├── na v│└── main└── footer

关键点在于：浏览器在内存中创建了一个全局 document 对象，通过 JavaScript 操作该对象即可动态更新页面内容，这便是 DOM 编程的精髓。

DOM 查询性能对比

document.querySelector('#userName')// 最快：通过 id 查，唯一索引document.querySelector('.table') // 还行：通过 class 查document.querySelector('div')// 最慢：通过标签名查，范围太大

Bonus：利用 AI 辅助编程

本课程始终贯穿着一个理念——将 AI 作为你的编程助手。关键在于编写 prompt 时需明确约束条件：

❌ 模糊的 prompt： "帮我写个接口"✅ 好的 prompt： "请你帮我设计 users 用户数据接口，遵守 RESTful 机制，同时遵循模块化原则" "请帮我编写首页，使用 Bootstrap CSS 框架，使用语义化标签"

编写 prompt 的要点：明确任务目标 + 指定约束条件 + 注明所用技术栈。

总结与回顾

本文涵盖了全栈开发最基础的核心知识点：

1. 前后端分离与模块化是项目架构的基石
2. RESTful API 是前后端通信的标准规范
3. json-server 使新手零门槛快速搭建后端
4. HTML 语义化标签让代码更优雅、可维护性更强
5. DOM 是 JavaScript 操纵页面的桥梁
6. 编写精准 prompt 是现代程序员的必备技能

如果你正在入门全栈开发，希望本篇笔记能助你将零散概念系统化整合，顺利上路。