一、介绍
前和后自古以来就是一对非常有意思的组合，比如空前绝后，前无古人后无来者，就像道家的阴阳一样，既是相铺相成又是剪不断理还乱。
前后端分离最近两年非常流行，但在我刚开始工作的时候只知道网站分为静态网站和动态网站。当时需求提出来之后，先是由设计师把视觉稿做出来，然后由前端把整个网站的静态页面写出来，后端再把静态页面转成动态渲染的页面。
前端在写页面的时候会用假数据填充页面，然后后端等前端把静态页面写完以后拿过来套真实的数据，然后就产生了这样前后端高耦合的页面。如果配合好的话还好，不过一般来说都不会太顺利，特别是曾经的我是一个不懂前端的后端，每次转完动态后都出现了一系列不可预知的问题，这时候我又得找前端去解决，然后前端拿到我的动态页面代码也是一脸懵逼。在之后如果要改需求改样式的话也很难改，基本需要两个人配合着改，开发周期又长又痛苦。
静态页面
<article>
<header>注意！本周亚马逊下架了这类产品，卖家小心踩雷</header>
<div>1、注意！本周亚马逊下架了这类产品，卖家小心踩雷 亚马逊上有这么一款产品，外包装上刻画了一个患有强迫症的男子，…</div>
<footer>小易快讯</footer>
</article>
<article>
<header>注意！本周亚马逊下架了这类产品，卖家小心踩雷</header>
<div>1、注意！本周亚马逊下架了这类产品，卖家小心踩雷 亚马逊上有这么一款产品，外包装上刻画了一个患有强迫症的男子，…</div>
<footer>小易快讯</footer>
</article>
<article>
<header>注意！本周亚马逊下架了这类产品，卖家小心踩雷</header>
<div>1、注意！本周亚马逊下架了这类产品，卖家小心踩雷 亚马逊上有这么一款产品，外包装上刻画了一个患有强迫症的男子，…</div>
<footer>小易快讯</footer>
</article>
动态页面
<?php
// ...
$name = $_GET['act'];
$page = $_GET['page'];
$rows = array();
$sql = "select post_id, post_title, post_content ... limit 10;";
$rs = $mysqli->query($sql);
if($rs && $rs->num_rows > 0):
while($row = $rs->fetch_assoc()):
$rows[] = $row;
// ...
/* 循环输出文章 */
foreach($rows as $row):
?>
<article>
<header><?php echo $row['post_title']; ?><</header>
<div><?php echo $row['post_content']; ?></div>
<footer>小易快讯</footer>
</article>
<?php
endforeach;
?>
然后 PC 端和移动端的逻辑又不太一样，就催生出了 Bootstrap 这样的响应式布局，一套代码多个尺寸适用，但是往往达不到想要的效果，或者某个尺寸会不那么好。
二、全端/栈工程师
然后这时候如果一个人又懂前端又懂后端就是很方便，所以常常在面试要求里看到前端岗位都要会用一种后端语言，后端也要对 HTML/CSS/JS 有一定的了解；既然是全端开发，就一定涉及到非常非常多的技术。每一项都掌握得非常精，几乎是不可能的，至少对于我这样的普通人是不可能，人的精力实在是太有限了，常常被人觉得简单的 SQL、CSS、正则表达式稍微深一点都是需要大量的时间去研究，所以我认为首先有一项自己比较精通的技术，然后广度一定要达到。
于个人而言，找到自己喜欢的方向，更容易成为这个领域的专家；于招聘而言招聘成本也会降低，目标更明确；在实际项目中合适的人做合适的事情，这样项目质量也会更高。
三、前后端分离
前后端分离我的理解其实前后端分工，在项目中后端只需要提供 JSON 数据，前端负责接收数据渲染和与后端交互。此时前端除了写页面之外还负责数据处理过滤和业务逻辑方面的工作，后端可以专注于业务数据方面。
此时项目可以分为三个阶段：
- 设计阶段：前后端负责人就项目进行讨论，约定接口格式。
- 开发阶段：前后端开发人员各自分工，后端提供接口文档，前端根据文档模拟数据渲染页面。
- 测试阶段：若后端接口没有完成，前端可以根据模拟数据先进行测试，接口完成后再联调。
