用vue-cli搭建一個前端開發(fā)環(huán)境確實是極其方便,在寫前端代碼肯定也是少不了需要調(diào)用后臺提供的業(yè)務(wù)接口進行前后端交互,特別在敏捷開發(fā)中,前后端都要提前確定業(yè)務(wù)接口并進行打樁,在開發(fā)過程中基本是沒有現(xiàn)成的后臺可以調(diào)用,基本上都是自己寫mock進行模擬。
在vue-cli搭建的項目中,框架上用的是express的web框架,要做一個mock是很方便的。
假設(shè)前端頁面上需要獲取所有的新聞列表,那么就需要mock一個能夠返回所有新聞列表數(shù)據(jù)的接口。
接下來就在項目中實現(xiàn)mock功能。
腳手架生成項目
執(zhí)行命令用webpack模板生成一個名為vuestrap的項目(名字任意)
vue init webpack vue-mock-demo
在出現(xiàn)的各提示選項中,沒什么要求,為了方便,把不用的ESLint,unit tests,e2e都關(guān)掉(這些選項都隨意)。
延伸閱讀
學(xué)習(xí)是年輕人改變自己的最好方式