最近做的項目是前后端分離進行開發(fā)的赏淌，在后端給到前端接口前，需要前端自己去mock數(shù)據(jù)完成開發(fā)啄清。因此查閱了一些資料六水，整理如下。
前后端分離的三種方式
關(guān)于mock數(shù)據(jù)辣卒，在目前互聯(lián)網(wǎng)行業(yè) web 產(chǎn)品開發(fā)中掷贾，前后端大部分都是分離開發(fā)的，前端開發(fā)過程中無法實時得到后端的數(shù)據(jù)荣茫。這種情況下想帅，一般會使用三種方式：
模擬靜態(tài)數(shù)據(jù)：即按照既定的數(shù)據(jù)格式，自己提供一些靜態(tài)的JSON數(shù)據(jù)啡莉，用相關(guān)工具（如fis3）做接口來獲取這些數(shù)據(jù)港准。該形式使用比較簡單的旨剥、只用 get 方法的場景。
模擬動態(tài)接口：即自己用一個 web 框架（如使用express浅缸，koa）轨帜，按照既定的接口和數(shù)據(jù)結(jié)構(gòu)的要求，自己模擬后端接口的功能衩椒，讓前端項目能順利跑起來蚌父。該方式適用于新開發(fā)的項目，后端和前端同時開發(fā)毛萌。
轉(zhuǎn)發(fā)線上接口：項目開發(fā)中苟弛，所有的接口直接用代理獲取線上的數(shù)據(jù)，post 的數(shù)據(jù)也都直接提交到線上朝聋。該方式適用于成熟項目中嗡午。
使用 webpack-dev-server 的代理
但是有一個問題，那就是后端的服務會起在另外的端口或者域名上冀痕，這時獲取數(shù)據(jù)會發(fā)生跨域的問題荔睹。此時我們可以運用webpack-dev-server 做一個代理的轉(zhuǎn)發(fā)，配置代碼在webpack.config.js中言蛇。如：
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
secure: false
}
},
}
這段代碼的意思是凡是 /api 開頭的 http 請求僻他，都會被代理到 localhost:3000 上。將 http://localhost:3000替換成你后端接口的地址即可腊尚。
至此吨拗，通過webpack的代理，我們成功突破了跨域的問題婿斥，實現(xiàn)了前后端分離開發(fā)劝篷。
