vue-cli项目中使用mock结合axios-mock-adapter生成模拟数据【转】

1.安装

npm i mockjs axios --save-dev
npm i mockjs axios-mock-adapter --save-dev

2.创建数据

// 文件夹配置

----mock
--------data
------------good.js
------------user.js
--------index.js

users.js:

import Mock from "mockjs"

const Users = [];
for (let i=0; i<100; i++){
    Users.push(Mock.mock({
        id: Mock.Random.integer(60, 100),
        time: Mock.Random.datetime(),
        desc: Mock.Random.cparagraph()
    }))
}

export {Users}

goods.js:

import Mock from "mockjs"

const Goods = []
for (let i=0; i<10; i++){
    Goods.push(Mock.mock({
        id: Mock.Random.integer(60, 100),
        desc: Mock.Random.cparagraph(10,20),
        img: Mock.Random.image(‘200x100‘, ‘#4A7BF7‘,i)
    }))
}

export {Goods}

index.js-通过axios-mock-adapter生成代理api地址

import axios from ‘axios‘
import MockAdapter from ‘axios-mock-adapter‘

import { Goods } from ‘./data/goods‘
import { Users } from ‘./data/users‘

export default {
    init() {
        var mock = new MockAdapter(axios)
        mock.onGet(‘/users‘).reply(200, {
            code: 1001,
            msg: ‘请求成功‘,
            Users
        })
        // mock.onGet(‘/goods‘).reply(200, {
        //     code: 1001, msg: ‘请求成功‘, Goods
        // })
        mock.onGet(‘/goods‘).reply(config => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve([
                        200,
                        {
                            goods: Goods,
                            config: config.params
                        }
                    ])
                }, 500)
            })
        })
    }
}

通过api.js对api请求统一的管理

import axios from ‘axios‘

// 真实数据增加此项配置
let base = ‘‘

export const requestUsers = params => axios.get(`${base}/users`).then(res => res.data)

export const requestGoods = params => {
    return axios.get(`${base}/goods`, { params: params }).then(res => res.data)
}

最后在main.js里面进行初始化

import Mock from ‘./mock‘
Mock.init()

页面调用:

requestUsers().then((res) => {
    console.log(res)
})
requestGoods({id:1}).then((res) => {
    console.log(res)
})

请求结果:

转自--vue-cli项目中使用mock结合axios-mock-adapter生成模拟数据

原文地址:https://www.cnblogs.com/yzyh/p/12683390.html

时间: 2024-10-28 16:39:58

vue-cli项目中使用mock结合axios-mock-adapter生成模拟数据【转】的相关文章

Vuex内容解析和vue cli项目中使用状态管理模式Vuex

中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: 22 }, getters: { personInfo(state) { return `My name is ${state.name}, I am ${state.age}`; } } mutations: { SET_AGE(state, age) { commit(age, age); } }, acti

Android项目中gen文件下R文件无法生成的解决的方法

帮一个网友解决R文件无法生成的问题,搜集了些材料特整理例如以下,刚開始学习的人參考他人代码时极易出现此种问题,一般都是xml文件出错,无法被正确解析. gen文件夹无法更新,或者gen文件夹下的R.JAVA文件无法生成 1.gen文件夹的用处 android gen文件夹下的R.java并非由用户创建,而是androidproject本身将android的资源进行自己主动"编号"(ID)值. 2.gen文件夹下R文件无法更新/生成的原因 1)res文件夹下的layout下的xml文件名

Android项目中gen文件下R文件无法生成的解决办法

帮一个网友解决R文件无法生成的问题,搜集了些材料特整理如下,初学者参考他人代码时极易出现此种问题,一般都是xml文件出错,无法被正确解析. gen目录无法更新,或者gen目录下的R.JAVA文件无法生成 1.gen目录的用处 android gen目录下的R.java并不是由用户创建,而是android工程本身将android的资源进行自动"编号"(ID)值. 2.gen目录下R文件无法更新/生成的原因 1)res目录下的layout下的xml文件名有错.按照android的命名规范是

任正非:向谷歌学习,杀出一条血路(谷歌军团的编制不大,战斗力极强。任何产品都是架构第一。算法团队直接杀入到项目中去,一线既有算法又有数据,就容易突破,抽象的平台一定要有实践东西检验。蓝军不一定是有学历的。我们帮助他们在工作中完成学历教育)

IT之家1月22日消息 日前,华为心声社区公布了任正非在1月9日在杭州研究所业务汇报会上的讲话.在本次讲话中,任正非表示在软件工程能力提升上,我们最缺乏的是对宏观架构有清醒认识的人才.建立公司是一个架构:建立公司的利益体系也是一个架构:任何产品都是架构第一:软件重构一定要从宏观架构入手. 任正非强调,没有谁在限制我们的科研,我们也不要自己约束了自己,要敢于到贴近人才资源的地方进行研究活动,在每个研究所形成自己的技术要素,对行业发展形成牵引.要多和终端.外研所交流. 最后任正非表示,谷歌军团的编制

vue+webpack项目中使用dev-server搭建虚拟服务器,请求json文件数据,实现前后台分离开发

在项目开发中,前后台分离,做了假数据,项目使用vue2.0重构,后台也推到重来了,为了不耽误开发进程,我做了虚拟的数据请求,使用vue-cli脚手架搭建的项目文件中dev-server搭建虚拟api请求,访问自己mock的假数据虚拟请求后台的模式,具体做法如下 在build/dev-server.js文件中 在var app = express()这个实例的下面添加如下代码 // 本地json-server服务器搭建代码 // 引入数据库文件 var appData = require('../

Vue 实际项目中你可能会遇见的坑

纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. 一.项目的登录拦截及用户权限访问控制问题. 一个很常见的需求就是对未登录的用户进行路由拦截和用户的权限访问,如果你的项目之前是通过后台控制访问路由的,那么之前的后端现在可能需要在前端也需要控制了,由于我们用vue脚手架搭建的都是纯前端的路由访问,先看看我们的一般的项目路径: 你可能会注意到Vue的

Vue 实际项目中你可能会遇见问题

纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. 一.项目的登录拦截及用户权限访问控制问题. 一个很常见的需求就是对未登录的用户进行路由拦截和用户的权限访问,如果你的项目之前是通过后台控制访问路由的,那么之前的后端现在可能需要在前端也需要控制了,由于我们用vue脚手架搭建的都是纯前端的路由访问,先看看我们的一般的项目路径: 你可能会注意到Vue的

vue cli 项目的提交

前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 git init 将项目所有文件(未被ignore)添加到仓库 git add . 将add文件提交到本地仓库 git commit -m '提交信息' 本地仓库关联远程git仓库 git remote add origin git仓库 本地仓库代码提交到服务器 git push -u origi

mock的命名用一(生成随机数据)

Mock.Random 是一个工具类,用于生成各种随机数据. Mock.Random 的方法在数据模板中称为『占位符』,书写格式为 @占位符(参数 [, 参数]) . var Random = Mock.Random Random.email() // => "[email protected]" Mock.mock('@email') // => "[email protected]" Mock.mock( { email: '@email' } )