Proof of concept : Uf powered API

userfrosting · Sep 11, 2023 · b0178e8 · b0178e8
1 parent b222d4b
commit b0178e8
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 28 deletions.
diff --git a/app/assets/main.js b/app/assets/main.js
@@ -1,7 +1,11 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import axios from 'axios'
+import VueAxios from 'vue-axios'
 
 const app = createApp(App)
 app.use(router)
+app.use(VueAxios, axios)
+app.provide('axios', app.config.globalProperties.axios)  // provide 'axios'
 app.mount('#app')
diff --git a/app/assets/views/HomeView.vue b/app/assets/views/HomeView.vue
@@ -2,30 +2,23 @@
 export default {
     data() {
         return {
-            resources: [
-                {
-                    url: 'https://getbootstrap.com/docs/5.3/getting-started/introduction/',
-                    title: 'Bootstrap quick start guide'
-                },
-                {
-                    url: 'https://getbootstrap.com/docs/5.3/getting-started/webpack/',
-                    title: 'Bootstrap Webpack guide'
-                },
-                {
-                    url: 'https://getbootstrap.com/docs/5.3/getting-started/parcel/',
-                    title: 'Bootstrap Parcel guide'
-                },
-                {
-                    url: 'https://getbootstrap.com/docs/5.3/getting-started/vite/',
-                    title: 'Bootstrap Vite guide'
-                },
-                {
-                    url: 'https://getbootstrap.com/docs/5.3/getting-started/contribute/',
-                    title: 'Contributing to Bootstrap'
-                },
-            ]
+            resources: [],
+            loading: false,
+        };
+    },
+    methods: {
+        getList() {
+            this.loading = true
+            this.axios.get('/api').then((response) => {
+                // console.log(response.data)
+                this.resources = response.data
+                this.loading = false
+            })
         }
-    }
+    },
+    created() {
+        this.getList()
+    },
 }
 </script>
 
@@ -55,9 +48,10 @@ export default {
         <h1 class="uk-heading-divider">Additional resources</h1>
         <ul class="uk-list">
             <li v-for="item in resources">
-                <a class="uk-button uk-button-default" :href="item.url">{{ item.title }}</a>
+                <a class="uk-button uk-button-default" :href="item.url">#{{ item.number }} - {{ item.title }}</a>
             </li>
         </ul>
+        <button class="uk-button uk-button-primary" @click="getList()" :disabled='loading'>Reload Resources</button>
 
         <div style="padding-top: 25px; padding-bottom: 25px;"></div>
 

diff --git a/app/src/Controller/AppController.php b/app/src/Controller/AppController.php
@@ -26,4 +26,41 @@ public function pageIndex(Response $response, Twig $view): Response
     {
         return $view->render($response, 'pages/index.html.twig');
     }
+
+    public function api(Response $response): Response
+    {
+        $data = [
+            [
+                'url'    => 'https://getbootstrap.com/docs/5.3/getting-started/introduction/',
+                'title'  => 'Bootstrap quick start guide',
+                'number' => rand(1, 100)
+            ],
+            [
+                'url'    => 'https://getbootstrap.com/docs/5.3/getting-started/webpack/',
+                'title'  => 'Bootstrap Webpack guide',
+                'number' => rand(1, 100)
+            ],
+            [
+                'url'    => 'https://getbootstrap.com/docs/5.3/getting-started/parcel/',
+                'title'  => 'Bootstrap Parcel guide',
+                'number' => rand(1, 100)
+            ],
+            [
+                'url'    => 'https://getbootstrap.com/docs/5.3/getting-started/vite/',
+                'title'  => 'Bootstrap Vite guide',
+                'number' => rand(1, 100)
+            ],
+            [
+                'url'    => 'https://getbootstrap.com/docs/5.3/getting-started/contribute/',
+                'title'  => 'Contributing to Bootstrap',
+                'number' => rand(1, 100)
+            ],
+        ];
+
+        // Write empty response
+        $payload = json_encode($data, JSON_THROW_ON_ERROR | JSON_PRETTY_PRINT);
+        $response->getBody()->write($payload);
+
+        return $response->withHeader('Content-Type', 'application/json');
+    }
 }
diff --git a/app/src/Routes.php b/app/src/Routes.php
@@ -11,14 +11,15 @@
 namespace UserFrosting\Demo;
 
 use Slim\App;
-use UserFrosting\Routes\RouteDefinitionInterface;
 use UserFrosting\Demo\Controller\AppController;
+use UserFrosting\Routes\RouteDefinitionInterface;
 
 class Routes implements RouteDefinitionInterface
 {
     public function register(App $app): void
     {
         // Use a catch-all route to allow the user to refresh the page when using vue-router createWebHistory API
+        $app->get('/api', [AppController::class, 'api'])->setName('api');
         $app->get('/[{path:.*}]', [AppController::class, 'pageIndex'])->setName('index');
     }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,9 @@
 {
     "dependencies": {
+        "axios": "^1.5.0",
         "uikit": "^3.16.26",
         "vue": "^3.3.4",
+        "vue-axios": "^3.5.2",
         "vue-router": "^4.2.4"
     },
     "devDependencies": {