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();

How does it look like?

Thanks