Vue2 ：Mockjs 前端模擬假數據

轉自：https://www.jianshu.com/p/247951796585

安裝

mock官網
npm安裝： npm install mockjs
package文件中顯示當前mockjs版本說明安裝成功。
(也可以引入cdn：<script src="http://mockjs.com/dist/mock.js"></script>)

mockjs 文件

在main.js同級下建立mock.js文件：

// 引入mockjs
const Mock = require('mockjs');
const qs = require('qs');
// 獲取 mock.Random 對象
const Random = Mock.Random;

// 登錄
const login = function() {
  let status = false;//登錄狀態：ture--成功，false--失敗
  status = true;
  return {
    status: status
  }
}
// 表格分頁
const tblList = function(param) {
  param = param.body || '';//獲取傳過來的參數
  // console.log(qs.parse(param));//因為axios的post帶參數被qs.stringfy()轉換了，需要轉回來。
    if(param == ''){
      //無查詢條件
    let bookdata = Mock.mock({
      'books|1-10': [{
        'sid|+1': 1,
        'date': '@date("yyyy-MM-dd")',
        'name': '@csentence()',
        'address': '@county(true)',
        'region': '雙流區'
      }]
    });
    // console.log(bookdata);
    return bookdata;

  }else{
      //帶查詢條件
    let paramObj = qs.parse(param);
    console.log('input parameter：...');
    console.log(paramObj);
    let books = [];
    for (let i = 0; i < 10; i++) {
      let newBook = {
        // thumbnail_pic_s: Random.dataImage('300x250', 'mock的圖片'), // Random.dataImage( size, text ) 生成一段隨機的 Base64 圖片編碼
        date: Random.date(),
        name: paramObj.name+Random.csentence(),
        address: Random.county(true),
        region: paramObj.region
      }
      books.push(newBook)
    }
    return {
      books: books
    }
  }

}
//圖書列表
const bookList = function(param) {
  param = param.body || '';//獲取傳過來的參數
  // console.log(qs.parse(param));
  // 因為axios的post帶參數被qs.stringfy()轉換了，需要轉回來。
  let paramObj = qs.parse(param);
  console.log(paramObj);
  let nameInput = paramObj.name || '';
  let books = [];
  for (let i = 0; i < 10; i++) {
    let temp = i+1;
    let newBook = {
      sid: temp,
      // thumbnail_pic_s: Random.dataImage('300x250', 'mock的圖片'), // Random.dataImage( size, text ) 生成一段隨機的 Base64 圖片編碼
      author: Random.name(2,4),
      name: '《'+nameInput+Random.csentence()+"》",
      publishAt: Random.date(),
      description: Random.cparagraph()
    }
    books.push(newBook)
  }
  return {
    books: books
  }
}
//獲取文件列表
const fileList = function (param) {
  param = param.body || '';//獲取傳過來的參數
  // console.log(qs.parse(param));
  // 因為axios的post帶參數被qs.stringfy()轉換了，需要轉回來。
  let paramObj = qs.parse(param);
  console.log(paramObj);
  let files = [];
  for (let i = 0; i < 3; i++) {
    let newFile = {
      name: paramObj.username + i +'.png',
      url: Random.dataImage('300x250', 'mock的圖片'), // Random.dataImage( size, text ) 生成一段隨機的 Base64 圖片編碼
    }
    files.push(newFile)
  }
  return {
    fileList: files
  }
}

// Mock.mock( url, post/get , 返回的數據)；
Mock.mock('/mk_login', 'post', login);// 登錄
Mock.mock('/mk_tbllist', 'post', tblList);// 表格分頁
Mock.mock('/mk_booklist', 'post',bookList);// 圖書列表
Mock.mock('/mk_fileupload', 'post',{});// 文件上傳
Mock.mock('/mk_fetchFiles', 'post',fileList);// 獲取文件列表

main.js 引入mock

在main.js中引入mock文件：
require('./mock');

 

使用

vue文件中訪問該接口mock：
(調用的url接口和mock.js文件的Mock.mock( url, post/get , 返回的數據)的url接口一致，就能被mock攔截。)

api.post('/mk_login', data)
              .then(res => {
                console.log(res.data);
                if(res.data.status){
                  // 登錄成功
                  this.setUserInfo2(data);
                  this.$router.replace('/home');
                }
              })
              .catch(error => {
                console.log("login異常：")
                console.log(error)
              })

 

在其中遇到的問題分享：

執行npm run dev然后報錯：

ERROR in ./node_modules/express/lib/request.js Module not found: Error: Can't resolve 'fs' in 'xx文件'

百度到了這位老兄的文章：https://blog.csdn.net/mrliucx/article/details/105585202

具體就是按照提示安裝缺少的模塊：

npm install net

npm install fs

重新編譯后還是提示，注意這回是少了net：

 

 於是按上面老兄的文章對build\webpack.dev.conf.js進行了設置，增加了配置：

 

node: {
fs: ‘empty’
}

 

 再次npm run dev成功了！但是MOCK卻不起作用了，可能這里面會用到,所以還不能忽略。

 

又百度半天終於在stackoverflow，但這種方案是針對服務器端開發的，我的項目是前端單頁項目。

https://stackoverflow.com/questions/40959835/webpack-express-cannot-resolve-module-fs-request-dependency-is-expression

 

 

最后實在沒辦法，既然提示我“ERROR in ./~/express/lib/request.js”那就把相關的語句去掉看一下吧，這次果然成功了!

 

// 引入mockjs
//const { json } = require('express');//注釋掉
const Mock = require('mockjs');
const qs = require('qs');
const { parse } = require('semver');
// 獲取 mock.Random 對象
const Random = Mock.Random;

 

 

 其他注意事項：

　　對於前后端分離的項目，為了能夠解決跨域的問題，大家可能需要設置在前端和后端分別做一些設置。

　　前端：

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router/router'
import store from './store/'
import { routerMode } from './config/env'
import './config/rem'
import ViewUI from 'view-design';// gougou ViewUI
import 'view-design/dist/styles/iview.css';// gougou ViewUI
import axios from 'axios'; /* 引入axios進行地址訪問*/

Vue.prototype.$axios = axios;
axios.defaults.withCredentials = true;//這行代碼是必須的

 

　　后端：

header('Access-Control-Allow-Origin:' 這里你的前端項目域名，不能為 *);
header('Access-Control-Allow-Credentials:true');
header('Access-Control-Allow-Methods:GET,POST,OPTIONS');
header('P3P: CP="CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR"');//P3P協議是為了cookie可以實現單點登錄

 

　　以上兩項大多數人都明白。

　　但本人設置過，愣是不起作用，幾經周折，發現根本獲取不到后端的session，而且在開發者工具中跟蹤發現每個接口返回的PHPSESSIONID都不一樣，而且一直在變化。

　　

 

 　　最后百度半天，才發現是Mock的問題。最后將require('../src/mock');注釋掉，一切正常了！這個坑還是有點大，希望大家不要掉里。