Vue使用faker.js创建多类型的基础假数据，不需要使用node

https://github.com/BrockReece/vue-faker/

卡洛背心

2642人浏览 · 2020-12-16 14:36:07

卡洛背心 · 2020-12-16 14:36:07 发布

为什么要使用Faker.js？

今天给大家带来的是faker.js的食用大全：

首先说一下为什么要使用faker.js，刚刚接手的项目因为暂时没有后端资源支持，所以在开发过程中是没有接口可用的。为了让项目进展的更顺利，我选择了faker.js来创建一些假数据来支持项目的开发。

Faker.js的git地址

faker.js的githup地址

faker-vue.js的githup地址

h5的单页面中使用faker.js

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Fader.js模拟数据</title>
</head>

<body>
  <div class="demo">faker.js模拟数据，打开控制台看输出。</div>
	// 在这里使用cdn的方式引入fake.js
  <script src="https://cdn.bootcss.com/Faker/3.1.0/faker.min.js"></script>
  <script type="text/javascript">
    function init() {
      faker.locale = "zh_CN";//设置数据是中文类型
      var randomName = faker.name.findName();
      var randomEmail = faker.internet.email();
      var randomCard = faker.helpers.createCard();
      var randomwebsite = faker.internet.url();
      var randomaddress = faker.address.streetAddress() + faker.address.city() + faker.address.country();
      var randombio = faker.lorem.sentences();
      var randomimage = faker.image.avatar();
      var customers = []

      for (var id = 0; id < 50; id++) {
        var firstName = faker.name.firstName()
        var lastName = faker.name.firstName()
        var phoneNumber = faker.phone.phoneNumberFormat()
		// 生成数组对象结构的数据
        customers.push({
          "id": id,
          "first_name": firstName,
          "last_name": lastName,
          "phone": phoneNumber
        })
      }

      console.log(randomName);
      console.log(randomEmail);
      console.log(randomCard);
      console.log(randomwebsite);
      console.log(randomaddress);
      console.log(randombio);
      console.log(randomimage);
      console.log(customers);
    }
    window.onloade = init()
  </script>
</body>

</html>

效果如下：
在这里插入图片描述

Vue中使用faker.js

npm install vue-faker

Vue.use(require(‘vue-faker’), { locale: ‘en_GB’ });

<template>
  <div>
    <h1>faker.js</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fakerData: []
    }
  },
  mounted () {
    // 初始化
    this.init()
  },
  methods: {
  	init () {
    	for (var id = 0; id < 10; id++) {
    	  this.$faker().locale = 'zh_CN'
	      var firstName = this.$faker().name.firstName()
	      var address = this.$faker().address.streetAddress()
	      var name = this.$faker().name.findName()
	      var past = this.$faker().date.past()
     	  var time = past.getFullYear() + '-' + (past.getMonth() + 1) + '-' + past.getDate()
	      var engine = this.$faker().database.engine()
	      this.fakerData.push({
	        'id': id,
	        'firstName': firstName,
	        'address': address,
	        'name': name,
	        'time': time,
	        'engine': engine
	      })
    	}
    	console.log(this.fakerData)
  	}
  }
}
</script>

<style>
</style>

在这里插入图片描述

最后 faker.js使用文档地址在这里！！！

开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届openEuler生态大会（中国·湖南）成功举办

10月30日，第二届openEuler生态大会（中国·湖南）成功举办。

开放原子开发者工作坊

“小满”安全车控操作系统正式在AtomGit开源

10月24日，由中国汽车工业协会指导，普华基础软件股份有限公司主办的“小满”安全车控操作系统开源发布会暨共建计划说明会成功举行。普华基础软件宣布将安全车控操作系统“小满”（简称“小满”）V24.10源代码正式在开放原子开源基金会（简称“基金会”）旗下AtomGit开源协作平台开源，并在AtomGit平