Version: Next

mockjs模拟后端数据

在后端项目不存在的情况下，为了开发前端项目，可以使用mockjs伪造后端服务器的响应数据

安装

npm install mockjs --save

拦截请求，并给出响应

在/api/data.js中，再写一个请求后端的方法

import axios from '@/api/axios'

export const getBannerData = () => {
    return axios.request({
        url:"banner",
        method:'get'
    })
}

// 新写的方法
export const getUserData = () => {
    return axios.request({
        url:"username",
        method:"get"
    })
}

在组件中调用

// ... 导入省略

async mounted(){ // 生命周期函数
    let result = await getUserData();
    console.log(result);
}

因为没后端，所以会404

使用mockjs

修改项目的main.js，配置开发环境加载mock.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/config/rem'

Vue.config.productionTip = false
// 在开发环境下，导入Mock.js , api目录下的mock.js
if(process.env.NODE_ENV == 'development') require('@/api/mock')

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

新建/api/mock.js

import Mock from 'mockjs';

// 配置模拟网络延迟
Mock.setUp({
    timeout: 1000 // 1秒延迟
})

// 匹配一个请求路径， 还可以使用正则表达式实现多匹配
Mock.mock('/api/username', { 
    // 假响应，写死的
    username:"我是名字",
    age: 18,
    gender: "男"
})

// 再写一个可以生成随机假响应的mock
Mock.mock(/\/api\/user/igs,{
    username:"老陈",
    "mtime":"@datetime", // 随机时间
    "score|1-800":800,  // 随机1~800
    "rank|1-100":100,
    "nickname":"@cname", // 随机生成中文名字
    "address":"@url",  // 随机生成地址
    "imgUrl":"@image",  // 随机图片
    'email':"@email" // 随机邮箱
})

还可以将假数据定义在一个js文件中

position.js

export default { "address": "广东省广州市海珠区阅江西路222号", "city": "广东省", "geohash": "23.10647,113.32446", "latitude": "23.10647", "longitude": "113.32446", "name": "海珠区赤岗汇礼轩商场(滨江东路南50米)" }

然后在mock.js中引入

mock.js

import Mock from 'mockjs';
import position from '@/api/mockServerData/position'

//配置请求延时
Mock.setup({
    timeout:1000
})

Mock.mock('/api/posi',position)

这样在请求时，就可以得到假响应了

mockjs模拟后端数据#

安装#

使用mockjs#

mockjs模拟后端数据

安装

使用mockjs