前端开发mockjs的使用方法

0.详细使用方法看官网

http://mockjs.com/examples.html

https://github.com/nuysoft/Mock/wiki/Getting-Started

https://github.com/nuysoft/Mock/wiki/Mock.mock()

1.项目安装mockjs

npm install --save-dev mockjs

2.mock布局

src -
       | 
       mock
              |
              index.js

src 文件夹下创建mock 文件夹
mock 文件夹下创建index.js

3.index.js内容如下

import Mock from "mockjs"

var Random = Mock.Random

function UserList() {
    const data = Mock.mock({
        // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
        'list|1-10': [{
            // 属性 id 是一个自增数,起始值为 1,每次增 1
            'id|+1': 1
        }]
    })

    return data
}

//使用示例
Mock.mock('请求URL',‘请求Method’,'响应Body')

//mock login 后端Api
Mock.mock('/auth/login/', 'post',{
	"code": 1000,
	"message": "登录成功",
	"data": {
		"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNjE0MDQyNTk2LCJlbWFpbCI6IiJ9.Iv24ZHyiiJxxowiLIF8EZlB6ghfOWycETBnMVNNWXXM"
	}
})

console.log("Mock 200")

export default Random

4.src.main.js文件导入配置好的mock

import './mock';

5.开发时候的使用 mockjs 将会拦截所有的axios请求

          this.$axios.post('/auth/login/').then(res=>{
            console.log(res.data)
          }).catch(err=>{
            console.log(err)
          })
posted @ 2022-05-05 09:59  烧刘病  阅读(392)  评论(0编辑  收藏  举报
回到页首