首先需要在自己的项目下面

npm install mockjs --save-dev

由于我的项目使用的是axios在本地模拟,所以需要

npm install axios --save-dev

上面两部分都完成,那就开始搭建了
下面是我的项目结构
项目结构

为了进行本地的数据模拟,我在src下面建立了一个文件夹,命名为api,从图上可以看到有三个文件分别为

config.js    getdata.js   mock.js

config.js对应的代码如下:

import axios from 'axios'

//配置api地址

const baseUrl = 'http://localhost:8081'

//axios设置key都是默认的不允许改动的
const $ajax = axios.create({
    baseURL:baseUrl,
    timeout:5000
})

export default $ajax

mock.js对应的代码如下:

const Mock = require('mockjs')
const base = 'http://localhost:8081'

Mock.mock(base+'/api/login','get',{
    "code":"success",
})

Mock.mock(base+'/api/forgetpassword','get',{
    'name':'@name',
    'age|1-100':100,
    'color':'@color'
})

Mock.mock(base+'/api/threemonth','get',{
   "code":"success",
   "data":{
    "bid_amount":"554749745.00",
    "bid_user":"13918"
   }
})

getdata.js对应的代码如下:

import $ajax from './config'

/*登录接口*/
export const login = data => $ajax.get('/api/login',data)

/*忘记密码 */
export const forgetpassword = data =>$ajax.get('/api/forgetpassword',data)

/*近三个月数据统计 */
export const threemonth = data =>$ajax.get('/api/threemonth',data)

这些配置好后,在main.js里面引入

require('./api/mock')

下面的截图为在login.vue里面的引入以及使用
这里写图片描述

method

这些都完成后,启动项目

npm run dev

打开浏览器控制台:
这里写图片描述

over

Logo

前往低代码交流专区

更多推荐