export function makeServer({ environment = "development" } = {}) {

let server = new Server({
// 環境變量
environment,
// 數據模型，描述數據結構，用于 Mirage 的 ORM
models: {
todo: Model,
},
// 數據生成器
seeds(server) {
server.create("todo", { content: "Learn Mirage JS" })
server.create("todo", { content: "Integrate With Vue.js" })
},
// 路由處理
routes() {

this.namespace = "api"

this.get("/todos", schema => {
return schema.todos.all()
})
// 如果執行這個方法，其他沒有匹配的請求路徑不會攔截。適合只模擬部分接口的情況
this.passthrough()
},
})

return server
}

src/main.js

src/server.js?設置好了，Vue 項目怎么使用它呢？在項目入口文件main.js?中引入就行了：

import { makeServer } from "./server"

// 判斷當前環境，如果是本地開發，才啟動 mock 服務

if (process.env.NODE_ENV === "development") {

  makeServer()

}

一切準備就緒。把?App.vue?的代碼改成這樣：

<template>

  <ul id="todos">

    <li v-for="todo in todos" v-bind:key="todo.id">{{ todo.content }}</li>

  </ul>

</template>



<script>

  export default {

    name: 'app',



    data() {

      return {

        todos: []

      }

    },



    created() {

      fetch("/api/todos")

        .then(res => res.json())

        .then(json => {

          this.todos = json.todos

        })

    }

  }

</script>

開發過實際項目的同學應該很熟悉了，這跟請求真實后臺 API 沒什么區別。

Mirage JS 到底做了啥？

你可能會覺得奇怪，Mirage JS 到底做了什么，后臺請求全都轉到模擬接口上去了？其實通過前面的代碼也能看出，在本地開發模式下，它會攔截所有請求，只要匹配到 routes 規則定義里的路徑，就會返回生成的假數據。同時，項目部署上線時，代碼完全不用修改，因為生產環境下它不會啟用 mock 服務。

參考資料

文章轉自微信公眾號@前端之窗

上一篇：

API Mock Server 的配置與應用

下一篇：

使用 YApi 管理 API 文檔、測試、MOCK
#你可能也喜歡這些API文章!

我們有何不同？

API服務商零注冊

多API并行試用

數據驅動選型，提升決策效率

查看全部API→
??

熱門場景實測，選對API

#AI文本生成大模型API

對比大模型API的內容創意新穎性、情感共鳴力、商業轉化潛力

25個渠道
一鍵對比試用API 限時免費

#AI深度推理大模型API

對比大模型API的邏輯推理準確性、分析深度、可視化建議合理性

10個渠道
一鍵對比試用API 限時免費