Link Search Menu Expand Document
Course 2: Creating solutions for your project

Lesson 2: Integrating Frontend

The frontend is what the users see or experience. The frontend calls the backend APIs built on API AutoFlow. Based on the type of frontend, there are different ways to call the APIs.

Learn how to use VueJS in 15 mins

Watch a training ! Get started with full VueJS setup instruction video

Lesson Outline

  1. Javascript example
  2. VueJS example

API Spec

Using the Hello World example from the previous lesson.

  • Address: localhost:27836
  • Method: GET

Javascript API Call Example

Below is a simple Javascript example of the API call

<!DOCTYPE html>
<html>
<body>
  <p id="demo">Fetch a file to change this text.</p>
<script>
  let url = "http:\\localhost:27836"
  // Fetch data
  fetch (url)
  .then(x => x.text())
  // Display data
  .then(y => document.getElementById("demo").innerHTML = y);
</script>
</body>
</html>

</script>

VueJS API Call Example

There are several ways to do so, but a very popular approach is to use axios, a promise-based HTTP client. Learn how to install and use VueJS

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('http:\\localhost:27836')
      .then(response => (this.info = response))
  }
})
<div id="app">
  
</div>

Reference

https://v2.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html?redirect=true

Important!! CORS policy

If you see the below error, check to make sure you set the ACCESS CONTROL on API AutoFlow Server.

Access to fetch at 'http://localhost:27836/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

CRUD

When creating APIs, there are some basic methods that the application should support.

CRUDMethod
CreatePOST
ReadGET
UpdatePUT (Replace) , PATCH (Modify)
DeleteDELETE

In the API AutoFlow, the 4 methods are created to do the CRUD functions.

CRUD API Methods

NEXT » Lesson 2: Integrate a Database