用vue-cli搭建一個(gè)前端開(kāi)發(fā)環(huán)境確實(shí)是極其方便,在寫(xiě)前端代碼肯定也是少不了需要調(diào)用后臺(tái)提供的業(yè)務(wù)接口進(jìn)行前后端交互,特別在敏捷開(kāi)發(fā)中,前后端都要提前確定業(yè)務(wù)接口并進(jìn)行打樁,在開(kāi)發(fā)過(guò)程中基本是沒(méi)有現(xiàn)成的后臺(tái)可以調(diào)用,基本上都是自己寫(xiě)mock進(jìn)行模擬。

在vue-cli搭建的項(xiàng)目中,框架上用的是express的web框架,要做一個(gè)mock是很方便的。

 

假設(shè)前端頁(yè)面上需要獲取所有的新聞列表,那么就需要mock一個(gè)能夠返回所有新聞列表數(shù)據(jù)的接口。

接下來(lái)就在項(xiàng)目中實(shí)現(xiàn)mock功能。

 

腳手架生成項(xiàng)目

執(zhí)行命令用webpack模板生成一個(gè)名為vuestrap的項(xiàng)目(名字任意)

vue init webpack vue-mock-demo

 

在出現(xiàn)的各提示選項(xiàng)中,沒(méi)什么要求,為了方便,把不用的ESLint,unit tests,e2e都關(guān)掉(這些選項(xiàng)都隨意)。

ph
        
		<div   id=

網(wǎng)友評(píng)論