Try Oracle ORDS with VUE.js

Scott Wan 2018.1.1

Oracle ORDS

Oracle REST Data Services (ORDS)

A mid-tier Java application, ORDS maps HTTP(S) verbs (GET, POST, PUT, DELETE, etc.) to database transactions and returns any results formatted using JSON.

VUE.js

The Progressive
JavaScript Framework

tools

VUE.js
VUE JSFiddle Hello World example
apex.oracle.com

Build REST api by ORDS

Create table
Create REST api

html

js

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <h1>
    TODO List
  </h1>
  <ol>
    <li v-for="todo in todos">
      {{ todo.name }}
    </li>
  </ol>
  <button v-on:click="showToDoList">Show Me</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    todos: []
  },
  methods: {
    showToDoList: function () {
      fetch('https://apex.oracle.com/pls/apex/webuy/todotask/')
      .then(res => res.json())
      .then( data => {
      	console.log(data);
        this.todos = data.items;
      });
    }
  }
})

app.showToDoList();