Building a Multi-Type Batch Fake Data Generation Tool with Flask and Vue.js

In software development, testing and demonstration often require diverse mock data. This article presents a complete solution for generating batch fake data of multiple types (name, age, gender, ID card, phone number, email, bank card) using a Flask backend and a Vue.js frontend.

1. Project Overview The tool provides a simple UI for users to specify the quantity of records and generates the requested data automatically, reducing manual effort.

2. Preparation Ensure Python and Node.js are installed. Install required libraries: Flask, Flask‑CORS, Faker for the backend, and Vue CLI for the frontend.

3. Backend Code Create app.py with the following content:

from flask import Flask, jsonify, request
from flask_cors import CORS
from faker import Faker

app = Flask(__name__)
CORS(app)
fake = Faker()

@app.route('/generate', methods=['POST'])
def generate_fake_data():
    data = request.get_json()
    quantity = data['quantity']
    fake_data = {
        'name': [fake.name() for _ in range(quantity)],
        'age': [fake.random_int(min=1, max=100) for _ in range(quantity)],
        'gender': [fake.random_element(['Male', 'Female']) for _ in range(quantity)],
        'id_card': [fake.ssn() for _ in range(quantity)],
        'phone': [fake.phone_number() for _ in range(quantity)],
        'email': [fake.email() for _ in range(quantity)],
        'bank_card': [fake.credit_card_number(card_type='visa') for _ in range(quantity)]
    }
    return jsonify({'result': fake_data})

if __name__ == '__main__':
    app.run(debug=True)

This Flask app exposes a /generate POST endpoint that receives a JSON payload with the desired quantity and returns a JSON object containing arrays of the generated fields.

4. Frontend Code Generate a Vue project and replace the content of src/components/HelloWorld.vue with the following:

<template>
  <div class="hello">
    <h1>创建多类型批量假数据工具</h1>
    <div class="input-container">
      <label for="quantity">生成数量：</label>
      <input type="number" id="quantity" v-model.number="quantity" min="1">
    </div>
    <button @click="generateData">生成</button>
    <div class="result" v-if="fakeData">
      <p>生成结果：</p>
      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>身份证</th>
            <th>手机号</th>
            <th>邮箱</th>
            <th>银行卡</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="data in fakeData" :key="data.id">
            <td>{{ data.name }}</td>
            <td>{{ data.age }}</td>
            <td>{{ data.gender }}</td>
            <td>{{ data.id_card }}</td>
            <td>{{ data.phone }}</td>
            <td>{{ data.email }}</td>
            <td>{{ data.bank_card }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      quantity: 1,
      fakeData: null,
    };
  },
  methods: {
    generateData() {
      axios.post('http://localhost:5000/generate', { quantity: this.quantity })
        .then(response => {
          this.fakeData = response.data.result;
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
};
</script>

<style scoped>
h1 { text-align: center; margin-bottom: 20px; }
.input-container { margin-bottom: 10px; }
label { display: block; margin-bottom: 5px; }
input[type="number"] { width: 100%; padding: 5px; font-size: 14px; border: 1px solid #ccc; border-radius: 3px; }
button { width: 100%; padding: 10px; font-size: 14px; color: #fff; background-color: #007bff; border: none; border-radius: 3px; cursor: pointer; }
.result { margin-top: 20px; }
table { width: 100%; border-collapse: collapse; }
thead th, tbody td { padding: 5px; text-align: center; border: 1px solid #ccc; }
</style>

The Vue component provides an input for the desired quantity, a button to trigger data generation, and a table that displays the returned mock records.

5. Running the Application Start the backend with $ python app.py , then launch the frontend development server with $ npm run serve . Open http://localhost:8080 in a browser, enter a quantity, and click “生成” to see the generated data.

Conclusion The project demonstrates a full‑stack approach to creating a flexible fake‑data generation tool, combining Flask’s powerful data‑generation capabilities with Vue.js’s reactive UI, and can be extended to support additional data types or custom rules as needed.