温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue-cli3中如何使用mockjs

发布时间:2022-01-26 16:35:21 来源:亿速云 阅读:432 作者:iii 栏目:开发技术

这篇文章主要介绍“vue-cli3中如何使用mockjs”,在日常操作中,相信很多人在vue-cli3中如何使用mockjs问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue-cli3中如何使用mockjs”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

一、安装

安装代码如下:

yarn add mockjs
// 或者
npm i mockjs -S

二、搭建mock环境

1、我们通过在根目录中新建mock目录,在这个目录中我们新建一个index.js文件和modules文件夹。

index.js代码如下:

// index.js
const Mock = require('mockjs');
const mockFiles = require.context('./modules', false, /\.js$/);
let mocks = [];

mockFiles.keys().forEach(key => {
  mocks.push(...mockFiles(key))
})

mocks.forEach(item => {
  Mock.mock(item.url, item.type, item.response)
})

在modules文件夹中的user.js代码如下:

// modules/user.js
const userList = {
    url: "/user/list",
    type: "get",
    response: () => {
        return {
            code: 20000,
            data: [
                {
                    "id": 1,
                    "username": "zhoujielun",
                    "password": "123456"
                },
                {
                    "id": 2,
                    "username": "guojingming",
                    "password": "666666"
                },
            ]
        }
    }
}

const userList1 = {
    url: "/user/list1",
    type: "get",
    response: () => {
        return {
            code: 20000,
            data: [
                {
                    "id": 1,
                    "username": "zhoujielun",
                    "password": "123456"
                },
                {
                    "id": 2,
                    "username": "guojingming",
                    "password": "666666"
                },
            ]
        }
    }
}

module.exports = [
    userList,
    userList1,
]

2、在main中引入,代码如下:

require("../mock");

当我们完成到这边的时候其实环境已经搭建的差不多了,下面我们在进行优化。

在我们的根目录中新建个.env文件:

// .env
VUE_APP_MOCK=true

完成之后我们在进行修改一下main.js

// VUE_APP_MOCK的值为true,并且在开发环境下
if (process.env.VUE_APP_MOCK && process.env.NODE_ENV === 'development') {
  require("../mock");
}

到这一步我们就完成了mock的数据环境搭建了。


三、使用

我们在使用的使用需要注意的是在接口中的urltype要与我们的mock中定义的相同。代码如下:

// request.js
import axios from 'axios'
import { Message } from 'element-ui'

// create an axios instance
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
    // withCredentials: true, // send cookies when cross-domain requests
    timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
    config => {
        return config
    },
    error => {
        // do something with request error
        console.log(error) // for debug
        return Promise.reject(error)
    }
)

// response interceptor
service.interceptors.response.use(
    response => {
        const res = response.data;
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        Message({
            message: error.message,
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)

export default service

api层中代码:

// index.js
const moduleFiles = require.context('./modules', false, /\.js$/);
let apis = {};

moduleFiles.keys().forEach(key => {
    // 获取文件名,将 ./ 和 .js 替换为空, 最终格式  common
    const fileName = key.replace(/(\.\/|\.js)/g, '');
    // 填充数据
    apis[fileName] = moduleFiles(key);
})

export default {
    ...apis
}
// modules/user.js
import request from '@/utils/request'
export function getList() {
    return request({
        url: '/user/list',
        method: 'get'
    })
}

完成之后我们在views层调用api接口,代码如下:

import api from "@/api";

api.user.getList().then(res => { console.log(res) });

到此,关于“vue-cli3中如何使用mockjs”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI