routing

index.js

@@ -10,6 +10,7 @@ const crypto = require ('@sapphirecode/crypto-helper');
 const password_helper = require ('@sapphirecode/password-helper');
 const api = require ('./lib/api');
 const http_proxy = require ('express-http-proxy');
+const history_fallback = require ('connect-history-api-fallback');
 
 const salt = crypto.create_salt ();
 const hash = crypto.hash_sha512 ('asd', salt);
@@ -36,6 +37,7 @@ const user = {
    */
 
   app.use (api);
+  app.use (history_fallback ());
   app.use (http_proxy ('localhost:8080'));
 
   app.listen (3000, () => {

package.json

@@ -16,6 +16,7 @@
     "@sapphirecode/password-helper": "^1.0.47",
     "@sapphirecode/ui-modules": "^0.1.1",
     "body-parser": "^1.19.0",
+    "connect-history-api-fallback": "^1.6.0",
     "cookie-parser": "^1.4.5",
     "core-js": "^3.6.5",
     "express": "^4.17.1",

seeds/fake.js

@@ -3,21 +3,28 @@
 const faker = require ('faker');
 
 function create_log () {
+  const data = {
+    num1: faker.random.number (),
+    num2: faker.random.number (),
+    num3: faker.random.number ()
+  };
   return {
     app:       faker.random.word (),
     message:   faker.random.words (),
-    data:      faker.random.objectElement (),
+    data:      JSON.stringify (data),
     timestamp: faker.date.recent ()
   };
 }
 
 async function seed (knex) {
   console.log ('creating seeds');
-  for (let i = 0; i < 100; i++) {
-    // eslint-disable-next-line no-await-in-loop
-    await knex ('log')
-      .insert (create_log ());
-  }
+  const log = (Array (100))
+    .fill (() => null)
+    .map (() => create_log ());
+  await knex ('log')
+    .del ();
+
+  await knex.batchInsert ('log', log, 10);
 }
 
 module.exports = { seed };

src/App.vue

@@ -1,13 +1,5 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">
-        Home
-      </router-link> |
-      <router-link to="/about">
-        About
-      </router-link>
-    </div>
     <router-view />
   </div>
 </template>

src/router/index.js

@@ -9,28 +9,31 @@
 
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import Home from '../views/Home.vue';
-import About from '../views/About.vue';
+import AppView from '../views/AppView.vue';
+import NotFound from '../views/NotFound.vue';
 
 Vue.use (VueRouter);
 
 const routes = [
   {
-    path:      '/',
-    name:      'Home',
-    component: Home
+    path:      '/app/:id',
+    name:      'AppView',
+    component: AppView
   },
   {
-    path:      '/about',
-    name:      'About',
-    component: About
-  }
+    path:      '/404',
+    name:      '404',
+    component: NotFound
+  },
+  { path: '*', redirect: '404' }
 ];
 
 const router = new VueRouter ({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  routes
+  mode:     'history',
+  // eslint-disable-next-line no-process-env
+  base:     process.env.BASE_URL,
+  routes,
+  fallback: true
 });
 
 export default router;

src/store/index.js

@@ -19,7 +19,7 @@ export default new Vuex.Store ({
   },
   actions:   {
     async get_log ({ commit }) {
-      const log = await fetch ('log')
+      const log = await fetch ('/log')
         .then ((res) => res.json ());
       commit ('set_log', log);
     }

src/views/About.vue

@@ -1,9 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
-
-<script>
-export default {};
-</script>

src/views/AppView.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="grid">
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+  </div>
+</template>
+
+<script>
+import Vuex from 'vuex';
+
+export default {
+  computed: { ...Vuex.mapState ({ log: (state) => state.log }) },
+  mounted () {
+    this.get_log ();
+  },
+  methods: { ...Vuex.mapActions ({ get_log: 'get_log' }) }
+};
+</script>
+
+<style scoped>
+.grid {
+  display: grid;
+  grid-auto-columns: 2in;
+  grid-auto-rows: 1in;
+  grid-auto-flow: dense;
+  width: 100%;
+  height: 100%;
+}
+
+p {
+  display: inline-block;
+}
+</style>

src/views/Home.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="home">
-    <TableView :items="log" />
-  </div>
-</template>
-
-<script>
-import Vuex from 'vuex';
-import TableView from '../components/TableView.vue';
-
-export default {
-  components: { TableView },
-  computed:   { ...Vuex.mapState ({ log: (state) => state.log }) },
-  mounted () {
-    this.get_log ();
-  },
-  methods: { ...Vuex.mapActions ({ get_log: 'get_log' }) }
-};
-</script>

src/views/NotFound.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>not found</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+
+</style>

test.http

@@ -0,0 +1 @@
+GET http://localhost:3000/log HTTP/1.1