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

Javascript example
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.

CRUD	Method
Create	POST
Read	GET
Update	PUT (Replace) , PATCH (Modify)
Delete	DELETE

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

CRUD API Methods

NEXT » Lesson 2: Integrate a Database