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

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

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

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

Tools: phpmyadmin, photoshop, powerpoint, ...

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

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

然后我們愉快的打開(kāi)了 localhost:3000 看到了我們的頁(yè)面:

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

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

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

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

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

// index.jade
extends layout

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

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

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

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

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

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

在頁(yè)面新建 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ù)交互層的問(wèn)題。but：前后端的界限是按照瀏覽器和服務(wù)器的劃分。那么我們經(jīng)常會(huì)發(fā)現(xiàn)一些問(wèn)題：

那么，作為前端開(kāi)發(fā)的我們?cè)趯?shí)際的開(kāi)發(fā)場(chǎng)景中又會(huì)遇到以下問(wèn)題：

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

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

接口：

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

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

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

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

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

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

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

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

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

關(guān)于：

作者：monkeyWang

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

本文源碼詳見(jiàn)：服務(wù)端代碼。前端代碼。基于 vue 和 easy-mock 搭建的腳手架

我的主頁(yè)：我的博客主頁(yè)

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