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

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

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

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

Tools: phpmyadmin, photoshop, powerpoint, ...

我們用 express 應(yīng)用生成器來模擬一下傳統(tǒng)開發(fā)（因?yàn)楸救嗽缫淹沯ava是怎么寫的了，這里只是為了方便演示）

$ npm install express-generator -g # 安裝 express-generator
$ express progressive # 初始化項(xiàng)目
$ cd progressive # 進(jìn)入目錄
$ npm install # 安裝依賴
$ npm start # 啟動項(xiàng)目

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

接著，我看是研究代碼：
發(fā)現(xiàn)我的模板引擎用的是 jade 是通過 nodejs 服務(wù)端進(jìn)行動態(tài)渲染：

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

然后當(dāng)我訪問 localhost:3000 的時(shí)候，開始了界面渲染：

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

然后我又研究了一下 jade 語法，準(zhǔn)備后續(xù)的開發(fā)：

// index.jade
extends layout

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

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

...... WTF 是誰把手套放進(jìn)鍋?zhàn)永锩嬷?..

在發(fā)現(xiàn)問題之后，為了更好的脫離這種前端強(qiáng)依賴后端的關(guān)系，我們想要把數(shù)據(jù)層的接口給分離出來，以 ajax 的形式進(jìn)行交互，讓服務(wù)端只負(fù)責(zé)渲染邏輯，不負(fù)責(zé)數(shù)據(jù)填充。頁面的數(shù)據(jù)部分通過 ajax json 的形式形式進(jìn)行交互，所以我們的結(jié)構(gòu)可能是這樣子：

所以現(xiàn)在我的頁面請求邏輯是這樣子的：

// 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);
});

重構(gòu) index.jade

extends layout

block content
  h1= title
  p#title

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

這樣便完成了前后端數(shù)據(jù)交互層的問題。but：前后端的界限是按照瀏覽器和服務(wù)器的劃分。那么我們經(jīng)常會發(fā)現(xiàn)一些問題：

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

環(huán)境：進(jìn)行本地開發(fā)，需要起后端環(huán)境，如 nodejs 服務(wù)（如果是去其他語言 我們可能需要 tomcat、Apache.... ），影響開發(fā)效率

聯(lián)調(diào)：前后端共用一套服務(wù)端環(huán)境，需要及時(shí)同步代碼，造成效率底下。同時(shí)前后端關(guān) 注點(diǎn)不同，前端更專注瀏覽器適配，效果展示和用戶體驗(yàn)，而服務(wù)端則關(guān)注的是數(shù)據(jù)安全和可靠...

接口：

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

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

文檔散落，影響接口維護(hù)

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

為了更高的提高開發(fā)效率，我們的前端 MV* 時(shí)代開始到來：

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

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

我們把服務(wù)層抽出來，最終形成的目錄結(jié)構(gòu)可能是這樣的：

我們的服務(wù)端提供接口和前端進(jìn)行交互：

// 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

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

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

關(guān)于：

作者：monkeyWang

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

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

我的主頁：我的博客主頁

后面有時(shí)間再接著介紹我會接著介紹中間層 nodejs 應(yīng)用和前端自動化發(fā)布以及腳手架的相關(guān)問題....