摘要：前后端的界限是按照瀏覽器和服務器的劃分。前后端彼此互不關聯。關于作者本文部分圖片段落參考文章實踐中的前后端分離。淘寶前后端分離實踐本文源碼詳見服務端代碼。

（故事純屬虛構，如有雷同，純屬巧合）傳說在很久很久以前，我們有志之士有了個創業的想法，于是乎開始了自己的創業之夢，但是人手不足啊，于是乎所有角色老子一個人全包了：

Roles: PM, DBA, RD, FED, Designer, ...

Skills: Linux, MySQL, JAVA, JavaScript, HTML, CSS, ...

Tools: phpmyadmin, photoshop, powerpoint, ...

我們用 express 應用生成器來模擬一下傳統開發（因為本人早已忘記java是怎么寫的了，這里只是為了方便演示）

$ npm install express-generator -g # 安裝 express-generator
$ express progressive # 初始化項目
$ cd progressive # 進入目錄
$ npm install # 安裝依賴
$ npm start # 啟動項目

然后我們愉快的打開了 localhost:3000 看到了我們的頁面:

接著，我看是研究代碼：
發現我的模板引擎用的是 jade 是通過 nodejs 服務端進行動態渲染：

// app.js
app.set("view engine", "jade");

然后當我訪問 localhost:3000 的時候，開始了界面渲染：

// routers/index.js
router.get("/", function(req, res, next) {
  // 假設這里我為了獲取 title 的值，對 sql 進行了查詢，然后把title的值插入到模板引擎中
  ...
  res.render("index", { title: "Express" });
});

然后我又研究了一下 jade 語法，準備后續的開發：

// index.jade
extends layout

block content
  h1= title
  p Welcome to #{title}

緊接著我們開始了后續的開發....經過幾個月，我們寫了sql，寫了 jade， 寫了node .... 。做了PM，做了DBA， RD ....終于一個項目搞完了。然后我愉快的拿到了投資人的投資，有錢了，項目迭代總不能什么事情都是我一個人干吧？我可以找幾個人一起來開發嘛，于是乎，我招聘了前端，招了后端，招了 PM ....
后面的開發愉快且開心的打開了我的代碼：

...... WTF 是誰把手套放進鍋子里面煮...

在發現問題之后，為了更好的脫離這種前端強依賴后端的關系，我們想要把數據層的接口給分離出來，以 ajax 的形式進行交互，讓服務端只負責渲染邏輯，不負責數據填充。頁面的數據部分通過 ajax json 的形式形式進行交互，所以我們的結構可能是這樣子：

所以現在我的頁面請求邏輯是這樣子的：

// routers/index.js
router.get("/", function(req, res, next) {
  res.render("index");
});
router.get("/getTitle", function(req, res, next) {
  res.json({
    code: 0,
    msg: "success",
    data: "express"
  })
});

在頁面新建 index.js:

ajaxGet("/getTitle", function (err, res) {
    $("#title").text("welcome to " + res.data);
});

重構 index.jade

extends layout

block content
  h1= title
  p#title

append scripts
  script(src="/javascripts/jquery.min.js")
  script(src="/javascripts/index.js")

這樣便完成了前后端數據交互層的問題。but：前后端的界限是按照瀏覽器和服務器的劃分。那么我們經常會發現一些問題：

那么，作為前端開發的我們在實際的開發場景中又會遇到以下問題：

環境：進行本地開發，需要起后端環境，如 nodejs 服務（如果是去其他語言 我們可能需要 tomcat、Apache.... ），影響開發效率

聯調：前后端共用一套服務端環境，需要及時同步代碼，造成效率底下。同時前后端關 注點不同，前端更專注瀏覽器適配，效果展示和用戶體驗，而服務端則關注的是數據安全和可靠...

接口：

接口定義一般使用 word 文檔，前端開發時不好理解接口字段，影響開發效率

接口變更需要重新編寫文檔，并重新發送，影響開發效率

文檔散落，影響接口維護

出現影響開發效率的事情，就說明現有的模式還是存在問題，顯然問題的解題思路需要我們重新思考“前后端”的定義。

為了更高的提高開發效率，我們的前端 MV* 時代開始到來：

前后端數據通過JSON進行交互，彼此互相不關聯，接口分離，后端提供數據即可，前端自己搞。MODEL層 - JAVASCRIPT OBJECT，VIEW層 - JAVASCRIPT TEMPLATE。業界也充滿了新的解決方案比如： Backbone, EmberJS, KnockoutJS, AngularJS, React, Vue...

于是乎我們開始了新的旅途：MVVM 的單頁面開發：

我們把服務層抽出來，最終形成的目錄結構可能是這樣的：

我們的服務端提供接口和前端進行交互：

// routers/users.js
let express = require("express");
let router = express.Router();
let usersCtrl = require("../controllers/usersCtrl")

router.post("/login", usersCtrl.login)
router.post("/sign", usersCtrl.sign)
router.get("/getUserInfo", usersCtrl.getUserInfo)
module.exports = router

此時，前端使用 vue-cli 生成腳手架，通過安裝 axios 進行 ajax 數據請求便可以得到返回的數據。前后端彼此互不關聯。
but：新的需求來了，我們要定義前后端的數據接口了，這時候前端需要等到服務端接口開發完才能進行開發嗎？說好的前后端分離呢？
這個時候，前端可能會采取 mock 的形式進行數據模擬，需要前后端共同定義好接口規范，于是乎我們開心的在本地寫了一大堆mock文件。有一天接口突然要變個字段，并沒有及時的通知前端，完了.... 或者團隊成員之間協同開發，我們需要同步 mock 數據，需要不斷地進行 git 提交.... 隨著項目的的復雜度增加，mock 數據如何管理？
這個時候，我們需要一臺 mock 服務器，最好能同步服務端接口的 mock。當然，現在網上也已經有了成熟的解決方案，比如 easy-mock 。他可以很好地支持Swagger，這是一個重磅級特性，通過 Swagger 只需1秒就能創建好項目所有的 Mock 接口。

說到這里，我們完成了一個最基本的前后端分離的方案，后面我會接著介紹中間層 nodejs 應用和前端自動化發布以及腳手架的相關問題。如果您對本文有不同的意見也歡迎一起探討。

關于：

作者：monkeyWang

本文部分圖片段落參考文章：實踐中的前后端分離。 淘寶前后端分離實踐

本文源碼詳見：服務端代碼。前端代碼?；?vue 和 easy-mock 搭建的腳手架

我的主頁：我的博客主頁

后面有時間再接著介紹我會接著介紹中間層 nodejs 應用和前端自動化發布以及腳手架的相關問題....