mockjs+vue使用小记

Posted 要一份黄焖鸡

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了mockjs+vue使用小记相关的知识,希望对你有一定的参考价值。

使用mockjs唯一目的是快速完成前端项目,前端不需要再等后端数据,使用mock,来模拟吧~

它可以拦截ajax请求,并模拟返回你需要的数据。这才是真正的前后端分离啊

好了下面开始上实战了..

先安装

npm install mockjs --save-dev

新建data.js(模拟数据)

import Mock from ‘mockjs‘;
const data = Mock.mock({
   "data|0-3": [
    "浙A12222",
  ]
});
export {data}

新建mock.js引入数据并拦截请求

import Mock from ‘mockjs‘;
import {data} from ‘./data/data‘;
Mock.mock(‘/do‘, ‘post‘, data);

 

建api.js封装axios请求

import axios from ‘axios‘
import vue from ‘vue‘
axios.defaults.headers = {
"Content-Type": "application/x-www-form-urlencoded"
}
function fetch(url, params) {
  return new Promise((resolve, reject) => {
      
    axios.post(url, params)
      .then(response => {
        resolve(response.data);
      })
      .catch((error) => {
        reject(error);
      })
  })
}
 
export default {
      getplate(url, params) {
            return fetch(url, params);
      },
}

然后在vue组件中调用

api.getplate(‘/do‘, content)                    
  .then(res => {                    
   let allplate = res.data;
})

注意组建中请求地址应该与mock.js中地址相同。

 

 

大家还可以看下axios-mock-adapter,讲axios和vue结合,应该更好用一点。

 

以上是关于mockjs+vue使用小记的主要内容,如果未能解决你的问题,请参考以下文章

#yyds干货盘点# vue中mockjs的使用

vue项目中mockjs的使用

mockjs的增删改查(vue)

vue+mockjs 模拟数据,实现前后端分离开发

mockjs 的使用步骤

mockjs在vue中的使用