在vue项目中使用mockjs模拟接口和数据

在vue项目中使用mockjs模拟接口和数据

第一种使用方式

1、 安装引入

npm install mockjs 

npm安装之后，依赖会自动引入

2、 创建mockjs文件夹
在项目下创建一个mock文件夹，在这个文件夹下面创建index.js文件

3、往index.js中添加mock语法，例如

import Mock from 'mockjs'
 
// mock要返回的数据
var data = Mock.mock({
	// list 的值是一个数组，生成20-60个数组元素
	'list|20-60': [{
		// id 是一个自增数，起始值为 1，每次自增 1
		"id": '@increment()',
		"title": "@ctitle",
		"content": "@cparagraph",
		"add_time": "@date(yyyy-MM-dd hh:mm:ss)"
	}]
})
 
// 设置请求接口方式
Mock.mock('/api/get/user', 'get', (options) => {
	console.log(options);
	return {
		status: 200,
		message: '获取数据成功',
		test: data.list
	}
})

如果不知道mockjs的基本语法的话，可以跳到这篇文章简单看下：mockjs基本语法

4、 在main.js文件中导入创建的index.js

import '@/mock/index'

5、应用mockjs写的接口

methods: {
   getData() {
     this.$axios.get("/api/get/user").then((res) => {
       console.log(res);
     });
   },
 },
 mounted() {
   this.getData();
 },

第二种使用方式

1、安装引入

npm install mockjs

const mock = require('mockjs')

import mock from 'mockjs'

2、在src目录下创建mock文件夹，文件夹下创建一个index.js文件以及一个api文件夹，如下

src
	mock
		api
		index.js

3、在api文件夹下创建接口文件login.js
login.js

// 引入mock
import Mock from 'mockjs'

// mock模拟登录
export default{
    login:config =>{
        const {username,password} = JSON.parse(config.body)

        // 专门设置一个账号用于测试登录
        if(username === 'admin123' && password === 'admin123'){
            return {
                status:0,
                token:"bearer " + Mock.Random.guid(), // 返回token，guid类型模仿
                message:"登录成功",
            }
        }else {
            return {
                status : -1,
                message:"登录失败"
            }
        }
    }
}

4、在index.js文件下引入处理函数
index.js

import Mock from 'mockjs'
import login from './api/login' // 引入处理函数
// 登录接口
Mock.mock(/user\/login/g,'post',login.login)

5、在main.js中引入index.js

import './mock'

6、接口使用

axios.post('/user/login',"参数xxx").then().catch()