Added Ping route and tested backend call

booker/app.py

@@ -8,14 +8,14 @@ DEBUG = True
 app = Flask(__name__)
 app.config.from_object(__name__)
 
-# enable CORS
+# enable CORS. Note in this config it allows requests from all inbound domains.
 CORS(app)
 
 
 # sanity check route
 @app.route('/ping', methods=['GET'])
 def ping_route():
-    return jsonify('pong')
+    return jsonify('You pass butter')
 
 
 if __name__ == '__main__':

client/package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "vue": "^2.5.16",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"

client/src/components/HelloWorld.vue

@@ -1,31 +1,6 @@
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
-    <p>
-      For guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
-    </ul>
   </div>
 </template>
 

client/src/components/Ping.vue

@@ -0,0 +1,30 @@
+<template>
+    <div>
+        <p>{{msg}}</p>
+    </div>
+</template>
+
+<script>
+    import axios from 'axios';
+
+    export default {
+    name: 'Ping',
+    data() {
+        return {
+            msg: ''
+        }
+    },
+    methods: {
+        getMessage() {
+            const path = 'http://localhost:5000/ping';
+            axios.get(path)
+                .then((res) => {this.msg = res.data})
+                .catch((error) => { console.log(error)})
+        }
+    },
+    created() {
+        this.getMessage()
+    },
+
+    }
+</script>

client/src/router.js

@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Home from './views/Home.vue'
+import Home from '@/views/Home.vue'
-import About from './views/About.vue'
+import About from '@/views/About.vue'
+import Ping from '@/components/Ping.vue'
 
 Vue.use(Router)
 
 export default new Router({
+  mode: 'history',
   routes: [
     {
       path: '/',
@@ -16,6 +18,11 @@ export default new Router({
       path: '/about',
       name: 'about',
       component: About
+    },
+    {
+      path: '/ping',
+      name: 'ping',
+      component: Ping
     }
   ]
 })

client/src/views/Home.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="home">
-    <img src="../assets/logo.png">
     <HelloWorld msg="Welcome to Your Vue.js App"/>
   </div>
 </template>