前端代码和后端代码有什么区别

你打开一个网页，点了一下“登录”按钮。代码端代浏览器弹出一个绿色提示：“欢迎回来”。和后这个绿色提示是什区谁做的？按钮变灰、转圈、前端然后弹出提示——这一连串动作，代码端代是和后前端代码干的。而那个“欢迎回来”里面的什区用户名和头像，是前端后端代码从数据库里捞出来，再通过接口传回来的代码端代。一个管“怎么动”，和后一个管“从哪来”。什区

前端代码跑在用户的前端浏览器里。你写一段 JavaScript，代码端代用户一刷新页面，和后这段代码就在他的电脑上执行。改个颜色、做个弹窗、监听滚动事件——这些操作不需要联网，浏览器自己就能搞定。后端代码跑在服务器上，用户看不到，也摸不着。它处理的是数据：谁登录了、订单有没有付款、库存还剩多少。你写一段 Python 或 Java，放在云服务器上，用户通过 HTTP 请求来“触发”它。

我见过一个刚入行的朋友，把用户密码的加密逻辑写在了前端 JavaScript 里。他觉得“反正用户看不到代码”。结果打开浏览器开发者工具，加密函数和密钥一览无余。前端代码是公开的——你压缩、混淆，也只是让阅读变难，不是变不可能。后端代码才是真正的黑盒。用户只能看到请求返回的 JSON，看不到你数据库连接串、看不到你调用的第三方支付 SDK 的密钥。所以敏感操作、权限校验、数据过滤，必须放在后端。

前端关心的是“界面”和“交互”。一个按钮的圆角是 4px 还是 8px，下拉菜单的动画是 200ms 还是 300ms，移动端手指滑动时列表会不会跟手——这些都是前端的事。后端关心的是“逻辑”和“数据”。用户提交的订单金额对不对？库存扣减有没有并发问题？给前端返回的数据格式是不是 { code: 0, data: { ...} }？两者关注点完全不同，就像装修师傅和建筑工程师，一个管墙面刷什么颜色，一个管承重墙能不能拆。

写前端代码，你大部分时间在和浏览器打交道。Chrome 的 DevTools 是你的第二双眼睛。你调 CSS 的 z-index，看网络面板里图片加载了多久，用 React 或 Vue 管理组件状态。写后端代码，你大部分时间在和数据库、缓存、消息队列打交道。你写 SQL 查询，调 Redis 的过期时间，处理接口的幂等性。前端开发者经常要兼容 Safari 的怪脾气，后端开发者经常要处理 MySQL 的死锁。

还有一个容易被忽略的区别：前端代码的“运行环境”是用户的设备。用户的手机可能很旧，浏览器可能是三年前的版本，网络可能只有 2G。你写的代码要考虑降级、要考虑加载速度、要考虑用户突然断网。后端代码的运行环境是你自己选的服务器。你可以决定用几核 CPU、多少内存、什么操作系统。你不用担心用户那边突然把 WiFi 关了——请求没到就是没到，你只需要保证到了的请求能正确处理。

那是不是前端就简单？不是。前端要处理的状态复杂度一点不比后端低。一个电商购物车，前端要同步本地存储、要乐观更新 UI、要处理多个标签页之间的数据同步。后端反而可能只是简单地读写数据库。反过来，后端要处理的高并发、事务一致性、分布式锁，前端根本不用操心。两者难度在不同维度上。

我自己的习惯是：任何涉及“钱”和“权限”的逻辑，无条件放后端。任何涉及“动画”和“即时反馈”的逻辑，放前端。用户输入框的实时字数统计，前端做；但字数超限后能不能提交，后端必须再校验一次。前端代码是“建议”，后端代码是“法律”。用户可以在浏览器里改 JavaScript 绕过你的前端校验，但他改不了服务器上的代码。

最后说个具体的。你写了一个表单，前端用正则表达式检查邮箱格式。用户填了 a@b，前端说“格式不对”。用户打开 DevTools，把 type="email" 改成 type="text"，提交了。后端收到 a@b，如果后端不再次校验，这个脏数据就进数据库了。所以前端校验是为了用户体验——让用户少一次网络请求就知道错了。后端校验是为了数据安全——不管前端发来什么，后端只认自己规则内的东西。

前端代码是演员，在用户眼前表演。后端代码是导演，在幕后决定剧情走向。演员可以即兴发挥，但导演不喊卡，戏就停不下来。

分清这两者，不是为了划清界限，而是为了知道什么代码该写在哪个文件里。下次你写登录功能，密码加密放后端，按钮 loading 状态放前端。就这么简单。

(责任编辑：时尚)