迈向现代的 Web 开发

约 2525 字大约 8 分钟

2025-10-11

本文由本人撰稿.

前言

Web 开发是在做什么呢？

直观地说，我们在浏览器访问的网站就是 Web 开发要实现的. 比如访问 DeepSeek 网页端、字节的即梦 AI，通过浏览器直接看得到的交互界面，是 Web 开发中的前端要实现的.

然后，你可以按下 Ctrl+Shift+I 组合键，打开 开发人员工具（Devtools），点击 元素（Element），就能看到当前经过浏览器渲染的前端部分的代码，点击 源代码（Source），选择 页面，就能看到当前网站的前端源码.

现在，请点击 网络（Network），选择 Fetch/XHR，你可以查看到当前浏览器发送的一些请求，对于不同的请求 URL、标头（请求头）、负载（请求参数）等，远程接口返回的数据相应不同，这是 Web 开发中的后端要实现的.

目前，随着跨平台技术逐渐增多（特别是不少大厂在做跨平台），Web 开发的前端也不局限于网站前端，跟混原生/跨端框架^[1]结合，可以更快速地开发 Android 端、iOS 端、Windows 端、MacOS 端、Linux 端、OHOS 端的应用，经过优化具备高于浏览器渲染、稍低于平台原生开发的界面性能表现.

实在点来看，Web 开发有什么用呢？

以下仅代表个人想法，相信你可以挖掘出新的方向/赛道！

对于希望走科研（读研/直博/出国）路线的同学，可以针对论文开发对应的应用来可视化展示成果（比如在线海报、网站等），注意到近几年不少 CCF-A/B 区的 LLM 相关论文都有对应放在 Pages 上的网站，例如 Fine-tuning Aligned Language Models Compromises Safety, Even When Users Do Not Intend To!.
对于希望本科就业的同学，可以在项目开发中积累相关经验（包括但不限于协同开发、自动流程测试、安全等），选择自己感兴趣的方向（全栈/前端/后端/产品/架构/测试/...）或者业务（可以直接上企业招聘网站看对应的岗位要求，比如字节校招、腾讯校招），深入打磨技术和项目（例如性能优化、工具链优化等），作为简历的亮点.
对于希望丰富经历/综测（大创/比赛）的同学，可以构思一些有创新性的项目（比如与LLM/CV/区块链交汇），参与挑战杯、4C比赛、计算机设计大赛等的网站开发/应用开发/人工智能应用赛道.

这份入门路线的定位，就是希望你可以在具备 C/C++/Java/Python... 等程序设计语言学习的基础上，逐步了解现代 Web 项目的开发，帮助你进一步选择感兴趣的方向/赛道.

不管你抱着怎样的预期，认真参与其中，相信都会有所收获的！

初步

个人会更推荐读读文档，效率可能会更高一些. 现在也有很多在线视频教程，可以找找B站视频来跟着做，重在实践嘛. 可以参考：JS快速入门 (BV15L4y1a7or)、前端快速入门 (BV1kM4y127Li).

前端

HTML5 + CSS3 + JavaScript^[2] 经典三件套，可以查看在线教程，相对好入门的有 W3School，也可以读 MDN文档，相对更细更专业一些.

对于 HTML5，知道一个正常的 HTML 文件中一般包含哪些内容、HTML5 源码中各个标签的含义、HTML5 DOM.

对于 CSS3，清楚各个样式和常见布局（比如flex、grid、table之类）.

对于 JS，明晰基本语法（常见的变量声明、函数、类等，类比 C/C++ 找相同点和不同点，可以很快地过）、如何响应事件（HTML DOM 加载完成、点击、鼠标右键等）、如何操作 HTML DOM（有 JQuery 框架做了封装），然后看看 TS（TypeScript，这是 JS 更新的语言规范，相比 JS 具备更加严格的安全要求）.

后端

PHP/Java + MySQL + Apache/Nginx（之前盛行的LAMP/LNMP一类，L是指Linux服务器），PHP 是后端语言，当时的好处是可以直接把 PHP 后端生成的内容写入到 HTML 返回，也就是实际上这个时候还没有前后端分离的概念，PHP 里面直接写 HTML（后面会发现代码日益臃肿、不便于维护）.

（这里了解即可，目前市场上的存量服务仍有很多用 LAMP 等架构的，但对于我们创建新项目来说，可能有更好的选择，参见后文.）

