Tutorial: Integrating Frontend with DataForge

This tutorial demonstrates how to integrate a frontend application with DataForge using its API endpoints. We will cover the implementation of a simple Vue.js frontend for interacting with an invoice management system built with DataForge.

---

Prerequisites

Before proceeding, ensure that:

• DataForge is installed and configured in your Laravel project. Refer to the installation guide.
• You have a basic understanding of JavaScript and Vue.js.
• An API endpoint for invoices is already set up. Refer to the Building a Simple API guide.

---

Step 1: Set Up the Vue.js Project

1.1 Install Vue CLI

If Vue CLI is not already installed, run:

npm install -g @vue/cli

1.2 Create a New Vue Project

Generate a new project:

vue create invoice-app

Select default configurations or customize as needed.

1.3 Navigate to the Project Directory

cd invoice-app

---

Step 2: Install Axios for API Requests

Install Axios to handle HTTP requests:

npm install axios

---

Step 3: Create the Invoice API Service

Define a service for making API calls to the DataForge backend.

File: src/services/InvoiceService.js

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'http://localhost:8000/api',
  headers: {
    'Content-Type': 'application/json',
  },
});

export default {
  getInvoices(params) {
    return apiClient.get('/list/Invoice/list', { params });
  },
  getInvoiceDetails(invoiceId) {
    return apiClient.get(`/Task/InvoiceTask/detail`, {
      params: { invoiceId },
    });
  },
};

---

Step 4: Build the Invoice List Component

Create a component to display the list of invoices.

File: src/components/InvoiceList.vue

<template>
  <div>
    <h1>Invoices</h1>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Customer</th>
          <th>Total</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="invoice in invoices" :key="invoice.invoiceId">
          <td>{{ invoice.invoiceId }}</td>
          <td>{{ invoice.customerId }}</td>
          <td>{{ invoice.totalAmount }}</td>
          <td>{{ invoice.status }}</td>
          <td>
            <button @click="viewDetails(invoice.invoiceId)">View</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import InvoiceService from '../services/InvoiceService';

export default {
  data() {
    return {
      invoices: [],
    };
  },
  methods: {
    fetchInvoices() {
      InvoiceService.getInvoices({ pageNo: 1, limit: 10 })
        .then((response) => {
          this.invoices = response.data.items;
        })
        .catch((error) => {
          console.error('Error fetching invoices:', error);
        });
    },
    viewDetails(invoiceId) {
      this.$router.push({ name: 'InvoiceDetails', params: { id: invoiceId } });
    },
  },
  created() {
    this.fetchInvoices();
  },
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
th {
  background-color: #f4f4f4;
  text-align: left;
}
</style>

---

Step 5: Add Routing for Invoice Details

Update your router configuration to include a route for the invoice details page.

File: src/router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import InvoiceList from '../components/InvoiceList.vue';
import InvoiceDetails from '../components/InvoiceDetails.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'InvoiceList',
      component: InvoiceList,
    },
    {
      path: '/invoice/:id',
      name: 'InvoiceDetails',
      component: InvoiceDetails,
    },
  ],
});

---

Step 6: Build the Invoice Details Component

Create a component to display detailed information about a specific invoice.

File: src/components/InvoiceDetails.vue

<template>
  <div>
    <h1>Invoice Details</h1>
    <p><strong>ID:</strong> {{ invoice.id }}</p>
    <p><strong>Customer ID:</strong> {{ invoice.customerId }}</p>
    <p><strong>Total:</strong> {{ invoice.totalAmount }}</p>
    <p><strong>Status:</strong> {{ invoice.status }}</p>
    <router-link to="/">Back to List</router-link>
  </div>
</template>

<script>
import InvoiceService from '../services/InvoiceService';

export default {
  data() {
    return {
      invoice: {},
    };
  },
  methods: {
    fetchInvoiceDetails() {
      const invoiceId = this.$route.params.id;
      InvoiceService.getInvoiceDetails(invoiceId)
        .then((response) => {
          this.invoice = response.data.Invoice;
        })
        .catch((error) => {
          console.error('Error fetching invoice details:', error);
        });
    },
  },
  created() {
    this.fetchInvoiceDetails();
  },
};
</script>

<style scoped>
div {
  margin: 20px;
}
</style>

---

Conclusion

You’ve successfully integrated a Vue.js frontend with the DataForge API! This setup demonstrates how DataForge’s endpoints can seamlessly power a modern, interactive frontend. Expand upon this example to add additional features, such as search, filtering, and advanced workflows.