vue使用MOCK.js生成后端模拟数据

项目安装拓展

1.在搭建好的vue项目中 cd practice_project\elements-demo (elements-demo项目名)
2.安装mockjs
npm install mockjs --save-dev

3.引入mockjs

入口文件中main.js

import Mock from './mock/mock'

在src中创建mock文件夹，在里面创建mock.js,在 mock.js中可以定义语法规则

// 使用 Mock
var Mock = require('mockjs')
var Random = require('mockjs').Random;

var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

参考MCOK语法生成规则
—————————————————————————————————————

将模拟数据变成sql语句插入后端数据库参考

除了可以让其拦截AJAX并显示模拟数据外, MOCK。js生成的模拟数据也可以输出成sql语句

在引入mock的项目中的src的位置创建一个js文件, 将根据数据库字段定义好的mock规则写入, 并使用node执行:

const fs = require('fs');
var Mock = require('mockjs')
var Random = require('mockjs').Random;
//创建一定数量的sql语句
function createSql(num)
{
  var tempStr ='';
  for (var i = 0; i < num; i++) {

    //Random.name()
    var name = Mock.mock('@name');
    var sex = Math.random() > 0.5 ?1:0;
    //Random.email()
    var email = Mock.mock('@email');
   // Random.integer(13000000000, 13999999999);
    var telephone = Mock.mock('@integer(13000000000, 13999999999)');
   // Random.cname(); 
    var leader = Mock.mock('@cname');
   // Random.date('yyyy-MM-dd');
    var create_time = Mock.mock('@date("yyyy-MM-dd")');
    var sql = `insert into tplay_example(name,sex,telephone,email,leader,create_time) values('${name}',${sex},'${telephone}','${email}','${leader}','${create_time}');`;

    tempStr+=sql+"\r\n";     
  }


 writeFile("mysql.sql",tempStr);

}

createSql(20);

function writeFile(url,data=''){

  fs.writeFile(url, data, 'utf8', function(err){      
      if(!err)
      {
        console.log('创建完成');
      }     
  });

 }

运行:

图片.png