淺談先後端分離與實踐（一）

1、起源

（故事純屬虛構，若有雷同，純屬巧合）傳說在好久好久之前，咱們有志之士有了個創業的想法，因而乎開始了本身的創業之夢，可是人手不足啊，因而乎全部角色老子一我的全包了：

• 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 是誰把手套放進鍋子裏面煮...

2、爲了更好的劃分，咱們開始了重構

在發現問題以後，爲了更好的脫離這種前端強依賴後端的關係，咱們想要把數據層的接口給分離出來，以 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：先後端的界限是按照瀏覽器和服務器的劃分。那麼咱們常常會發現一些問題：

那麼，做爲前端開發的咱們在實際的開發場景中又會遇到如下問題：

1. 環境：進行本地開發，須要起後端環境，如 nodejs 服務（若是是去其餘語言 咱們可能須要 tomcat、Apache.... ），影響開發效率
2. 聯調：先後端共用一套服務端環境，須要及時同步代碼，形成效率底下。同時先後端關 注點不一樣，前端更專一瀏覽器適配，效果展現和用戶體驗，而服務端則關注的是數據安全和可靠...
3. 接口：

• 接口定義通常使用 word 文檔，前端開發時很差理解接口字段，影響開發效率
• 接口變動須要從新編寫文檔，並從新發送，影響開發效率
• 文檔散落，影響接口維護

出現影響開發效率的事情，就說明現有的模式仍是存在問題，顯然問題的解題思路須要咱們從新思考「先後端」的定義。

3、先後端分離實踐

爲了更高的提升開發效率，咱們的前端 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 應用和前端自動化發佈以及腳手架的相關問題....