入门

目前 Web 相关项目开发通常采用前后端分离的方式，前后端通过 API^[3] 进行数据交互，便于开发和维护.

例如，前端要获取一篇 id 为 1 的文章内容，向后端 Get /api/post/id/1，后端以规划好的 JSON 格式返回

{
    "code": 200,
    "message: "成功获取文章内容",
    "data": {
        "title": "xxx",
        "content: "## xxx #### xxxx ...",
        "createdAt": "xxx",
        "updatedAt": "xxx",
        ...
    }
}

通过这样的方式，前端不必关心后端具体是如何实现鉴权并到数据库查询指定数据然后格式化返回的，只需要解析后端返回的数据，就可以获取到文章标题、内容、创建时间、最后更新时间等数据，后续渲染界面这些就是前端的工作了.

前端

推荐以 Vue^[4] 为代表的 MVVM 框架，官网文档在这，上面提供了很多在线演练的机会，建议先跟着文档过一下 Vue 的基础、组件等，体会一下与先前写原生 JS 直接操作 HTML DOM 的差异.

然后，点这里获取并安装 Node.JS，建议选择 pnpm 包管理器，效率会比自带的 npm 高很多. 如果是直接获取 Windows MSI 包，安装后打开命令行执行 npm install -g pnpm 配置. 如果 npm 拉取过程中存在网络问题（比如超时），请搜索 npm 镜像源配置，将 npm 包源切到国内.

接着，执行 pnpm create vite 拉取 Vite 项目模板（在交互配置中，至少选择 Vue-Router 和 Pinia），Vite 会在你的命令行当前文件夹（> 前的文件夹路径）下创建一个对应的文件夹. 你可以使用 VSCode 等打开对应的文件夹，请先看一下项目内部的文件夹架构，点进去看看各个文件夹下的内容. 然后，在终端输入 pnpm dev 开启调试.

你可以修改一下各个文件夹下的文件，在浏览器观察页面相应的变化. 可以进一步阅读 Vue-Router 和 Pinia 提供的文档.

（项目，待补充）

如果想深入学习 Vue 是如何实现响应数据更改、编译器是如何解析模板语言到 JS 的，可以看看 vuejs/core.

后端

目前可以做后端开发的语言有挺多，JS(TS)、Go、Java、C++... 各有侧重，入门建议从 JS/GO 开始，这里先推荐 JS.

前面我们已经安装了 Node.JS 环境，以 Express^[5] 框架为例，先阅读 Express 框架文档，安装后，在本地试一试指南里的路由、中间件等，用 Postman 等请求试试，看看路由、中间件等是怎么发挥作用的？

（项目，待补充）稍微熟悉后，你可以尝试前端做一个简单的登录界面，后端做一个对应的登录接口，调通前后端.

HTTP 协议很好，但我想针对特定场景实现一个更高效的通讯协议！

比如，QQ 新版本基于 Electron（一个可以用 JS/TS 构建桌面应用的框架）构建了 Windows、Linux、MacOS 多端的应用界面，底层使用 C++ 做通讯；字节最近也开源了 Lynx 框架. ↩︎
有趣的历史：虽然名字里带 Java，JavaScript 本身和 Java 关系不大，JavaScript 原名 ECMAScript，当时是蹭 Java 热度改名的，结果现在热度真比 Java 高了. 个人来说，JavaScript 确实比 Java 开发更友好，并且 JS 前后端开发都可以做. ↩︎
应用程序设计接口（Application Programming Interface），可以类比在 C/C++ 程序设计中调用库，调用时不必关注库的内部实现. 不过，如果要做更进一步的优化，通常就需要读对应的源码了. ↩︎
个人感觉 Vue 相对更好入门一点，因此这里主要以 Vue 为主. 如果你期望一个更轻量的框架，可以试试 Solid.js；如果你更偏好 JSX，可以试试 React. ↩︎
如果你期望一个更轻量的框架，可以试试 Koa.js；如果你有 Java 开发的相关经验，可以看看 NestJS. ↩︎

迈向现代的 Web 开发

前言

Web 开发是在做什么呢？

实在点来看，Web 开发有什么用呢？

初步

前端

后端

入门

前端

后端

补充（施工中...）

Vibe Coding

部署到云

浏览器/Webview 渲染

HTTP 协议

C++ 混合开发

WASM

一次开发，多端部署