miragejs模拟接口在vue中的使用笔记

341 阅读1分钟
 miragejs
 地址:https://www.miragejs.cn/docs/getting-started/installation/

简述 mirage的使用

  1. 安装

使用 npm 安装

npm install --save-dev miragejs

使用 Yarn 安装

yarn add --dev miragejs

  1. vue中创建一个单独的server文件。用于存储mirage的接口
  2. 入口文件引入server.js
// 常用main.js中引入。这样全局可生效

import   './serve'

4.server.js 文件的文件内容 具体格式可看官网。


import { createServer } from "miragejs"
createServer({
    routes() {
      this.post("/movies", () => {
        let data ={
          "code": 0,
          "desc": "测试成功",
          "data": {
      
              "list": {
                  "total": 8,
                  "totalPage": 1,
                  "page": "1",
                  "pageSize": "20",
                  "prevPage": 1,
                  "nextPage": 1,
                  "list": [
                      {
                          "ceshi": "1",
                          "num": "15251",
                          "time_classify": "<15",
                          "cnt": "15251",
                       
                      },
                      {
                          "ceshi": "2",
                          "num": "9008",
                          "time_classify": "16-30",
                          "cnt": "9008",
                        
                      },
                    
                    ]
                }
            },
       
        }

        return {
          data:data
        }
      })
    },




  })

5.vue页面中使用

  ceshi(){
   this.$post("/movies").then(res=>{
     console.log( res,'当前movies接口返回的内容')
   })
    },

6.调用接口

this.ceshi()

打印结果

image.png