vue前后分離---數據模擬

最近為在做CRM的前期工作,忙里偷閑寫了個關於數據模擬方面的東西

主要是現在博客中滿天都再說前后分離,但是還沒有幾個實際操作的---讓許多新手{-_-}

方法一:

　　啟動一個express靜態服務器----需要把數據提前准備好放在一個 .json 文件中

　　

　　第一步:創建mock文件夾,mock文件夾下創建 tree.json 然后隨便寫點數據上去

　　第二步:在 build/dev-server.js中添加

　app.use('/mock',express.static('./mock'))

 

第三步:運行

npm run dev

訪問 http://localhost:8080/mock/tree.json   如果成功就沒啥事了 -----記得改了dev-server一定要重啟!!!   否則無效

 請求路徑的時候直接"mock/ xxx.json就能獲取到了"

缺點:只能是get請求 

 

第二種 : 看着比第一種高大上點

　　如果項目不是很大或者前端開發比后端慢的話完全沒必要.

　　使用到了faker.js + json-server + webpack中的映射

1.0准備

　　json-server安裝

npm install -g json-server

　　faker安裝

npm install faker -G

創建mock文件夾 和 faker-data.js    post-to-get.js兩個文件

　　

 

faker-data.js

 

//faker.js語法也是 主要是生成假數據
module.exports = function () {
  var faker = require("faker");
  faker.locale = "zh_CN";
  var _ = require("lodash");
  return {
    people: _.times(100, function (n) {       //100條人類的信息
      return {
        id: n,
        name: faker.name.findName(),
        avatar: faker.internet.avatar()
      }
    }),
    address: _.times(100, function (n) {     //100條住址的信息
      return {
        id: faker.random.uuid(),
        city: faker.address.city(),
        county: faker.address.county()
      }
    })
  }
}
//具體語法看 faker.js的官方文檔  ----不是這里講的重點

官方文檔我沒打開過,不過你們可以看看這個

https://github.com/marak/Faker.js/     模擬假數據的方式還有很多比如我之前玩過的mock.js嘻嘻   但是這些都不重要

修改 package.json

"mock": "json-server --watch mock/faker-data.js --m mock/post-to-get.js",
"mockdev": "npm run mock & npm run dev"

 

 添加映射

config/index.js

//映射json-server  post請求到get模擬數據
    proxyTable: {
      '/api/':{
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite:{
          '^/api':''
        }
      }
    }

 

基本完活

跑一下試試

npm run mock 

//重新打開一個doc窗口
npm run dev

 

然后你就可以通過"/api/xxxx(faker-data.js中的people信息或者address信息)" 獲取數據