什么是前端与后端？

一般来说，现在会将产品项目分为前端与后端两个大的领域。

• 前端： 负责用户的交互部分，属于用户能看到的部分。并且将用户的数据发送给后端服务器。不管是网页、APP、智能电视的操作界面，都属于前端。
• 后端： 负责业务逻辑，数据的处理，一般部署在服务器上，属于用户看不到的部分。

打个比方，比如在网页上操作银行转账。那么操作界面相关，比如账号输入框、金额输入框、转账按钮等等都属于前端。

而当我们点击转账那时起，数据会被发送到后端服务器。判断你账号上的钱是否充足，并减去对应的钱，对方账号上加上对应的钱，这部分逻辑是由后端完成。

最终，操作的执行结果会再次返回到前端，前端根据结果显示成功或者失败。

$$tip

从广义上来说，与用户交互的部分比如网页、小程序、手机APP等都属于前端。但在编程开发领域一般狭义地将前端开发特指为网页开发。

$$

区分前后端的意义

十几年前的很多项目都还是前后端耦合的，比如 PHP 等语言就是前后端写在一起。然而现在则更流行将前后端分离，将项目明显地区分前后端具有以下意义。

• 更安全： 将业务逻辑与数据隔离到后端服务器，可以避免敏感的数据被泄露或篡改。
• 降低耦合度： 前端与后端可以使用不同的语言开发，既提升了灵活性、又降低了项目结构的复杂度。
• 职责容易分配： 招人时可以更有针对性，招来的前端与后端程序员各司其职，也更好管理与评定绩效。

前端开发

对于网页前端开发有一些必备的编程语言需要学习，那就是被并称为前端三剑客的 HTML、CSS、JavaScript。它们是前端开发中的基石，浏览器会通过解释这个三个语言的代码文件来渲染我们看到的网站。

• HTML：描述页面上存在有哪些元素，比如一个按钮，一段文本。
• CSS：描述页面上元素的样式、排列方式，比如按钮的大小，文本的颜色。
• JavaScript：定义页面上的功能，比如点击这个按钮是登录还是注册。 现代化的前端开发中，我们通常还会选择一个前端框架，比如现在流行的三大前端框架：Vue、React、Angular。

前端框架会封装底层的细节，可以使得我们的开发可以更专注业务逻辑、更规范、更流程化、更符合现代的开发理念。如果将纯粹 HTML、CSS、JavaScript 开发比喻成手工制作，那使用框架就像一条生产流水线。

由于浏览器只认识 HTML、CSS、JavaScript，所以我们使用前端框架写的项目最终还是会编译成 HTML、CSS、JavaScript。

前端的学习

对于前端的学习，毫无疑问 HTML、CSS、JavaScript 这三剑客是需要认真学习的，之后再过渡到框架的学习，理解框架之后可以学习一些常见库的使用。

• HTML - 描述网页结构
• CSS - 描述网页样式
• JavaScript - 网页脚本语言
• Git - 代码版本控制器
• Node - JavaScript 运行环境
• Npm - 包管理工具
• Vue - 前端框架
• Vite - 前端构建工具
• VueRouter - 路由组件
• Element - UI 组件库
• Pinia- 状态管理组件

这里推荐的学习顺序是从上至下的，但不推荐完全学完 HTML、CSS、JavaScript 再学 Vue。

推荐的学习方式应该是掌握一个知识点的重点之后，就可以开始新知识点的学习。直到能使用这些知识点搭出一个基本的项目结构，再通过往这个项目上添砖加瓦式地学习。反而更能加深我们对这个知识点的理解，明白它的应用场景。

同时在学习的过程中务必注重实战，写代码不需要背。重在能将应用场景与知识点联系起来，懂得处理这个问题需要用哪个知识点，实际写代码的时候完全就可以现查现写。

有一句笑话就是，一个厉害的程序员只需要三个键，CTRL、C 和 V，因为写代码时只需要 CTRL + C （复制）与 CTRL + V（粘贴）。这虽然是一句笑话，但也反映了程序员的实际工作过程，遇到问题分解成关键词，然后谷歌搜索关键词，复制粘贴代码。

$$tip

本章的内容初看可能难以理解，等有一定前端基础后回过头来再看一遍能加深自己对前端的认识。

$$